Example of Modifying the Display Name of Items

You have a customizable product that includes a relationship called Hard Drives. This relationship contains several disk drives. Along with the name of each drive, you want to display a picture of the drive. You want to assign radio buttons as the UI control for selecting the drives.

To prepare for defining the UI Property

1. Use the User Interface view to create the selection pages for configuring the customizable product.

2. Validate the customizable product, and verify that the pages display correctly.

3. Create a .gif or .jpg for each hard drive.

4. Test each file by displaying it in a browser. Use the HTML <img> tag to set the exact size of each image. The <img> tag will be the value you assign to the UI Property variable.

To create a new UI control template and assign it to the Hard Drives relationship

1. Navigate to the Administration - Product screen, then the Product Definitions view.

2. In the Products list, select and lock the desired product.

3. In the Structure menu, select User Interface.

4. In the User Interface view, select the group containing the Hard Drives relationship.

5. In Group Item List, select the Hard Drives relationship.

6. Open the Pick User Interface Style dialog box and make a note of the radio button template assigned to the relationship.

   This is required in Step 8.

7. In Oracle Web Tools, create a new workspace.

8. Open the Web Templates view, and query for the radio template name from Step 5.

9. Copy this template, and rename it to eCfgModifiedRadioButton.

10. From the Type menu, assign the required template type to your Web template.

11. Open the new template and do the following:

    • Locate the od-type="control" element containing the CfgFieldName= "CxGroupName" attribute.

    • Replace "CxGroupName" with CfgFieldName= ".NewName"

    • The variable name must begin with a period (.). For example: ".NewName". Verify that the variable name is enclosed in quotes.

12. Save the file.

13. Deliver the workspace.

14. Click the magnifying icon.

    This opens the Pick User Interface Style window.

15. Click the plus icon (+).

16. In the Template field, click the magnifying icon.

17. In the Query field, enter an asterisk (*) to list all UI Control templates.

18. Select the template you just created.

19. In the Pick User Interface Style window, enter the following information:

    • Name. Enter a descriptive name. For example: Modified Radio Button.

    • Template. Enter the filename of the template you created.

    • Description (Optional). Enter a brief description of the template.

20. Click Save and OK.

21. In the User Interface view Group Item List, select the relationship containing the hard drives.

22. Open the Pick UI Style dialog box and click Add to add the new template.

23. Select the new template as the control template for the Hard Drives relationship.

24. Click OK and Save.

To define a UI property for each of the Hard Drives

1. Navigate to the Properties view and select the first drive in the Hard Drives relationship.

2. Define a UI property for it as follows:

   • Name. NewName. Do not put a period before the name. This is the variable name you inserted in the template file.

   • Value. Enter the HTML syntax for displaying the drive name and retrieving the image.

3. Repeat these steps to define a UI property for each hard drive in the relationship.

4. Open the Item Display Properties menu and click Validate.

   This starts a configuration session. Verify that the item names display correctly.