Custom Expand Collapse Applet – Siebel Open UI

As promised in the last post, I am back with the Expand/Collapse Functionality implemented in custom way. But as expected the implementation is bit more complex than vanilla functionality and involves customizing View Web Templates. The basic idea for this solution is to enclose the applet inside a custom div and then use jQuery to derive the expand collapse functionality.

Before diving into the solution I would like to share few advantages/disadvantages of implementing expand/collapse functionality in custom way.

Advantages

1. You can group applets into section and make multiple applets expand and collapse together
2. You can customize the look and feel such as icon, UI through CSS
3. You can provide section headers for better usability

Disadvantages

1. This makes the solution Complex
2. Web template changes would need server restart to take effect.

Below is the way on how you can implement this functionality.

1. Customize View Web Template

Open the view web template of the view where you want to implement expand collapse functionality. It would be a better idea to copy the View Web Template and use that for your view so that all the views are not impacted.

Each applet in View Template is placed using “swe:applet” tags. You might have to make educated guess for the place holder of the applet for which you would like to implement expand/collapse functionality.  Below is before and after of how your view web template should look like.

Before:

[code]

<swe:applet hintMapType="Applet" id="1" hintText="Parent Applet" property="FormattedHtml" var="ParentWithPointer"/>

[/code]

After:

[code language="html"]

<div class="div-exp-col-border"><img id="img-info" class="down" src="images/collapse-icon.jpg"/></div>
<div class="content">
<swe:applet hintMapType="Applet" id="1" hintText="Parent Applet" property="FormattedHtml" var="ParentWithPointer"/>
</div><!--end of content –>

[/code]

2. CSS for persentation

Below are the CSS Rules that I used for modifying the look and feel

[code language="css"]

.div-exp-col-border{cursor: pointer; padding: 5px 10px; color: green;font-family: Arial, Verdana;font-size: 16px;line-height: 18px;background: #345674; overflow: hidden;}
.div-exp-col-border img{float:left;height:20px;width:20px}

[/code]

Now the last part is to make it functional. Which means attaching click event to the div and perform hide/show of the div. I struggled with finding the right place to put the code and ended up using script tag inside the view web template itself. It doesn’t feel right but haven’t been able to find a better way to do it.

3. jQuery for functionality

Below is the jQuery code to actually make the expand/collapse functional. In the web template itself put the following code.

[code language="javascript"]

<script>
$('.div-exp-col-border').click(function(){
$('.content').slideToggle(500);
if($('#img-info').hasClass('down')){
$('#img-info').removeClass('down').addClass('up').attr('src','images/expand-icon.png');
}
else{
$('#img-info').removeClass('up').addClass('down').attr('src','images/collapse-icon.jpg');
}
});
</script>

[/code]

Here are screenshot of showing the expand collapse functionality with multiple applets in action.

That’s it!! Now you have functional expand collapse functionality for applets. In case if you would like to group applets just enclose each swe:applet tag in content div.

Have Fun!!