Collapsible Applets in Siebel OpenUI

If you are not new to Siebel OpenUI, you must have gone through this enhancement example. And if you are a newbee, this is good example to start with.
Well, I am writing this as I need this in my next OpenUI example.

I am implementing this on Siebel IP2016 but this can be used on any of the older OpenUI versions.

What do you mean by Collapsible Applets ?

Collapsible Applets means user can click to hide or show an applet on its will.

We will make a PR file and register it on Account List Applet. Lets start with step by step explaination..

See the full video here:

[su_youtube url=”https://www.youtube.com/watch?v=U6u1rNjldUU” width=”540″ height=”360″]

Download Sample PR file to start with. Here is the download link

Step1: Add a button on applet button bar

We will add custom button html code on runtime. So, we need a predefined OpenUI method which triggers at applet load.
ShowUI is the method we are looking for.
– Find ShowUI method in above PR file
– Add below code in it
– Code is self explanatory

//Get Applet Id and add our custom class to make a new Id
var id1 = this.GetPM().Get("GetFullId") + '-siebui-cust-expandcollapse-btn';
//create button htlm by defining all attribs
var expcolbtn = "<button " +
"id= '" + id1 + "' " +
"class= 'appletButton' " +
"aria-label=ExpandCollapse " +
"type=\"button\" " +
"title=ExpandCollapse " + ">" + "ExpandCollapse" + "</button>";
// target applet container by its Id
$("#s_" + this.GetPM().Get("GetFullId") + "_div")
//search place where do you want to put your button
.find(".siebui-btn-grp-applet")
//add your button
.append(expcolbtn);

Step2: Add a beautiful icon to it

We better know that all these buttons are replaced by icons instead of images. All buttons have defined class and Font unique number to get this icon.
Follow this post to better understand this..

Replace button with icons in Siebel OpenUI
I found arrow-up and arrow-down suitable in this case.
– all we need is to add these icons class in our new button.
– Class for these icons identofoed as:

arrow-up = siebui-icon-arrow-up
arrow-down = siebui-icon-arrow-down

– Add this class in button html
– toggle this class as applet is hiding or showing

Step3: Add hide/show capability

We need to bind our hide/show code with button class and add this code in Bindevents function.

//select cutom button class and bind our code
$("#" + pm.Get("GetFullId") + "-" +"siebui-cust-expandcollapse-btn").bind("click", {ctx: this},function (e) { });

//find applet content by selecting its id and call jQuery funtion Show()/Hide()
$("#s_" + pm.Get("GetFullId") + "_div").find(".siebui-collapsible-applet-content").show();
//toggle icon class after show/hide
$("#" + pm.Get("GetFullId") + "-" +"siebui-cust-expandcollapse-btn").removeClass('siebui-icon-arrow-down')
.addClass('siebui-icon-arrow-up');

Step4: Register this PR in Manifest Administartion

– go to Administartion-Application -> Manifest Files
– Register your PR file here
– go to Manifest Administartion
– Add your PR file for Account List Applet

Here is the complete code you are looking for:

[su_document url=”http://www.askmesiebel.com/wp-content/uploads/2016/08/CollapsibleAppletPR.txt” width=”500″ height=”460″]

Share how much you like this post in below comment section.

Update Note:-

After IP2014, we have applet User Property as well to get this feature done.

Name: Default Applet Display Mode

Value: Collapsed/Expanded

You can follow this link as well

http://siebelunleashed.com/expand-collapse-siebel-applet-siebel-open-ui/

[su_divider style=”dotted”]

@skmeSiebel