Siebel UX – Web Templates
Web Template is the HTML design-time representation of a Siebel page, each control has a unique item identifier & other HTML attributes that can be manipulated using CSS.
For any Siebel UX project, 60-80% of the work is best done on the server side, with the remaining on the client side via JavaScript and CSS. Web Template design and development is one of the most important aspects of any Siebel UX initiative as it defines the structural elements that is the foundation for the final rendering in the UI. Good web template design should consider Responsive App requirements and allow for fluidity in the UI design. The resulting HTML is consumed by the Siebel Web Engine when it displays Siebel UI Objects in the browser.
Let’s take an example of an Applet form template. Web Template of type Applet Form defines the layout for the fields and controls in a Form applet. It specifies how to format elements in an applet.
- Now let's see how to design the custom web template for an applet as seen in the screenshot below. The rendering below can be achieved in Siebel OpenUI with web template changes only and zero JavaScript code.
- In the above mockup we have a title, buttons, text boxes and a checkbox.
- Title and the buttons are in the same row, below HTML snippet of code will help to achieve Row1
Div is a block element, span is an inline element
The
<div od-type=”form”>tag encloses a section of a page that accepts user inputs, it is similar to the HTML form tag.The
<div od-propertyreferences the value of the control to display, this attribute references the following values that are relevant for a form applet.- FormattedHTML – indicates Siebel CRM to display the data value of the control.
- DisplayName – Caption of the control
- od-id – Control for the Item Identifier/placeholder
When designing for responsive UI, the width of the page is divided into 12 columns. Based on the requirements we can adjust the width of the controls using the “siebui-span-*” classes.
For example – In the above mockup row 2 has two controls so the width is divided into 2 columns, hence “siebui-span-xl-6”
- The od-id iterator has placeholders (501 – 505) that means we can map 5 controls with this specific html pattern.
- For every control we should have “DisplayName” div/span and “Field Value” div/span, to show the controls side by side. If label and field need to show one below the other use div (block element), if they need to show one next to the other use span (or div with display set to inline-block)
- Warning: Do not miss adding closing comments for every control, iterator and form tag. This is a quirk in the Siebel web template processing engine and if the comment is missing, you’ll see a weird error message (see below).
- Similarly for every row based on the number of controls we can modify the code snippet and we can achieve the custom look and feel.
This simple example is a starting point to adopt good web template design and will go a long way in reducing client-side code in a Siebel UX project. There’s obviously more to Siebel UX projects than web templates, but it’s the perfect starting point. Watch this blog site for more tips to come.
Dymensions Perspective
At Dymensions, we believe that most of Siebel customers want to not only get more value out of their existing investment but also use Siebel as a key aspect of their CRM strategy and potentially use other cloud based software services.
Dymensions has been innovating using the modern tools and technologies to build solutions that will greatly benefit CRM customers and help them get more value out of their existing investment. We are committed to providing these solutions that will maximize the investment Siebel customers have already made in the product. For a demo of our solutions and for additional details, contact us using the information below.
