Tuesday, Jun. 27, 2017

Open UI for beginners: Style a field value using Open UI (Part 1)

Written By:

|

April 23, 2016

|

Posted In:

Requirement

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.

VIN_Display

Another way of looking at this requirement is to replace an existing browser script.

 

Solution

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.

VIN_Placeholder

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

VIN_Unique

If label name is not unique, use below custom css styling

VIN_Not_Unique

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.

VIN_Styling

 

Option 2 will be covered in next post.

Cheers.



Share This Article

About Author

Gurdeep

Hi, I am sharing my experience to alleviate beginners with open UI and HI version of Siebel CRM. I work in Sun Life Financials and can be reached via IT Tool box as well. Thanks.

Comments are closed.

Leave A Reply