How You Use Images for Selections

You can represent items with images in place of their names, in the run time UI, enabling the end user to make simpler and more intuitive selections.

Adding Images to Items

To enable selectable item images, you must first provide the images to the desired items. The images should reflect the possible selection states of the item: available for selection, selected, or excluded.

You can add selectable images to the following types of model nodes:

• Standard items of an item-based options class

• Options of a supplemental option feature

To add selectable images to an item:

1. In a workspace, open the model draft containing the item.

2. On the Structure tab of the Edit Configurator Model page, select the node to which you want to add selectable images.

3. Select the UI Presentation tab of the Details region

4. Under Item Selection Images, there are controls for adding the images for the Primary (available but unselected), Selected, and Excluded states of the node.

5. Click the icon in the Primary field to add an image.

   You can't add Selected or Excluded images without having a Primary image.

6. Use the Add Image dialog box to locate and add the Primary image file for the node.

7. Use the same procedure to add images for the Selected and Excluded images.

8. Repeat the addition process for the other nodes of the option class or option feature, where desired.

You can remove the Selected or Excluded images as desired. If you remove the Primary image, then the other images are automatically removed. You can change an image at any time.

Adding Selectable Images in UIs

To display selectable images to users at run time, you must add them to a user interface.

To add selectable images to a UI:

1. On the User Interfaces tab of the Edit Configurator Model page, create a new UI, or select the existing UI, on which you want to display selectable images.

2. In the WYSIWYG editor on the Design subtab, select the edit control bar for the page item representing the option class or option feature that you provided selectable images for.

3. Click the control for editing properties of the page item

4. Open the list in the Template field, and search for one of these templates:

   • Selectable Image Group

   • Selectable Image Group with Header

5. In the Edit Page Item dialog box for the template that you selected, set the values for desired properties in the Contents group.

   • Images Per Row is the number of images to display for an item or option on a single row at run time.

   • Inline Style is an optional CSS style expression applied at run time to the entire Selectable Image Group template.

   • Option Inline Style is an optional CSS style expression applied at run time to each selectable image.

6. Save your model changes and click Test Model.

7. In the test UI, the images displayed for the options of the option class or option feature depend on the selection state of the options:

   • The Primary image is displayed if the option is available, and not selected or excluded.

   • The Selected image is displayed if the option is selected by a rule or user selection.

   • The Excluded image is displayed if the option is excluded by a rule.

8. If any images are missing from the Item Selection Images of the Structure view, then the following substitutions are made at run time:

   • If the Primary image for an item is missing, then a graphic placeholder icon is displayed.

   • If the Selected image is missing, and the item is selected, then the Primary image is displayed, enclosed by a rectangle.

   • If the Excluded image is missing, and the item is excluded, then the Primary image is displayed, in dimmed shading.

9. If your UI uses the Selectable Image Group with Header template, then the Description of the option class or option feature and the Description of the selected option are displayed together as a header for the group of option images.