Adding Data-Backed Components

If the CustomPanel is associated with an XML data source file, the Edit Mode toolbar includes additional buttons for creating objects that display and/or manipulate data parameters.

This section includes generic steps for creating data-backed objects such as static or editable displays of widgets, parameter data, static labels, editable text areas, option choice controls, numeric choice controls, or toggle choice controls.

For More Information on...

For detailed information about each type of data-backed object, see the corresponding section:

Widgets

Parameter Displays

Data-Backed Labels

Editable Text Areas

Option Choice Controls

Numeric Choice Controls

Toggle Choice Controls

For information about customizing components by editing their attributes, see Editing Components.

Widgets

You can add pre-built widgets to a CustomPanel. Widgets are DashBoard panel elements stored in files. They can be thought of as self-contained mini-applications. For example, a widget may enable you to select and play videos. You add widgets by referencing them from your CustomPanel.

This section describes how to add existing widgets to a custom panel. It does not describe how to create widgets.

Widgets are defined by a widget descriptor file. The filename of the widget descriptor file ends in .widgetdescriptor. They may also depend on other files, such as pictures.

Before you can add a widget to your panel, you must ensure the widget files (.widgetdescriptor files plus any supporting files) are available in one of the two following locations:

In a folder named widgets, which must be in the same folder where DashBoard (DashBoard.exe) is installed.

Typically, C:\DashBoard\widgets, or C:\DashBoard Beta\widgets.

In a folder named widgets, which must be in the same folder where the panel file (.grid file) is located.

To add a pre-built widget:

1.On the Edit Mode toolbar, click the Widget button.

button_widget00017.png

 

2.Drag a box on the panel to define the widget area.

The Insert into Component dialog appears.

add_widget.png 

3.Click the widget you want to insert, and then click Ok

The widget appears.

Parameter Displays

You can display a parameter value, which users can change.

You can also associate one or more tasks with the displayed parameter, so that when the parameter value changes, the tasks are performed.

To display a parameter value:

1.On the Edit Mode toolbar, click the Display or edit a parameter backed by your data source button.

button_dataDsplyParam00019.png

 

Tip: If the button is not visible, click the Param button to reveal the buttons used for adding data-backed components.

2.Drag a box on the panel to define the area.

The Insert into Component dialog box appears.

3.In the Select Parameter area, select the parameter you want to display.

4.Specify whether you want to include the parameter name.

When selected, the name of the parameter, as defined by the data source, is also displayed.

5.If the parameter may return multiple items, specify whether you want them kept together.

When selected, returned elements can only be modified as a group, and are displayed together neatly. For example, if placed on an absolute position canvas, they do not overlap.

When not selected, returned elements can be individually modified. For example, you can apply different style options to each element, or position them in separate table cells.

6.Click OK.

The parameter appears on the CustomPanel.

Editing Displayed Parameters

After you display a parameter, you can customize the display using the Edit Component window.

To access the Edit Component window, select the component and double-click it. For displayed parameters, the Edit Component window contains the following tabs:

Param Attributes Tab — For more information, see Param Attributes Tab.

Tip: In the Tasks area of the Param Attributes tab, you can associate one or more tasks with the displayed parameter, so that when the parameter value changes, the tasks are performed.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Data-Backed Labels

You can insert a text label showing data from a parameter. You can select an existing parameter, or create a new one. Data-backed labels are read-only to the user.

To create a data-backed label:

1.On the Edit Mode toolbar, click the Label button that is partially yellow.

button_dataLbl00021.png

 

Tip: If the button is not visible, click the Param button to reveal the buttons used for adding data-backed components.

2.Drag a box on the panel to define the label area.

The Insert into Component dialog box appears.

3.In the Insert Label area, select an existing parameter, or create a new one.

4.In the Display Type area, select a display option.

5.Click OK.

The label appears on the CustomPanel.

Editing Data-Backed Labels

After you add a data-backed label, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For data-backed labels, the Edit Component window contains the following tabs:

Param Attributes Tab — For more information, see Param Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Editable Text Areas

You can add a text area backed by a data source. Depending on how you choose to display the text area, it can be editable or not, can be shown as a selectable list, or appear as a status dot.

You can format the text area using the options provided by the data source library. The entered data is stored in the associated parameter.

To create an editable text area:

1.On the Edit Mode toolbar, click the Insert an editable text area backed by your data source button.

button_dataTxtFld00023.png

 

Tip: If the button is not visible, click the Param button to reveal the buttons used for adding data-backed components.

2.Drag a box on the panel to define the text area.

The Insert into Component dialog box appears.

3.In the Insert String area, select an existing parameter, or create a new one.

4.In the Display Type area, select a display option.

5.Click OK.

The text area appears on the CustomPanel.

