How You Modify User Interfaces

After you create a user interface for a model, you can modify it to better suit the needs of your application.

On the Overview tab you can see which template map it uses, and set its applicability parameters. On the Design tab, a WYSIWYG editor enables you to view and manipulate the elements in a user interface.

To modify a user interface, you can:

Change the location of generated user interface items
Add model nodes to the user interface
Add basic elements that enhance the appearance of the user interface
Control the visibility of user interface elements

Using the WYSIWYG Editor

The Design tab provides the Pages pane for controlling the pages in the user interface, the Resource pane for adding model Structure nodes or basic user interface 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 user interface item has a hidden edit control bar, indicated by a chevron icon. Click the chevron to select a user interface 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 user interface page.
Click the arrow icons to move the item up or down on the page.

The properties of user interface 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 user interface 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 user interface 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 user interface item.

Changing The Location Of Generated User Interface Items

The default location of page items in a user interface is determined by the user interface template map you selected when you created the user interface. 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 user interface, 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 user interface pages, select the page in the Pages pane, then click the arrow icons on the toolbar.
To delete user interface 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 user interface, though you can add them back elsewhere later.
To change the generated title for a user interface 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 User Interface

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

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

User interface 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 user interface, but you can place them on other pages instead.
User interface page items are generated for each item-based standard item or supplemental-structure feature.
User interface control templates provide controls in the user interface 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 user interface 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 user interface 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 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 user interface when the required value is missing. This indicator appears in any user interface, and isn't modifiable as part of a user interface, since it's part of the structure and rules of the model, rather than its user interface.

Adding Basic Elements

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

To add a page element for a model node:

Select the location to add the new element. The element will be added below the currently selected page element.
From the list in the Elements tab in the Resources pane, select the element that you want to add to the page.
From the context menu, or the 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 user interface 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 element by clicking the Search and Select control on the Associated Model Node field, and selecting a node that's accessible relative to the user interface page. Changing the associated model node enables you to affect basic user interface 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 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 User Interfaces

There are limitations to how you can modify a user interface.

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