UI Configurator Beta

The REACT UI Configurator is a simple UI Widget Mapper that represents an object's data in rich UI widgets. IT also enhances appearance and performance of the Platform’s UI components based on the REACT JS architecture.

For example, users can design an interactive dashboard using the React UI widgets. By default, a set of widgets are readily available for use where the users can start mapping the widgets with any object/view data.

Working with React UI Configurator

This UI configurator is accessible from the App Switcher. In order to access it, the UI toggle button must be set to React UI.

Note: The UI Configurator can be accessed by a Master Admin only.

The left pane of the User Dashboard displays the objects that enables the user to add mappings. Each mapping has a unique name. Each mapping is linked with an object view which can be mapped with any widget available.

To add a mapping, click on the + icon beside My Mappings. A New Mapping pane slides from the left.

  • Select the visual widget for the mapping.

  • Enter the Mapping Name. This needs to remain unique across the Platform.

  • Choose the Object & View against this mapping.

  • Enter a description for this mapping.

  • Click Add to complete the New Mapping addition.

The newly added mapping should be available in My Mappings of the left Objects Pane.

The right pane of the User Dashboard displays the properties of any selected object mapping/widget.

User Dashboard

The user dashboard comprises of two tabs - Design and onLoad.

Design tab

This tab is for a preview purpose only. To preview any mapping, click on any available mapping under My Mappings of the Objects pane. The mapping is previewed on the Design tab based on the mapping’s preferred widget.

OnLoad tab

This tab enables the user to map the object’s view against the widget. To map any widget, click on any available mapping under My Mappings of the Objects pane. Under the OnLoad tab, the user can start connecting the nodes between the view(s) of an object against the widget based on the requirement.

Click Reload View to get the updated view of the data on the configured widget.

Click Save to save the mapping configuration.

Page Designer

On completion of mapping/widget configuration, the newly added mapping becomes available on the list of Available Components under the Widget Mapping Components. The new mapping can be dragged and dropped when designing the page view using the Design this Page option. For more information to add components, see Editing pages.

React UI Widgets

Using React UI’s collection of intuitive and interactive widgets, stunning applications can be created effortlessly. The following images display some of the sample application pages using the React UI widgets.