Widget Sets

Overview

Starting with Profound UI Version 6, the Visual Designer includes the capability to group and save widgets into customizable sets. The widget sets panel can be found on the left side of the Designer.

Default Sets

Some default sets are shipped with Profound UI. To select a widget set, click on the set name in the Widget Sets panel. To use widgets in a set, drag a widget from the selected set to the Design canvas.

Creating a New Widget Set

Creating a new Widget Set is as easy as clicking the Add Set button of the Widget Sets panel toolbar. A dialog box would then popup requesting a name be entered for the new set.

Rename a Widget Set

To rename a widget set, select the set and click on the Rename set button in the toolbar of the Widget Sets panel. Then enter the new name of the set in the Rename Set dialog.

Remove a Widget Set

To remove a widget set, select the set and click on the Remove set button int the toolbar of the Widget Sets panel. 

Reorder Widget Sets

We understand that some users may want their custom Widget Set to be at the top of the Widget Sets list, so we have provided an easy way to reorder them! Using the Move set up and Move set down buttons located in the Widget Sets toolbar, you can move a currently selected Widget Set up or down the list.

Add Widgets to a Widget Set

Widgets can be added from the All Widgets toolbox to a set by right-clicking on the widget and selecting the desired set. This will add the widget to the selected set with the default settings of the widget.

Save a Customized Widget to a Widget Set

After customizing a widget, a user may want to save it to use it multiple times without having to copy and paste it or customize all over again each time they want to use it. Because of this, we have provided a way for customized widgets to also be added to a Widget Set with the customized settings. This is done by right-clicking the widget and selecting Add to Set, then select the desired set name on the Add to Set dialog.

The widget will be saved with all of the properties currently set in the Properties Window, including any field binding.

Renaming Widgets

To rename a widget in a set, right-click the widget and select Rename. Then enter the new name on the Rename Widget dialog.

Changing Widget Icons

To change a widget icon, right-click the widget and select Change Icon. Then select the new icon on the icon selection dialog.

Auto Generate Bound Field Names

When widgets with bound fields are added to a set, the field binding information is saved so that when the widget is dragged onto the canvas all of the bound field names/values/types and formatting information will be set as they were when the widget was saved to the set. This can result in duplicate field names when dragging widgets onto the canvas. To auto generate bound field names when dragging a widget onto the canvas, right-click the widget and select Auto-generate field names.

This option only works with the "value", "response", and "html" properties, and will only be available if the widget was saved to the set with a field bound to one of those properties.

Reordering Widgets in a Set

By default, widgets will appear in the order they are added to the set. To reorder the widgets in a set, click on the Reorder Widgets button in the toolbar of the Widget Sets panel. Then drag/drop the widgets into the desired positions. 

When finished reordering, click on the Reorder Widgets button again to exit reorder mode.

Removing Widgets

To remove a widget from a set, right-click the widget and select Remove.

Storage of Widget Sets Data

Widget sets are initially loaded from a default data file that is shipped with the Profound UI installation. The default widget set data file is stored at DOCUMENT_ROOT/profoundui/proddata/widget_sets.json. Widget set data is loaded into the browser's local storage area, and any changes to widget set data are done only in local storage. Customizations can be saved to the server by clicking on the Save Sets to Server button in the toolbar of the Widget Sets panel.

Custom widget set data is stored at DOCUMENT_ROOT/profoundui/userdata/widget_sets.json. To replace the contents of local storage with the contents of the data file on the server, click the Load Sets from Server button in the toolbar of the Widget Sets panel.