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.
This is a single form applet with 10 fields divided (divs) into two sections of 5 fields each.
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
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.
This is how the web template looks in Tools
To achieve the tabification you can either use postLoad.js or an Applet PR all you need to do add this line of code
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.