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 warning text on the top of the Case if the Case is incomplete or inactive.

Here's how you do it:

1. Duplicate the Case Spotlight (View Mode) dynamic form (if you haven't done that already.)

   Note: This form is the read only Case summary form that you see in the spotlight region.
2. Since we want to display the warning text at the top of the form, let's add and move the StatusTypeCd field to the top of the layout.

3. In the field properties pane, click the Create link next to template. It will create a new field template.

4. 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.

   Note: 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.
5. 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:

   <oj-bind-if test="[[ $value() === 'ORA_SVC_INACTIVE' ]]">
   	<oj-label-value>
   	  <div slot="value">
   		<span class="oj-text-color-warning">
   		  <oj-bind-text value="This case needs attention."></oj-bind-text>
   		</span>
   	  </div>
   	</oj-label-value> 
   </oj-bind-if>

6. Note that we've used the <oj-bind-if> VB element, <oj-label-value> VB element, the <div> HTML element, and the <span> HTML element.
7. Now, click the Design tab, and then click Return to layout.
8. Note the warning text is now associated with the newly created template..