React UI Beta

The Infinite Blue Platform, prior to 6.0 release, used the Kendo UI engine, by default, to render the App UI. The Kendo engine uses Kendo UI Framework based on JQuery. At par with the current industry standards, Platform has now evolved and implemented REACT UI engine that can be used to render the same App using REACT Framework. Both, Kendo and REACT engines are currently available simultaneously. The following image displays how intuitive an application page can be customized using the React UI.

With an easy-to-use toggle button, switching from one UI to another is possible at any time without any impact on the Application or Meta data. Thus, users now have an option to pick the UI framework of their choice. The React engine uses Ant Design library to a large extent but also has widgets from multiple other libraries.

Trying React UI

The following section briefly lists outs the most evident differences between the existing Kendo Engine and React Engine (Beta).

  • Try New Beta UI: Users can switch to the React Beta UI framework by clicking Try New Beta UI toggle at the top right of the page view. This action can be performed on any Platform page of the instance. This functionality is governed by ShowNewBetaUITryoutLink shared property.

  • Switch to Classic UI: For any reason, if a user wants to switch back to the Classic UI framework, by clicking Switch to Classic UI toggle at the top right of the page view returns the page components to the Classic UI. This action can be performed on any Platform page of the instance.

  • App Preview: The App Preview can be accessed by clicking the Settings gear icon on the right side of the page or from the Platform application switcher. The App Preview menu option lets you configure the following:

    • Page Style Setting – Choose the overall page display style - Dark or Bright.
    • Navigation Mode – Choose the navigation mode - Side, Top or Mixed.

    • Content Width – Choose the width of the displayed content - Fluid or Fixed.

    • Fixed Header – Toggle to enable/disable a fixed header on the application page.

    • Fixed Sidebar – Toggle to enable/disable a fixed sidebar on the application page.

    • Component Density – Choose the density of the components displayed on the application page - Small, MiddleLarge.

      Click Apply to save the app preview settings.

  • Collapse/Expand Sidebar: To collapse or expand the left sidebar, users can click the Collapse/Expand icon at the top left of the page.

  • More: The More (ellipsis) action button appears and is activated in the React UI only when at least one record-checkbox is selected. This action enables a user to Tag, Convert, Merge, Find Duplicates, etc. However, this button appears regardless of record selection in the Current UI but is activated only when at least one record-checkbox is selected.

  • Delete: The Delete button appears and is activated in the React UI only when at least one record-checkbox is selected. This action enables a user to delete one or more records by (multi) selecting them. However, this button appears regardless of record selection in the Current UI but is activated only when at least one record-checkbox is selected.

  • Additional UI elements in the React UI: The Refresh, Density, Column Display, and Full Screen options can be used to perform the following actions:

    • Refresh - To refresh the list of records.

    • Density - To set the height of the row as Larger, Middle, or Compact.

    • Settings – To select the columns to view from a menu that includes Actions, Locations, City, etc.

    • Full Screen - To view the list of records in the full screen mode of the device in use.

To configure widgets on React UI, see UI Configurator.