1. Modeling Configurations for SCM
  2. How You Modify UI Elements

How You Modify UI Elements

After you generate a UI for a model, you can modify individual UI elements in it, to better suit the needs of your application.

Controlling the Visibility of UI Elements

There are several ways to control which elements of a UI appear, and under which conditions.

The most flexible way to control the visibility of UI elements is by using display conditions, which apply to all elements in a UI except pages.

To set a display condition:

  1. Select an element of the UI, and click its edit control to open its properties dialog box.

  2. Under Run Time Conditions, change the value of the Displayed control from Always to Conditionally.

  3. Now the Condition group of options is provided. You define the display condition for the element by selecting options which specify that some attribute of some object in the model has a specified value. When the specified attribute has that value, then the UI element you're defining is displayed at run time, or when you test the model.

  4. Select the Object whose value will trigger the display condition. The default object is the associated model node for the UI element itself. If you select Other model node, then a search control is provided for selecting that node. If you select Configuration session, then the Attribute option lists attributes of the configuration session as a whole at run time, rather than attributes of a model node.

  5. Select the Attribute whose value will determine whether the display condition is triggered.

  6. Select whether the run time Value for the selected attribute Equals or Does not equal the value that you select in the last option of the display condition.

As an example, assume that you want the UI to display the message You picked red. when the end user selects the option Red for an option feature named Color. You would:

  1. Add a Text element to the UI, positioned near the Color feature.

  2. Edit the properties of the Text element and enter You picked red. in the Text field.

  3. Select Conditionally for Displayed.

  4. Select the object Other model node, then search for and select the supplemental node Red under the option feature Color.

  5. Select the attribute SelectionState.

  6. Select the operator Equals and the attribute value Selected.

  7. Click Test Model. Navigate to the option feature Color, and select Red. The message You picked red. appears. The same message would appear to the end user at run time.

There are also other ways of preventing model nodes from appearing in a UI:

  • You can suppress a particular structure node for a model from appearing in any new UIs by deselecting the Display in user interface check box on the UI Presentation tab of the structure details pane for that node. This won't affect UIs that you have generated before you change this setting, but will affect all UIs that you generate after changing it.

  • You can minimize the number of choices presented to the end user in a UI at run time by selecting the Hide excluded items in run time Configurator check box on the details overview section of the User Interfaces tab when editing the model. This setting is independent of model structure, and only affects the particular UI in which you set it. At run time, if options or items are excluded from selection by configurator rules, then they're not displayed in the UI.

Modifying UI Element Captions

You can use the UI expression language to override the default item display name of a given UI item, replacing it with a combination of static text and all associated model node attributes, with the exception of DisplayName.

The following table provides an example of the effect of using the UI expression language.

Element of UI caption

Example

Associated model node in model structure

Name: CARWHEELS

Description: Wheels

Default display name in UI

Wheels

UI expression

 
Item Name: #{amn.name} - Item Description: #{amn.description}

Modified display name at run time

Item Name: CARWHEELS Item Description: Wheels

To override the default display name of a UI element:

  1. Select the UI element.

    You can modify the following UI elements:

    • Page Caption of a Page element

    • Header Region Caption of a Header Region element

    • Page Item Caption of a Page Item element

    • List Item Caption of a List Item element, which can be part of a Page Item

    Note: When you override the default display name of UI caption elements, then the node property DisplayName isn't available for the associated model node.

  2. Click the Edit control for UI element.

  3. In the Edit dialog box, enter a UI expression for the caption of the UI element.

  4. Click OK in the Edit dialog, save the UI, and click Test Model.

  5. In the test UI, the caption appears with the overriding expression text.

Using UI Facets

You can add basic UI text elements in the UI facets of the header of certain UI page items, to augment the information presented to the end user at run time.

A UI facet is an area in the UI item into which you can place additional UI items related to the associated model node for the UI item, or reachable from the associated model node. The following configurator model node types have UI templates that include UI facets:

  • Option classes

  • Option features

  • Boolean features

Templates with facets are available for the following UI page items:

  • Boolean Feature with Facets

  • Check Box group with Facets

  • Check Box group with Quantity and Facets

  • Choice List with Facets

  • Item Instance Management Table with Facets

  • Radio Button Group with Facets

  • Radio Button Group with Quantity and Facets

A template with facets contains layout regions arranged in the following default relationship:

Header: template with facets
Messages facet:  Compact Stack Layout template containing:
    Basic UI text elements (in vertical sequence)
Information facet: Flow Layout template containing:
    Basic UI text elements (in horizontal sequence)
Items or options of the associated model node

The layout regions can be changed if they're not suited for the desired behavior.

Example showing two text elements stacked in the messages facet and four text elements in a flow in the information facet:

System Memory
    Memory mixing requires firmware version: XXYY123
    Your selection of DIMMs exceeds the maximum of: 64
  Memory (GB) Included: 0 | Minimum Required: 64 | Maximum Allowed: 2048 | Total Configured: 2608 
    [0] A8V234 Four 8 GB DIMM
    [0] A8V567 Four 16 GB DIMM
    [0] A8V890 Four 32 GB DIMM
    [18] A8V999 Four 64 GB DIMM

To use UI facets for a page item:

  1. Select and edit a page item for an associated model node that can use facets.

  2. Apply one of the templates that includes facets. After you click OK, the facets are added to the page item.

  3. Select the first layout region under the header, which is the messages facet. This region's template is Compact Stack Layout. Don't change the template.

  4. From the list in the UI Elements tab in the Resources pane, select the Text element, then, from the context menu or the UI Elements toolbar, click Add to Page.

  5. Edit the basic Text element that you inserted into the facet. Add static text in the Text field to provide messages about configuring the associated model node to the end user.

  6. You can use the UI expression language to dynamically display information about the associated model node, or nodes reachable from the associated model node. You must use expression language attributes that correspond to the node types for which you can use UI templates with facets.

    For example, assume that the associated model node is an option feature with Minimum Selections of 2 and Maximum Selections of 5, and you enter the following three expressions in Text field of three basic text elements in the messages facet:

    Number of options you selected: #{amn.selectedCount}
Maximum number of selections allowed: #{amn.maxSelected}
Minimum number of options selected?: #{ amn.minSelectionSatisfied}

    When you test the model and select one option, the following text is displayed in the facets:

    Number of options you selected: 1
Maximum number of selections allowed: 5
Minimum number of options selected?: false

  7. Select the second layout region under the header, which is the information facet. This region's template is Flow Layout. Don't change the template.

  8. Repeat the steps described for the messages facet, to add static or dynamic text in basic Text elements in the information facet.

  9. Save your changes to the UI, and click Test Model.

Caution: If you add UI items to facets, then later change the page item's template to a template without facets, then the facets will be removed, and all the UI items that you added to the facets will be lost.

Related Topics