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

1. 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 to currentValues following the change so that you can then update other values directly and updating the fieldSettings 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
},