Editing Text Area Attributes

After you add a text area, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For editable text areas, the Edit Component window contains the following tabs:

Param Attributes Tab — For more information, see Param Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Option Choice Controls

You can add controls that enable users to select from a pre-determined list of options. Choices can be shown in a text list, drop-down menu, list of rectangular buttons, or as a list of radio buttons.

To create an option choice control:

1.On the Edit Mode toolbar, click the Insert a choice (list, toggle buttons, or, radio buttons) backed by your data source button.

button_dataChce00025.png

 

Tip: If the button is not visible, click the Param button to reveal the buttons used for adding data-backed components.

2.Drag a box on the panel to define the area for the control.

The Insert into Component dialog box appears.

3.In the Insert Choice area, select an existing parameter, or create a new one.

4.In the Display Type area, select a display option.

5.Click OK.

The option choice control appears on the CustomPanel.

Editing Option Choice Controls

After you add an option choice control, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For option choice controls, the Edit Component window contains the following tabs:

Param Attributes Tab — For more information, see Param Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Numeric Choice Controls

You can add a control that enables users to specify numeric values for a parameter.

To create a numeric choice control:

1.On the Edit Mode toolbar, click the Insert a number (slider, counter, etc) backed by your data source button.

button_dataNum00027.png

 

Tip: If the button is not visible, click the Param button to reveal the buttons used for adding data-backed components.

2.Drag a box on the panel to define the area for the control.

The Insert into Component dialog box appears.

3.In the Insert Number area, select an existing parameter, or create a new one.

If you create a new parameter, specify the range constraints (minimum value, maximum value, and step value).

4.In the Display Type area, select a display option.

5.Click OK.

The numeric choice control appears on the CustomPanel.

Editing Numeric Choice Controls

After you add a numeric choice control, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For numeric choice controls, the Edit Component window contains the following tabs:

Param Attributes Tab — For more information, see Param Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Toggle Choice Controls

Toggle choice controls enable the user to make a choice between two states. Choose between check boxes and toggle switches to customize how the user selects a state. The selected state data is stored in the associated parameter.

To create a toggle choice control:

1.On the Edit Mode toolbar, click the Insert a Toggle Choice (checkbox or single toggle button) backed by your data source button.

button_dataTogChce00029.png

 

Tip: If the button is not visible, click the Param button to reveal the buttons used for adding data-backed components.

2.Drag a box on the panel to define the area for the control.

The Insert into Component dialog box appears.

3.In the Insert Toggle area, select an existing parameter, or create a new one.

If you create a new parameter, you can change the values and names for the true and false values. The name can be displayed on the button or beside the check box.

4.In the Display Type area, select a display option.

5.Click OK.

The toggle choice control appears on the CustomPanel.

Editing Toggle Choice Controls

After you add a toggle choice control, you can customize it using the Edit Component window. To access the Edit Component window, select the component and double-click it. For toggle choice controls, the Edit Component window contains the following tabs:

Param Attributes Tab — For more information, see Param Attributes Tab.

Position/Stretch Attributes Tab — For more information, see Position/Stretch Attributes Tab.

Style Tab — For more information, see Style Tab.

Source Tab — For more information, see Source Tab.

For more information about using the Edit Component window, see Editing Components.

Creating a Row, Column, or Grid of Data-Backed Buttons

You can create a row, column, or grid of buttons based on a parameter. Users can click the buttons to change the parameter value.

(Figure 1.22) shows a row of buttons (top), a column of buttons (left), and a grid of buttons (right). In this example, the three button is selected. The Toggle On style for the parameter has been changed to make the button background red.

row_buttons.png 

Figure 1.22  - Tables of buttons, including a row (top), a column (left), and a grid (right)

To create a row, column, or grid of buttons based on a parameter:

1.Ensure the parameter you want to use has the following characteristics:

Parameter Type is set to Integer

Constraint is set to Choice Constraint

Constraint Value box lists the text strings you want to show on the buttons

Widget Hint is set to Toggle Buttons

The Initial Value is set

2.Create a table with one row and one column.

For more information, see Tables.

3.In the Edit Mode toolbar, click the Display or edit a parameter backed by your data source icon, and then click the table cell.

button_dataDsplyParam00031.png

 

Tip: If the button is not visible, click the Param button to reveal the buttons used for adding data-backed components.

The Insert into Component dialog appears.

4.Select the parameter, clear the check boxes at the bottom of the dialog, and then click Ok.

5.If you want to change the table to be a single column or a grid of buttons, edit the table, and on the Container Attributes tab, set the Max Elements Per Row to the number of columns you want.

6.If you want to set different styles for different button states, select the parameter in the Component List, and then edit the style settings on the Toggle On and Toggle Off tabs.

7.Resize and reposition the table as required.