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 >>

Watch our YouTube Video on how to configure Siebel Open UI to highlight required fields:

In continuously growing competitive market, it is very much important for a business to share right information to the right person at the right time, otherwise business will lose its opportunities to sale products or services. Customer Relationship Management software is the only solution that can help business to communicate with prospects or customers properly. For any CRM application, primary goal is to enable an organization to understand customers’ need and behaviour and provide better quality of service. It helps to retain existing customers and capture new opportunities by building a strong relationship between an organization and customers. CRM can analyze data and generate reports whenever required. There are mainly three types of CRM applications – Operational, Analytical and Collaborative to perform all these activities.

Types of CRM:

1. Operational CRM

Operational CRM streamlines the business process that includes Sales automation, Marketing automation and Service automation. Main purpose of this type of CRM is to generate leads, convert them into contacts, capture all required details and provide service throughout customer lifecycle.

Sales Automation:

Sales automation helps an organization to automate sales process. Main purpose of sales automation is to set standard within organization to acquire new customers and deal with existing customers. It organizes information in such a way that the business can meet customers’ needs and increase sales more efficiently and effectively. It includes various CRM sales modules like lead management, contact management, Quote-to-Order management, sales forecasting.

Marketing Automation:

Main purpose of marketing automation is to find out the best way to offer products and approach potential customers. Major module in marketing automation is campaign management. It enables business to decide effective channel/s (like emails, phone calls, face to face meeting, ads on social media) to reach up to potentials customers.

Service Automation:

Service automation enables business to retain customers by providing best quality of service and building strong relationship. It includes issue management to fix customers’ problems, customer call management to handle incoming/outgoing calls, service label management to monitor quality of service based on key performance indicators.

2. Analytical CRM

Analytical CRM helps top management, marketing, sales and support personnel to determine the better way to serve customers. Data analysis is the main function of this type of CRM application. It analyzes customer data, coming from various touch points, to get better insights about current status of an organization. It helps top management to take better decision, marketing executives to understand the campaign effectiveness, sales executives to increase sales and support personnel to improve quality of support and build strong customer relationship.

Features of Analytical CRM:

• Gather customer’s information, coming from different channels and analyze data in a structured way
• Help organization to set business methodology in Sales, Marketing and Support to improve customer relationship and loyalty
• Improve the CRM system effectiveness and analyze key performance indicators, set by business

3. Collaborative CRM

Collaborative CRM, sometimes called as Strategic CRM, enables an organization to share customers’ information among various business units like sales team, marketing team, technical and support team. For example, feedback from a support team could be useful for marketing team to approach targeted customers with specific products or services. In real world, each business unit works as an independent group and rarely shares customers’ data with other teams that often causes business losses. Collaborative CRM helps to unite all groups to aim only one goal – use all information to improve the quality of customer service to gain loyalty and acquire new customers to increase sales.

Different types of CRM applications have different features and advantages. So before implementing CRM system, it is very much important for a business to decide future goal and strategy. If you want to choose the best CRM for your business, read our article on ‘How to choose the best CRM software for your business‘.

Do you have any question? Please feel free to comment below.

Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Goolge+.

Watch our YouTube video on ‘what is CRM and types of CRM’:

Have you ever tried to add or change icons on screen tabs in Siebel HI application?

Before that,

Do you think, we can configure screen tab icons in Siebel HI at all?

And what about Siebel Open UI?

Answer is YES!

We can add or change icons on screen tabs in Siebel HI as well as Open UI application.

There are two ways to change screen tab icons in Siebel –

1. Repository Dependent Process – Configure Bitmap category and Bitmap in Siebel Tools

2. Repository Independent Process – Find out the image name and replace it with custom image

We all like fast and non srf solution, isn’t!

Here, we will discuss about repository independent process in details. Though we will brief you about srf dependent process also but main focus will be on non srf solution.

You may think, what is the use or business value of changing screen tab icons?

Well,

It’s not like that it does not have any business value. Better user experience is also a business value, right?

You know, image can engage users more than just a text.

Even we have seen a customer who asked to replace all texts from screen tabs with images completely just for better user experience.

So,

Steps for non srf solution to change icons on screen tabs in Siebel HI or Open UI:

Step 1. Find out the image name, responsible to display icon on screen tab

You already know how to find out any element or object in Siebel Open UI, right?

If not, you must go through our Open UI training articles, particularly Siebel Open UI theme customization.

Here we will change screen icon for ‘Account‘ tab.

So, right click on ‘Account‘ screen icon and click on ‘Inspect Element‘ to launch inspector.

Under Elements tab, you should see highlighted ‘img‘ html tag. Once you keep the cursor over that highlighted script, you will see a popup of that image and icon on screen tab will also be highlighted.

Now seeing the image, you can tell the image file name and size.

For ‘Account‘, image file name is ‘accounts_icon.gif‘ and size is ‘16X16‘ pixels.

Image size is important because we have to replace this image with same size image. Otherwise Siebel will not display the icon properly.

For this tutorial, we have got a custom image with 16X16 pixels.

If you want to increase the size for screen tab icons, then you have to modify CSS rules.

You can test it by updating CSS properties inline using browser developer tool.

On the right hand side, you can see few CSS properties from theme-base.css file, right?

Just change the height parameter from 16px to any other value and see, icon size is changed. Likewise you can test font size, padding, line height also. To know more about theme related configuration, read our article on Siebel Open UI theme.

Anyway, back to our topic.

So far, we know what is the image name and where to find it.

Step 2. Verify custom image

Same as application loading image, screen tab icon also has size limit. From the previous step, we have got to know that best fit image size is 16X16 pixels.

To resize custom image, you can use any third party tool like Microsoft Office picture Manager, Picresize.

Also don’t forget to save it with .gif format.

Step 3. Replace the out of box image

Now,

Copy your custom image file under ‘IMAGES‘ folder.

For dedicated client, copy the image under ..Client\PUBLIC\<lang>\IMAGES.

For web client, copy it under Siebel Web Server\PUBLIC\<lang>\images.

Do not delete the out of box image!

Before copying the custom image, rename the vanilla one. So that, if it requires, you can always get the vanilla image.

Step 4. Verify Siebel Open UI application

Now clear browser cache and relaunch Siebel Open UI application, you should see the new icon.

Simple and easy!!

But,

It has a drawback 🙁

What will happen if the same vanilla image has been used in other place/s as well?

In this scenario, vanilla image will not appear in any other place as you have changed the name.

But,

Good thing is that, we have never faced such issue but it may occur. In this case, you have to go for srf dependent process to change icons on screen tabs.

So, just a brief about Repository Dependent Process.

First, find out the ‘Bitmap Category’ and ‘Bitmap’ responsible to display the icon.

If the screen tab has icon, it will have ‘Bitmap Category’ also.

So navigate to Siebel Tools -> Screen and search for the screen.

From ‘Bitmap Category’ property in Screen object, you will get the category name.

If there is no category associated, you have to create a new one.

So copy the category name and query for the category under ‘Bitmap Category’ object.

Come down to the ‘Bitmap‘ child object and query with Name = Screen Tab Icon. If it is not there, then we have to create a new one with image name.

Name: Screen Tab Icon
Filename: Custom image file name

Do not forget to copy the custom image under ‘IMAGES’ folder as specified in step 3.

Compile all changes and launch the application. You must see the custom icon instead of vanilla.

Good enough!

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 application default loading image       Highlight required fields in Siebel Open UI >>

Watch our YouTube Video on how to configure Siebel Open UI to change icons on screen tabs: