Create Your Own Field Template

You use field templates to configure how certain fields are rendered at runtime in a dynamic form or table.

You can use a combination of HTML and VB components to control how you want to display a field. A simple example for this would be: You want to display a red banner on the top of the SR if the SR is marked critical.

Here's how you do it:

1. Duplicate the Service Request Summary (View Mode) dynamic form (if you haven't done that already.)

   Note: This form is the read only SR details form that you see when you click on the SR details icon on the SR summary region.

2. Since we want to display the banner at the top of the form, let's move the CriticalFlag field to the top of the layout.

3. In the field properties pane, click the Override link.

   This link lets you override the field template of the CriticalFlag field. In other words, the override makes the template property editable. A Create link is also now visible.

4. Click the Create link to create the new template.

5. Enter a name for the template in the Label field. The ID field will auto-populate.

   VBStudio designer opens. This is where you can design the template.

6. Click Create.

   Note that there are tabs called Live, Design and Code. For this exercise we'll click on Code tab.

   If you go to the Design tab, you can use the editor to drag and drop VB components to define your template.

7. Click Code, and note that VBStudio has created a default template for you. We are going to remove the code that's inside your template tag, and paste the following code inside the template tag:

   		<of-bind-if
   			test="[[$value]]">
   			<oj-label-value colspan="6">
   			<div slot="value" style="background:red">
   				<span id="criticalBadge" style="color:white;padding:2px">
   					<of-bind-text value="Critical SR. Resolve in 6 hours">
   					</oj-bind-text>
   				</span>
   			</div>
   			</oj-label-value>
   		</oj-bind-if

8. Note that we've used the <ob-bind-if> VB element, <oj-label-value> VB element, the <div> HTML element, and the <span> HTML element.

9. Now, click the Design tab, and then click Return to layout.

10. Note the CriticalFlag is now associated with the newly created template.