Open UI for beginners: Style a field value using Open UI (Part 1)
Requirement is to style a field called “VIN Number” in form applet. This styling must apply for all records in the form applet. For example, style field value “MA2223AH” in red font in below sample screen shot.
Another way of looking at this requirement is to replace an existing browser script.
Above requirement can be implemented by either of two options.
Option 1 : Using custom style sheets.
Option 2 : Using Jquery CSS method.
Your preferred option depends on your business requirement i.e.
Go for Option 1 when this field styling on form applet applies to all views irrespective of visibility of form applet or its control across multiple views in open UI application.
Go for Option 2 when this field styling on form applet applies to a specific view only however this form applet is visible on multiple views in open UI application.
Let’s explore Option 1 which is purely a custom style sheet evaluation of your selector in DOM.
Below are the steps to complete this custom style sheet configuration.
Step 1: Go to VIN Number field value placeholder (or your preferred field) and click in its placeholder which contains its field value. Right click and do “Inspect Element”. This step points me to my element in DOM as shown below.
Step 2: Go to your Siebel folder in /files/custom/<yourthemefile>.css
Add below custom css styling in my GSINGHTheme.css in /files/custom/GSINGHTheme.css or in your custom styling.css in files/custom folder.
If label name is unique, use below custom css styling
If label name is not unique, use below custom css styling
Step 3: Save your changes to your .css file. Refresh your browser cache and restart your Siebel open UI application to view new styling to the field value.
Option 2 will be covered in next post.