Showing posts with label Open UI Examples. Show all posts
Showing posts with label Open UI Examples. Show all posts

July 07, 2016

How to customize siebel error messages?


With IP14 Oracle has provided ErrorObjectRenderer.js to replace browser based dialogs with jQuery based dialogs. Problem with browser based dialogs is that users can accidently disable them. Thus it is not a good place to show error messages or important instructions to the user. 
Standard alert()
However jQuery based dialogs always shows up on the screen and user have to click ok always to get past them.
jQuery Dialog

Lets see how we can achieve the same functionality in IP13.  

Open UI framework uses browser alert() function to popup error messages. In Javascript it is possible to override any function including browser native functions like alert and change it according to the business needs.

Simplest way to override alert is to define a function alert() in your code, this will force your browser to call your custom function all the time whenever Siebel calls alert() instead of browser's native function. .

function alert(str){
 $("<div id='my_error'>" + str + "</div>").dialog({
               modal: true,
                buttons: [{ id: "btn-accept",
                    text: "Ok",
                    click: function () { $(this).dialog("close"); }               
                }]
            });
}

Just add the above code in post load file and job done, after executing this code all the error messages will shown in jQuery dialog which will always pop-up. See it in action on codepen

Happy alerting ! 
This is trick is shared by avid reader TJ, please share your tips and tricks in comments below.

June 23, 2016

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

June 16, 2016

How to hide disabled buttons in Siebel Open UI?

With IP 15 and 16 Open UI themes have inclined towards bigger controls and more blank space on page, which is not bad thing but too much of it is making UI cluttered specially on small screens.

To fix this issue one can hide all disabled controls and all the white space around it. this can be done by simply adding following CSS and Open UI framework takes care of the rest.

button.appletButtonDis {
    display: none;
}

Further on to hide disabled menu items add :

li[aria-disabled=true]{
    display: none;
}

Siebel adds these classes and attributes to all the buttons on all applets and menus including new/query/delete icons to show them as disabled. Thus this change effects the entire application.

This post is contributed by esteem reader from down under via siebel-developers slack community. Register today to read more discussion like this.

September 18, 2015

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.

June 30, 2015

How to change color of screen tab in Open UI?

I think this configuration should available out of the box in Siebel. Never the less I am happy that it is possible to customize the View PR layer in Open UI to change the colors of view bar of specific views.

In this example we will see how can we change the view bar background conditionally using Open UI View level PR customization.

This is how grey tab theme looks out of the box for Manifest File view :
 
Open UI Manifest File View

And this is how Manifest Administration view looks with Open UI PR Customization:

Open UI Manifest Administration View

May be savvy developers would like to have pale yellow for read only views or red for administration screens???


Part 1 : Create CSS class
This customization requires extending the theme in theme.js and creating new class to add different color. New Class should look something like :
custom-theme.css
When this class is associated with any control, it will change the background of the element to transparent and change the background color to blue.

Part 2: Create View PR Customization 
Now the task left is to find the view bar element in the DOM and assigning the class, this can be done with these two commands:

            $("#s_sctrl_tabView").addClass("custom_viewbar");
            $("#s_sctrl_tabScreen").find("li.ui-tabs-active[role='tab']").find("a").addClass("custom_viewbar");

Additionally we need to handle the browser resize event and reassign the class on change of size of browser. Sadly resize event is not passed on the View level PR as described in bookshelf and it has to be done with help of jQuery bind function. Code handling resize event looks like :

        $(window).bind("resize", OnPRResize);

At last we need to handle the cleaanup in the EndLife event of jQuery bind and the class allocation.

$(".custom_viewbar").removeClass("custom_viewbar");
$(window).unbind("resize", OnPRResize);

The final code of PR looks like:


if (typeof(SiebelAppFacade.testPR) === "undefined") {
    SiebelJS.Namespace("SiebelAppFacade.testPR");
    define("siebel/custom/testPR", ["siebel/viewpr"],function () {
    SiebelAppFacade.testPR = (function () {

    function testPR(pm) {
                SiebelAppFacade.testPR.superclass.constructor.apply(this, arguments);
    }
    SiebelJS.Extend(testPR, SiebelAppFacade.ViewPR);

    testPR.prototype.Init = function () {
        $(window).bind("resize", OnPRResize);
        SiebelAppFacade.testPR.superclass.Init.apply(this, arguments);
    }

    testPR.prototype.ShowUI = function () {
        SiebelAppFacade.testPR.superclass.ShowUI.apply(this, arguments);
    }

    testPR.prototype.BindData = function (bRefresh) {
            SiebelAppFacade.testPR.superclass.BindData.apply(this, arguments);
    }
    var OnPRResize = function OnResize(){
            $("#s_sctrl_tabView").addClass("custom_viewbar");
            $("#s_sctrl_tabScreen").find("li.ui-tabs-active[role='tab']").find("a").addClass("custom_viewbar");
    };
    testPR.prototype.BindEvents = function () {
            SiebelAppFacade.testPR.superclass.BindEvents.apply(this, arguments);
    }
    testPR.prototype.EndLife = function () {
        $(".custom_viewbar").removeClass("custom_viewbar");
        $(window).unbind("resize", OnPRResize);
        SiebelAppFacade.testPR.superclass.EndLife.apply(this, arguments);
    }

    testPR.prototype.Setup = function () {};

    testPR.prototype.SetRenderer = function () {
                $("#s_sctrl_tabView").addClass("custom_viewbar");
                $("#s_sctrl_tabScreen").find("li.ui-tabs-active[role='tab']").find("a").addClass("custom_viewbar");
    };

    return testPR;
    }()
    );
    return "SiebelAppFacade.testPR";
    })
}

Part3: Configure Manifest
Now when this PR script is associated to any view in Open UI Manifest, view bar color and screen tab color of that view will change to blue.


Hope it helps, if you like this article and would like to see more articles like this please leave a comment or +1

June 28, 2015

How to make Open UI textarea fields flexible in IE?

As you would know that IE doesn't have flexible textarea even in version 11. When rest of all modern browser allow to open drag one corner of the text area to change its size, IE doesn't let user to change size of elements because of Trident layout engine???


Fixed size multiline fields in IE
Because of this limitation Siebel Open UI users suffer big time. All the multiline textarea fields in open UI are fixed size and there is no way to pop them up as in HI or expand them. read more. 

Flexible multiline fields in chrome
There are many jquery based plugins available for this problem however all of them needs to maintained and lacks in one thing or the other, probably you will end up using one of those plugins at the end. However If someone looking for simple straightforward stop gap solution, then you can use jQueryUI Resizable function to make the textareas flexible just like chrome or firefox.

To implement in simply add following one line in postload.js file on the web server.

 $("textarea").resizable(); 

This will make all the textarea controls which are used for multiline field flexible and show tiny blue cue to expand or decrease the size of element and mimic chrome or firefox textarea elements.


Hope it helps.