Widgets Tutorial (New Version)
Types of widget
Basic
Widget | Example |
---|---|
Text | ![]() |
Button | ![]() |
Input | |
HTML | See video |
Charts
Widget | Example |
---|---|
Bar Chart | See video |
Line Chart | ![]() |
Pie Chart | ![]() |
Scatter Plot | ![]() |
Utility
Widget | Example |
---|---|
List | ![]() |
Toggle | ![]() |
Color Picker | See video |
Grouping List | ![]() |
Filterable List | |
JSON Editor | ![]() |
Form | ![]() |
Gauges
Widget | Example |
---|---|
Radial Gauge | ![]() |
Speedometer | ![]() |
Other Widgets
Widget | Example |
---|---|
Google Map | ![]() |
Rule Builder (Advanced) | |
CRUD Grid | See here for the IPM package |
Parsers
Data Types
All widgets will require you to choose a type of incoming data to render.
Static - data will be loaded as is and is not changed unless code is written for it to listen and force changes.
Calculated - can reference a datasource and the JavaScript in the parser can be customizable.
Dynamic - The datasource is added and data gets updated as changes are made in the datasource. This will appear in ‘Content’ as ‘Datasources’.
Data Parsers
The parser for the widget can be edited in this section. Datasources can also be added.
Editing the Parser
To edit the parser, click on ‘Edit’ next to the data type.
The parser includes:
- ‘Debug’ button - this is to debug your parser
- ‘Save’ button - save changes you make to your parser. Do not close the parser without saving your changes.
- ‘Discard Changes’ button - restores parser to its default state.
To go back to the widget editing page, click on the name of the widget.
Event Parsers
It appears the same as the data parser.
Advanced
Using React Components
React components can be used in the HTML widget. This can be applied by marking the React Component?
checkbox in the Other section in the HTML widget settings.
When a React component is used inside a HTML widget, the component will be placed into the portal’s React tree. This means it will be able to use lifecycle methods such as componentWillUnmount. Whenever the user navigates away from the page that the widget lives on the componentWillUnmount
method will be called.
Note: JSX will need to be transpiled beforehand, in most cases this will be done by cb-dev-kit
Here is a sample of code that can be used to test react in the HTML widget parser together.:
HTML
<div id="my-react-container">
</div>
//js
parser = (ctx) => {
class MyReactComponent extends React.Component {
render () {
return React.createElement("h1", null, "Hello from React!");
}
componentWillUnmount() {
console.log('on unmount!');
}
}
return {
element: React.createElement(MyReactComponent, null),
container: document.getElementById('my-react-container')
}
}
This should return the "Hello from React!"
text.
FAQ
- How do I use
onUpdate
in the form widget?
onUpdate
is a callback function that is invoked in the Form Source when any of the form fields gets updated. It gives users access tocurrentValues
following the change so that you can then update other values directly and updating thefieldSettings
of the form, such as dropdown options.currentValues
are the values that are already inputed in the available fields.
Ex.
onUpdate: function (arg) {
if (arg.currentValues.state) {
var cityOptions = stateToCity[arg.currentValues.state]
arg.fieldSettings.city.dropdownOptions = cityOptions
}
return arg
},