How to hide an applet conditionally in Siebel Open UI??

While working on Siebel Open UI - UX improvement projects numerous times we need to access data through PM and PR layer without showing data to user.
For such requirements you just wish if it was possible to have applet in view with all the required fields and methods you need, but just shouldn't show up on UI.

Well that is possible, there are two ways to handle this on the client side.

Just one Elastic applet?

Oracle introduced wonderful elastic list applets with IP16,  this feature shrinks list applet size if there are no or less records needs to be displayed. However this doesn't always looks nice, specially in MVG applets and pick applets.

Default Elastic Applets in IP16

 

This feature can be turned off by setting "Enable Elastic Grid" system preference, but it is turned off for entire application. That makes me think is there any way we can make only one applet as elastic applet?  Answer is yes :)

Neel on Siebel Unleashed published beautiful trick to back port elastic applets into IP15. Absolutely splendid! This trick can be extended to make only few applets Elastic. 

To make all list applets Elastic add following in custom CSS file:

.ui-jqgrid-bdiv{max-height:340px !important; height:auto !important;}

To make only one applet Elastic (After turning of the system preference) add following CSS :

div[title="Line Items List Applet"] div.ui-jqgrid-bdiv { height: auto !important}

By preceding another div selector to the CSS rule we can instruct browser to apply CSS style only if applet name is : "Line Items List Applet". One can use this trick to change other UI attributes for specific applets and apply different styling.

Happy Styling :)

Chrome's hidden menu for Open UI

If you are working on css or js changes for Siebel Open UI, you would be struggling with browser caching. I have noticed some cache even when I am using incognito mode of chrome.

Out of frustration one might end up installing chrome app/plugin to forcefully clear cache. One of them is "Clear Cache" 

Interestingly chrome has now created a very discreet "Empty Cache and Hard Reload" option for developers. To see this option open developer tools by pressing F12 and then press and hold reload button. I have been using this option from past one week and it worked every time as expected.

Chrome Hard Reload for Open UI

Please be mindful that this is an hidden menu and only shows up when chrome's developer tools are open.


Happy coding :)

Remove tiny X icon from MVG and Picklist fields in Internet Explorer

MVG and Picklist fields of Siebel IP2013 shows a tiny X icon on right end, on clicking this icon data in the field is cleared. Due to awkward positioning user end up clicking it unintentionally. This behaviour is only available for IE browser.

X in Account Field

X in Currency Field

This was added by oracle in hope to improve usability, but it has received lot angst from end users. Instead of improving user experience it risks of losing data in case of miss click.

Luckily there is simple css solution to remove this icon. Following line in your custom css can remove this unnecessary usability trick from entire application.

input:focus[type="text"]::-ms-clear{display:none;}

Input text fields with this css looks amazing just as in chrome and firefox.

CSS fix for Pick list fields

Currency Field in Siebel Open UI

Hope it helps.