Highlight required fields in Siebel Open UI – sounds interesting?
Let us discuss in details.
We all know about required fields in Siebel, right?
It means, users can not save the record keeping such fields blank.
Also, we know that in Siebel, every required field on form applet comes with a red asterisk on right hand side.
But,
What if we highlight all required fields beside red asterisk?
Does it look good?
Let’s take a look…
In this article, we will discuss how to highlight required fields in Siebel Open UI.
Wait a minute,
Let us tell you few more real time scenarios as well except this one.
– Highlight all required fields if users do not enter any value and try to save the record. But when the application loads, required fields come with a red asterisk only.
– If users enter wrong value in a field, highlight that field with error message.
For example, if users enter numeric value in ‘Name’ field, highlight the name field.
There are n number of business requirements related to highlighted fields in Siebel.
Now,
Back to our topic…
Steps to highlight required fields in Siebel Open UI:
Step 1: Determine CSS tag (Optional step)
You know,
For any kind of visual requirements in Siebel Open UI, very first step is to find out the corresponding CSS tag for that particular element.
But why this step is optional for this requirement?
It is optional because we are not configuring our application for a particular field. We are going to highlight all required fields throughout application.
However, it is better to know the CSS tags behind required fields.
So, right click on the field and click on ‘Inspect element‘ to launch browser developer tool.
Browser developer tool is nothing but a vanilla tool provided by almost all modern browsers like Google Chrome, Mozilla Firefox, IE 8+.
To know more about browser developer tool, read our article on ‘Debugging in Siebel Open UI‘.
Step 2: Build the new CSS file
You know about Cascading Style Sheet (CSS), right?
If not, try to get a basic idea about CSS. It is very much required to be Siebel Open UI developer.
To learn CSS, we would suggest you to go through w3schools – CSS tutorial.
Here,
We are going to use a simple notepad to write CSS rules. You could use any tool as per your choice.
CSS rules are –
input[aria-required=”true”], div.mceGridField input.siebui-ctrl-mvg[aria-required=”true”], input[aria-required=”true”] [readonly=”readonly”]
{
border-color: #CC0000 !important;
background: #FFCCCC !important;
color: red !important;
font-weight: bold !important;;
}
All CSS rules are self-explanatory except ‘!Important‘, isn’t it?
Purpose of using this CSS property is to override the default CSS priority rule. Any CSS property with ‘!Important’ will always be applied on the selector, no matter what all other rules appear in the CSS file.
Now save the file with .css extension. We have named our file – highlight_required_fields.css.
Remember, you must save the file with .css extension.
Step 3: Copy the CSS file
Did you go through our Siebel Open UI configuration best practices tutorial?
Yes! then you know,
According to Open UI configuration best practices, you should keep all custom CSS and JS files under custom folder/s.
But,
Do you know why Oracle suggests to keep all custom CSS and JS files under custom folder/s?
This is to avoid any unnecessary conflicts during application upgrade.
If you follow this practice, all vanilla files will be migrated to upper version without affecting any custom file.
So,
If you don’t have a custom folder already, create one and keep all custom CSS and JS files under that folder only.
Now, copy the .css file under ‘custom‘ folder and register it in theme.js file.
For dedicated client, copy the custom CSS file under ..Client/PUBLIC/<lang>/files/custom.
For Webclient, copy the file under ..webserver/PUBLIC/<lang>/files/custom.
Well,
Do you know how to register .css file in theme.js file?
Read the next step…
Step 4: Register the file in Theme.JS file
Once your .css file is ready, next step is to register the file in theme.js file.
You’re probably wondering…
Why theme.js file?
It is because we are doing this customization for ‘GRAY_TAB‘ theme only. This ‘GRAY_TAB’ theme is based on theme.js file.
And
Where do you find theme.js file in Siebel Open UI?
For dedicated client, navigate to ..Client/PUBLIC/<lang>/<ver no>/SCRIPTS/siebel
For Webclient, navigate to ..webserver/PUBLIC/<lang>/<build>/SCRIPTS/siebel
Now open the theme.JS file in any text editor, register the CSS file and save it.
Script to register –
var ua=navigator.userAgent;
var re=new RegExp(“MSIE ([0-9]{1,}[.0-9]{0,})”);
if(re.exec(ua)!=null&&parseFloat(RegExp.$1)<=8)
{
var IE8inc=”files/ie8-compat.css”;
var IE8incTangerine=”files/ie8-compat-tangerine.css”
}
else
{
var IE8inc=””;var IE8incTangerine=””
}
SiebelApp.ThemeManager.addTheme(“GRAY_TAB”,{css:{sb_theme:”files/theme-base.css”,sc_theme:”files/theme-gray.css”,
sn_theme:”files/theme-nav-tab.css”,
sca_them:”files/theme-calendar.css”,
highlightreqfld:”files/custom/highlight_required_fields.css”,
sd_theme:IE8inc}
,objList:[]
});
Step 5: Register theme.js file (Optional step)
Another optional step to highlight required fields in Siebel Open UI application…
You may have theme.js registered already but it is better to verify!
To do so, login into application and navigate to Sitemap > Administration-Application > Manifest Files.
Here, query for theme.js file.
If the file is already there, no need to do anything.
But if not, create a new record to register theme.js file like below screenshot..
Now navigate to Administration-Application > Manifest Administration and create new UI objects, Object expression and add the file.
Step 6: Verify changes
Finally,
Clear browser cache and reload the application…
You should see all required fields highlighted on Form applet.
Simple!
If you have any question, please let us know.
Also if you want us to discuss any business scenario in this ‘Configuring Siebel Open UI‘ series, please leave your comment below.
Don’t forget to leave your feedback in the comment section!
Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Google+.
<< Change screen tabs icons Customize the Server Busy error in Siebel >>
Is it applicable for all required field in application? Required can be done from script ,table and BC level.