Customizing Applet Web Templates
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.
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.
- 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-property references 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.
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.