How You Modify User Interfaces

Using the WYSIWYG Editor

The Design tab provides the Pages pane for controlling the pages in the UI, the Resource pane for adding model Structure nodes or basic UI elements, and the WYSIWYG editor region where you can interactively see the results of your modifications for the page selected in the Pages pane. The labels of the model-related items in the WYSIWYG region reflect the Description values for the nodes in the model itself.

Each UI item has a hidden edit control bar, indicated by a chevron icon. Click the chevron to select a UI item for editing and open the edit control bar.

Click the pencil icon to edit the properties of the page item.
Click the X icon to delete the page item from the UI page.
Click the arrow icons to move the item up or down on the page.

The properties of UI items vary, depending on the type of the item. Commonly-used properties include:

The internal Name of the item, which isn't displayed at run time.
The Associated Model Node that the UI item represents. The name is read-only. Click the information icon for details about the node.
The Template option for selecting a control template for the UI item.
The Page Caption that's displayed for the item at run time.
The Run Time Conditions option for defining a display condition on the UI item.

Changing The Location Of Generated UI Items

The default location of page items in a UI is determined by the UI template map you selected when you created the UI. You can change the default location.

You can make the following changes in the location of page items:

Move the items up or down on the page by clicking the arrow icons on the edit control bar.
You can't cut and paste page items to move them. Instead, delete the item from its original page and add it to a different page.
In a Step By Step or Dynamic Tree UI, you can add new pages from the Pages pane, then add new nodes to the page from the Structure pane. When you select the node and click the Add as Page Item action, the new page item is added just below the item that's currently selected in the WYSIWYG pane.
To change the order of UI pages, select the page in the Pages pane, then click the arrow icons on the toolbar.
To delete UI pages, select the page in the Pages pane, then click the X icon on the toolbar. First be sure that the page doesn't contain any page items that you want to retain in your UI, though you can add them back elsewhere later.
To change the generated title for a UI page, select the page with its edit control, or in the Pages pane, and change the Page Caption in the Edit Page dialog box.

Adding Model Nodes to the UI

You can modify the set of UI pages and UI page items that represent your configurator model, which are created when you create a generated UI.

In a generated UI, UI items reflect item-based model structure:

UI pages are generated for each item-based option class that's an immediate child of the model root. Since supplemental-structure features must be created on the root node of model structure, those features are generated on the root page of the UI, but you can place them on other pages instead.
UI page items are generated for each item-based standard item or supplemental-structure feature.
UI control templates provide controls in the UI for end-user interaction with model nodes.

You can't move a page item from one page to another in a single operation. Instead, you delete it from its original page and add it to the other page. In the case of page items that are model nodes, you must add them from the Structure tab in the Resources pane. To add a page element for a model node:

Select the location to add the new page item. The page item will be added below the currently selected page element.(If the currently selected UI element is a layout region, then the new page item is added as the last item in the layout region.) Consider the size and location of the page element when selecting it, and the effect on the placement of the added page item.

You select a page element by clicking the chevron icon for its edit control. A contextual label tells you what kind of page element is associated with the edit control.
In the model structure tree in the Structure tab in the Resources pane, select the node that you want to add to the page. You may want to view the tree by Description, to ease locating the desired model node.
From the context menu, or the Add to Page menu, select an available action to add the node to the page.
- Add as Page Item adds the node as an page item, which enables you to select a different control template and display condition.
- Add as Header Region adds the node as a header region, which displays the node name as a section header, and enables you to set the control template and display condition for the region. You may want to add the node as a page item under the section header, or add other nodes or UI elements.
- Add as Layout Region adds the node as a layout region, which enables you to set the control template and display condition for the region. You may want to select a form or stack layout for the region.
You can't change the display name of the node, or its children, because those names reflect the Description text of the nodes in the model itself.

Note: You can designate those nodes in your model that must have a value or selection before the autocomplete process can run (which is triggered by clicking Finish or Finish and Review at run time). If you select the Prerequisite for autocomplete check box on the UI Presentation tab of the node details, in the Structure view of the Edit Configurator Model page, then an asterisk appears next to the node in the UI when the required value is missing. This indicator appears in any UI, and isn't modifiable as part of a UI, since it's part of the structure and rules of the model, rather than its UI.

Adding Basic UI Elements

In addition to model-dependent elements that are automatically inserted into a generated UI, you can add basic UI elements that are independent of model structure to enhance the appearance or usability of the UI for end users.

To add a page element for a model node:

Select the location to add the new UI element. The element will be added below the currently selected page element.
From the list in the UI Elements tab in the Resources pane, select the UI element that you want to add to the page.
From the context menu, or the UI Elements toolbar, click Add to Page.
In the Add dialog for the added element, enter the desired properties in the Contents group.
- For a Text element, enter:
  - Text: Text to be displayed.
  - Inline Style: CSS expression. Example:
```
font-family:Arial,sans-serif;font-weight:bold;font-style:italic;color:#cc33cc;font-size:24pt
```
  - Style Class CSS class selector. The style sheet must be accessible to the UI at run time. Example:
```
background-yellow
```
- For an Image element, enter:
  - Image: Image file, to be uploaded to Configurator environment.
  - Alt Text: Provides accessibility text for images.
  - Inline Style: CSS expression. Example:
```
position:relative;top:10px;left:-200px
```
- For a Spacer element, enter:
  - Width: Width of the spacer, in pixels. Do not add px to the number.
  - Height: Height of the spacer, in pixels. Do not add px to the number.
  - Inline Style: CSS expression. Example:
```
position:relative;left:-150px;background-color:gray
```
- For an IFrame element, enter:
  - URL: URL of an accessible internal or external web site, with optional URL parameters that generate output displayed inside the frame. Example:
```
https://www.mysite.com:1000/perform?taskID=12345678
```
    An IFrame element must be placed in its own layout region in the user interface.
    
    If the URL is outside the current domain, then you must use Cross-Origin Resource Sharing (CORS) to enable a client application running in one domain to retrieve resources from another domain, using HTTP requests. See the related topic about CORS for details.
  - Width: Width of the IFrame, in pixels. Do not add px to the number.
  - Height: Height of the IFrame, in pixels. Do not add px to the number.
  - Inline Style: CSS expression.
You can change the default associated model node for a basic UI element by clicking the Search and Select control on the Associated Model Node field, and selecting a node that's accessible relative to the UI page. Changing the associated model node enables you to affect basic UI elements based on values or events in other parts of the model. Examples include:
- You can use the value entered for a text feature during a configuration session as part of the value for the URL parameter of an IFrame basic element. Set the text feature as the associated model node of the IFrame, then use the UI expression #{amn.value} to access the value of that node. Example:
```
https://www.mysite.com:1000/perform?taskID=#{amn.value}
```
- You can use selection of a value for an option class or option feature during a configuration session to conditionally control the whether an Image basic element appears or not. Set the option feature as the associated model node of the Image, then set the display condition for the Image to be TRUE when the option feature is bound to a value by the occurrence of a selection. Example:
  - Object: Associated model node
  - Attribute: IsBound
  - Value: Equals TRUE

Limitations on Modifying UIs

There are limitations to how you can modify a UI.

You can't change the UI template map that you selected when creating the UI. Therefore you can't change the navigation style for the UI.
You can't change the Associated Model Node for a UI item that directly represents a model node. Therefore you can't change the node represented by a particular UI item. But you can change the UI control template selected for the UI item, thus changing its appearance.
If the model has child referenced models, you can't explicitly specify which of child model's UIs will be used at run time. The child model's UI will be selected based on its applicability parameters.
You can't modify the configuration summary page.