Visual Modeler UI ConceptsUI Properties
A property is an attribute of a model, option class, or option item. UI properties determine the look-and-feel of a product as it is configured.
You can use UI properties to do the following:
Control how option classes are displayedDisplay properties of option itemsGuide basic text and picturesThe Visual Modeler provides a set of built-in UI properties that the Sterling Configurator engine understands. They control the behavior of the engine and the presentation of the model to the customer.
Working with Display Properties
The Visual Modeler provides pre-defined display properties that define aspects of the model or its elements. These display properties enhance the customer experience by enabling you to provide values that define various aspects of the model or its elements. They can all be specified using the Display tab of a model, option class, or option item, or as UI properties in the Properties tab. For example, you can define a "Pre-Pick Guiding Text" for an option class either by defining it on the Display tab or by specifying the value of the UI: PRE-PICK GUIDING TEXT property on the Properties tab.
Display properties also allow you to create fields and options that end-users may use to enter their own values. Every property displayed on the Display tab corresponds to a UI property. This means that display properties can also be set using the Properties tab provided that you know which UI property matches the display property.
Sterling Multi-Channel Selling Solution UI Properties
Property Type Comments UI: ADDITIONAL DESCRIPTION string You can use this property to add additional descriptive text to an option class. Use this property in conjunction with the UI: DISPLAY RESULTS property. UI: ALIGNMENT string The "Horizontal" or "Vertical" options control layout of radio buttons and check box controls. UI: AUTOMATIC POST string Selecting "yes" or "true" turns on automatic posting for an option class.After a customer makes a pick of an option item, you want the server to re-display the page so that rules can be fired and any changes to the available option classes can be displayed. However, if you do not want picks in an option class to cause a re-display, then set this property to "no" or "false". This is equivalent to selecting On User Request from the Submit to Server Display property drop-down list.The option class is displayed with Update button; after making a pick in this option class, a user can click the Update button to request a re-display of the page from the server. UI: CLASS DISPLAY NAME string Use this property at the model level to determine what is displayed as the displayed name of option classes. By default, this property takes the value ${expand("_description")} which means that the value of the option class's Description field is displayed.For example, if you want to display option class names instead of descriptions, then set this property to ${expand("_name")}. You can overwrite this value at a single class by using the UI: DISPLAY NAME property. UI: COLUMN ALIGNMENT string Use this property in the tabular display control to specify the alignment of the values in the column. The tabular display control uses the ";" character to separate entries from each other.The format of this column is something like:
"left;left;center;right". UI: COLUMN HEADINGS string Use this property in the tabular display control to specify the titles of columns. Each title is separated from each other with the ";" character. For example: "Speed;Pins;Manufacturer". UI: COLUMN PROPERTIES string A semi-colon-separated list of property names used in the tabular display of properties. For example: "SPEED;NOPINS;SUPPLIER", where SPEED, NOPINS, and SUPPLIER are properties defined on option items in an option class. UI: COLUMN SPAN numeric This property controls how many columns an option class requires for its display in the customer-facing display of the model. This is the same as entering a number for the Number of Columns field on the Display tab. UI: CONFIG CELL HTML CLASS string This sets the CSS class attribute in the HTML. Use this property to control the look-and-feel of cells. The Visual Modeler uses the internal.css CSS file when you test models. UI: CONSTANT GUIDING TEXT string This property defines the guiding text that will always be shown for an option class. This is the same as entering text for the Constant Guiding Text field on the Display tab. UI: CONTROL string This is the name of the JSP fragment used to render an option class. Do not use UI: JSP FILENAME at the option class level. UI: DEFAULT SELECTION string Selecting "true" or "yes" on an item makes the item a default selection within its parent option class. UI: DISPLAY ADDITIONAL INFO string Use this property to provide a description specific to a particular instance of a sub-model. If you attach this property to the root node of a submodel and pass it as an output property to the parent model, the parent model displays the description next to the item in the parent model. This allows you to give feedback to the end-user about how the sub-model is configured. This is particularly useful for dynamic instantiation. In dynamic instantiation, there can be multiple instances of a sub-model. Each intance is configured differently, and you want to provide an appropriate description for each instance of the submodel. UI: DISPLAY NAME string Use this property to determine what is displayed as the displayed name of the option class. By default, this property takes the value ${expand("_description")} which means that the value of the option class's Description field is displayed. UI: DISPLAY RESULTS string This property is deprecated. A property that is displayed along with the description of items. This special property also allows the usage of text expansion macros. Currently we support:${expand(propname[,defaultValue[,pictureString]])}but the name of this "function", expand in this case, is accessed via the object manager.An example usage is to set a description string in the UI: ADDITIONAL DESCRIPTION property, and then set the value of this property to ${expand("UI: ADDITIONAL DESCRIPTION")}.To add additional macros, define a new class that implements the IExpansionHandler interface, and put a reference to it into the object manager. UI: HELP URL string This URL is used to turn an option class description into a hyperlink, typically used to provide additional information about what that option class is for. It could also be a datasheet or any other hyperlink. Clicking on the hyperlink will bring up the page in a new window. This is the same as entering text for the Help URL field on the Display tab. UI: ICON GRAPHIC string Use this property with an option class to display a picture along with the description of the option class. This is the same as entering text for the Image field on the Display tab. UI: IGNORE IN QUOTE string When set to "yes" or "true", the item to which this property is attached to is filtered out of the summary page. It is also flagged as not visible in the BOM transfer to the shopping cart.This is the same as checking Ignore in Quote on the Display tab.This field is used to ensure that only selected option items are displayed in shopping carts. It suppresses option classes in the list of items in a shopping cart. UI: JSP FILENAME string The name of the JSP page that will render the model: Configurator_Tabbed.jsp or configurator.jsp. This property is added to support easier customization and eventually to allow different presentations per model. Using the built-in customization elements of Sterling Configurator, it is possible to dynamically change pages as well. UI: LEAD TIME numeric This property is attached to items in the model. It is used to build a maximum lead time for the entire model by finding the largest lead time of all items currently selected. UI: NUMBER OF COLUMNS numeric This property shows the number of columns to divide the end-user configurator presentation. It is defined at the model level to manage how many columns are used to display the option classes for a model.This property in conjunction with UI: COLUMN SPAN, UI: ROW SPAN, and UI: SKIP COLUMNS controls how option classes are arranged on the page. This property is the same as setting the Number of Columns property in the Display tab. UI: OPTION CLASS REQUIRED string Setting this property to "yes" or "true" causes Sterling Configurator to require that a selection be made for an option class. For radio buttons this causes the None selection to be removed. UI: OPTION CLASS SELECT string This property is used to specify what UI control should be used when no specific UI: CONTROL value is specified. It is used to support importing models from external configuration systems or from earlier releases of the application.It takes "single" or "multiple" as values. It is only used in the absence of a UI: CONTROL property to determine if a radio button or checkbox control should be shown for an option class. UI: OPTION CLASS TYPE string Obsolete: do not use. UI: OPTION CLASS VIEW string This controls the display behavior of an option class.POPUP: Show a standard option class.POPUP-QTY: Show a quantity box for each selected item within that control.INVISIBLE: Prevent the display of the control. Use INVISIBLE to hide option classes until other picks made by the customer requires the class to be displayed. UI: POPUP-QTY ALLOWED VALUES string This controls what values are available for a selection in a popup drop-down list. Use this at the option class level, in conjunction with setting UI: OPTION CLASS VIEW to POPUP-QTY.A "," separated list of allowed values. Ranges can be specified with "-", so 1-4,7-9 is the same as 1,2,3,4,7,8,9. If you leave this field blank, then a text field is displayed with the current value; otherwise a drop-down list with the allowed values is displayed. UI: POST PICK GUIDING TEXT string A guiding text message displayed with an option class description if the user has made at least one pick from within the option class. This is the same as entering text for the Pre-Pick Guiding Text field on the Display tab.This property is not displayed until a customer makes a pick. UI: PRE PICK GUIDING TEXT string A guiding text message displayed with an option class description if the user has not made a pick from within the option class. This is the same as entering text for the Post-Pick Guiding Text field on the Display tab.Once a pick has been made, then this property is no longer displayed. UI: PREVENT SELECTION string Selecting "yes" or "true" causes the Sterling Configurator to prevent the user from selecting items that would violate a constraint table rule. If the Constraint Selections display property is set to "Hide constrained items", then this property is set to "yes". UI: PRICE numeric The price for an item that will be used if STATIC_PRICING or OVERRIDE_PRICING is set in the business rules. In the case of OVERRIDE_PRICING, this value will be used if a price cannot be found for the item in the price list. UI: PRICING SKU string The SKU to use when looking up the item in the price list. Note that if you set a product ID value for this property, then it overrides the value of the Assigned Product ID in determining prices. UI: PRICING STYLE string This property is used at the option class level. It controls how prices of option items are displayed to the end user as follows:NONE: Do not display prices as user configures product.ABSOLUTE: Display prices next to option items as absolute prices.DELTA: Display prices next to option items as their effect on the price of the whole configured product.This property is the same as setting Pricing Style in the Display tab. UI: PRODUCT ID string If you associate a product with the node of a model, this property can be used to retrieve the product ID of the associated product.The value of this property is resolved at compile time. If the product ID is changed, you must re-compile the model for the change to take effect. UI: PRODUCT NAME string If you associate a product with the node of a model, this property can be used to retrieve the product name of the associated product.The value of this property is resolved at compile time. If the product name is changed, you must re-compile the model for the change to take effect. UI: PRODUCT DESCRIPTION string If you associate a product with the node of a model, this property can be used to retrieve the description of the associated product.The value of this property is resolved at compile time. If the product description is changed, you must re-compile the model for the change to take effect. UI: QUANTITY AVAILABLE numeric Do not use in this release.Used in the quantity matrix, this can optionally be attached to the items for the matrix. If so it will set the quantity available of each item. If the control is set to show quantity available, this property value will be displayed in a secondary row for each item. UI: REQUIRED string Obsolete: do not use. UI: ROW SPAN numeric This property controls how many rows an option class requires for its display in the end-user presentation of the page. In conjunction with UI: NUMBER OF COLUMNS and UI: COLUMN SPAN, this property controls the layout of the page viewed by end-users. This is the same as entering a number for the Number of Rows field on the Display tab. UI: SHOW ITEM IMAGES string Selecting "yes" or "true" controls whether item images are shown. UI: SKIP COLUMNS numeric This shows the number of columns to skip after this class. It is used to add to the count variable that is tracking how many cells are being used to lay out the option classes. This is the same as entering a number for the Number of Columns to Skip field on the Display tab.If you have used the UI: COLUMN SPAN property or UI: ROW SPAN for another option class, then use this property to account for table cells in the layout that the multiple span class uses. UI: SUPPRESS NAME DISPLAY string Selecting "yes" or "true" causes Sterling Configurator to not display the names of option classes. UI: SUPPRESS NONE SELECTION string Selecting "yes" or "true" suppresses the NONE selection value for radio buttons. UI: SUPPRESS UEV NONE VALUE string Selecting "yes" or "true" suppresses the NONE selection for UEV combo boxes. Use this in conjunction with UI: UEV ALLOWED VALUES property.For example, you have specified that a user-entered value field can only take the values Red, Green and Blue. If the value of this property is set to "yes", then None will not appear in the drop-down list of selectable values. If you set the value of this property to "no", or do not attach this property, then None will be a selectable value. UI: UEV ALLOWED VALUES string Comma-separated list of values for a combobox UEV control.Suppose that you want to allow customers to enter only one color from a small list of colors. Enter the list as follows:Black,Blue,Green,Red,WhiteWhen this property is set, the user-entered value option item is displayed as a drop-down list of these values. None is also displayed as a selectable option, unless you set the UI: SUPPRESS UEV NONE VALUE property to "yes".This property is the same as setting values in the Allowed Values display property. UI: UEV ASSIGNMENT PROPERTY string The name of a property where a UEV will store its value. This property should be of the correct type to contain the UEV.Numeric properties can be used to hold INTEGER UEVs as well as NUMERIC UEVs.If the value of this property is just a property name, then the property will be set on the current item.If the value contains a path to a property as well as the property name, then the property will be set on the item referenced by the path if it exists.Once a user makes their pick in the user-entered value field, then the assigned property can be used by rules or in the display of the model, just like any other property.This property is the same as setting a value in the Assign Value to Property display property. UI: UEV INTEGER VALUE integer The engine fills in this value when an integer UEV has a value in it. This provides you with a way to reference the value of the field without assigning it to another property. UI: UEV LIST VALUE list The engine fills in this value when a list UEV has a value in it (not currently used). This provides you with a way to reference the value of the field without assigning it to another property. UI: UEV NUMERIC VALUE numeric The engine fills in this value when a numeric UEV has a value in it. This provides you with a way to reference the value of the field without assigning it to another property. UI: UEV POSTFIX string A string of text displayed after the UEV entry field.This property is the same as setting a value in the Text After Entry Field display property. UI: UEV PREFIX string A string of text displayed before a UEV entry field.This property is the same as setting a value in the Text Before Entry Field display property. UI: UEV SELECTION varies Obsolete: do not use. UI: UEV SPECIAL string Used by the user entered value control to enable a file list or notes control. This will be phased out and replaced by a new file attachment control and notes control in future releases: do not use. UI: UEV STRING VALUE string Filled in by the engine when a string UEV has a value in it. This provides you with a way to reference the value of the field without assigning it to another property. See UI: UEV ASSIGNMENT PROPERTY to use another property. UI: UEV TYPE string These are the options for the types of UEV control; "string", "integer", or "numeric".Display Properties
To Define Display Property Values
Display properties control the model elements on the HTML page that the Configurator Engine displays to the customer.
This displays the display properties appropriate to the level.
- Edit the desired fields.
- Click Save All Changes.
Tabular Display of Properties
To help users choose between two or more option items in an option class, it is often helpful to display one or more properties for each option item in the form of a table.
You cannot use the tabular display for pickable option items. Use tabular displays with another option class that allows users to make a selection.
To Display Properties in a Tabular Form
Click the Display tab.Select Tabular Display from the Control drop-down list.Click Save All Changes.Or:Click the Properties tab.Select UI: CONTROL from the Unattached Properties drop-down list and enter "controls/displayProps.jsp" as its value.Click Attach.For example, "Size;Weight;Color".For example, "Monitor Size;Monitor Weight;Monitor Color".To Display Properties in a Tabular Form
Click the Display tab.Select Tabular Display from the Control drop-down list.Click Save All Changes.Or:Click the Properties tab.Select UI: CONTROL from the Unattached Properties drop-down list and enter "controls/displayProps.jsp" as its value.Click Attach.For example, "Size;Weight;Color".For example, "Monitor Size;Monitor Weight;Monitor Color".The number of columns in the table is inferred from the number of properties you define in the UI: COLUMN PROPERTIES property.Image Properties
You can associate images with models, option classes, and option items as described in this section.
Models and Option Classes
Use the Icon Graphic field on the Display tab for models and option classes. This corresponds to the UI: ICON GRAPHIC property.
Option Items
You can attach images to option items and display them to end-users using the UI: ITEM IMAGE NAME property to specify an image for each option item. You must set the UI: SHOW ITEM IMAGES property to be "true" at the option class level.
The value of the UI: ITEM IMAGE NAME can be interpreted as a relative URL or as an absolute URL:
If you enter "2of4stars.gif" or "../images/2of4stars.gif", then the image will be displayed by resolving the image location to:
You can use absolute URLs to point to different locations anywhere on the Web. This is particularly useful if you use a different Web server to serve up static content for your Web site. For example:
User-Entered Values
You can allow your customers to type in values for a configurable product's options. For example, you can allow customers to enter a color that is not one of the pre-defined colors in a model, or you can let them enter a product ID for a product that is not in your product catalog, but which you can fulfil by special order.
The User Entered Value properties, described in the UI properties table, enable customers to type in values. For example, suppose that you have a configurable product and you want to let the user specify their own choice of color:
In the Name field, enter "Custom Color Class".In the Description field, enter "Enter your preferred color".Click Save.In the Name field, enter "Custom Color Item".In the Description field, enter "We will provide a color match before shipping.".You can use user-entered values in rules by referring to the appropriate UEV property: UEV: NUMERIC VALUE (for Integer or Numeric values) or UEV: STRING VALUE (for String values).
UI Control Reset Behavior
Some UI controls allow the user to reset (clear) a selection and start over. A Clear button displays in the configuration UI by default to enable this reset behavior. The following table summarizes the default behavior of the Clear button in UI controls.
© 2011 IBM Corporation. All Rights Reserved |