Single Applet as Tabs – Siebel Open UI

As I explained in the my last article how convert a Siebel view into tabbed view to display applets as tabs. Thanks to an idea by Jason I was able to take this a step further. Interested??

The idea is to convert a single form applet into tabbed applet to display different fields in different tabs. This could be very useful in achieving requirements where you need to show mutually exclusive fields or categorize data (currently using Form Sections)  by dividing a single applet into sections and display each section as tabs.

Below is how it looks like when fully functional.

image

image

This is a single form applet with 10 fields divided (divs) into two sections of 5 fields each.

Solution:

jQuery Tabs require your HTML structure to be something like this:

  • Container DIV for the tabs
  • Un-orderd List (UL) containing links with href as id of the DIV that you would like to use for tab contents
  • DIVS containing conent

Technically this structure could be achieved at run time using jQuery but that would result into complicated PR for that applet. But if this structure is already present then you need JavaScript only to initialize the tab which is basically one line script.

Now to achieve the required structure we need to dive into web templates and create a template that suits our need.  Once, the web template is ready you just need to configure your applet in tools as usual and initialize the tabs using jQuery at run time.

Solution:

This is how the web template looks in Tools

image

To achieve the tabification you can either use postLoad.js or an Applet PR all you need to do add this line of code

$('#add-tabs').tabs();

And with that your tabs are functional .

While working on this I realized that to truly exploit the Open UI potential you will have to modify web templates at some point, so it would help to start early. You can go through Siebel Developers bookshelf to get basic knowledge of swe tags and that should be enough to get you up and running.

Interested in the Web template? Drop a comment below. I will make the web template available for download based on public demand.

Enjoy!!!

8 Responses to Single Applet as Tabs – Siebel Open UI

  1. Neel, thanks for this. I can see this coming in handy when the customer has a number of business units and each BU has slightly different data they need to enter. I have one in mind already!

  2. Nice work and post on this topic! I would like to see the SWT template and/or see the steps (best practice) to embed the jQuery library and plugin as well… thanks

  3. Hi Neel,

    In my current project there is a requirement to implement a screen tab in siebel (Like Service Request, Accounts tab)with using Java Script/JQuery with out using siebel tools. Is there anyway we can achive this requirement

  4. Hi Neel, thats a very cool feature which would be quite useful when you have to display lot of data in a small form factor form applet which is ideal for users with a need to enter data without the use of scrolling the screen using mouse.Can you please share the template with me.

  5. Hi Neel,

    Thanks for providing the information. Can you please share the template files.

    Thanks & Regards,
    Pallavi

Leave a Reply

Contribute