Template View

Create a Custom View for This Artifact Only

You can create a template directly, by adding HTML tags, mapping result fields and adding other template syntax until you have the custom view you want. Or you can select a global view template as a starting point and tweak the HTML and template syntax as needed.

See also Save a Custom View as a Global View Template.

Save a Custom View as a Global View Template

The steps to create a global view template are the same as creating a unique custom view for one artifact. When you save the template, change the Template Scope to Global. Presto administrators can also register global view templates in the Admin Console.

Map Result Fields to the Template

Mapping result fields defines where data will appear within the HTML code for this view or template. You use the jQuery syntax for variable substitution to map fields:

${path.to.datanode}

See jQuery Template Syntax for Variable Substitution for more details on this syntax.

You should only map fields that contain data. If you map a complex node (an object) by mistake, Preview shows [object Object] as the value.

Rather than entering mapping syntax directly, you can automatically generate this syntax using the Data pane in the Configure Data step:

Map Results Fields That Contain HTML Markup

Some result fields contain HTML markup along with data. Common examples include fields in RSS or Atom web feeds. If you map these result fields using the basic mapping syntax, ${path.to.fieldname}, the view shows the HTML tags for this field such as this example:

To handle result fields that contain HTML, use the {{html path.to.fieldname}} syntax instead.

See jQuery Template Syntax for HTML Evaluation for more details on this syntax.

1. Enter {{html }} within the HTML tags where this field should appear.

2. Place the cursor after the space in the html statement and before the end braces (}}).

3. Expand the results tree in the Data pane.

4. Click the field in the Data pane that has HTML markup that you want to map to the current position in the template.

   The mapping syntax that this generates depends on whether this is a single field or a field inside repeating items. For single fields, the syntax is generated correctly with a full path to that field, such as {{html rss.channel.title}}.

   For fields in repeating items, the syntax that is generated has a relative path, which is correct, but the path uses the standard mapping syntax such as {{html ${description}}}. Preview will show an error invalid property id rather than rendering the view.

5. If needed, remove the ${ and} symbols that were generated around the path to this field.

With the correct syntax, the view now renders the HTML code from this field:

Iterate Through Repeating Results

In many cases, the results contain a repeating structure with data that the view should iterate through, generating HTML and data for each instance. Use the {{each structure.path}} template syntax to performs loops in a template:

1. Enter the start- and end-loop statements where you want to begin looping in the view:

   {{each }} 
   {{/each}}
   

   See jQuery Template Syntax for Loops for more details on looping syntax.

2. Place the cursor after the space in the start-loop statement.

3. Click in the Data pane on the repeating node that should be used as the iterator for the loop:

   
   
   
   
   

   This adds the full path to the repeating node for the loop.

4. Within the start- and end-loop statements, add the HTML that should be generated for each loop iteration. Map individual fields from the repeating items as needed (see Map Result Fields to the Template).

   
   
   
   
   

   Mapping uses relative paths to fields within each repeating item, as shown above. See also Example: Examples for a more detailed example.

Add Conditional Logic

You may also need templates or custom views to have conditional logic or handle different cases in the results. To add conditions, use these template statements:

To generate the path to a field as part of a condition:

1. Place the cursor inside the if or else start-statement

2. Add a space after if or else.

3. Click on the field you want in the Data pane.

Insert the appropriate HTML and other template syntax within the start- and end-statements.

This example change the background color and text color based on the value of a field:

{{if PercentChange > 0}} 
<div style="width: 90px;padding: 5px; border: 1px solid #ccc; margin: 5px;float: left;background-color: #5ab000;color:#fff;"> 
{{else PercentChange < -3}} 
<div style="width: 90px;padding: 5px; border: 1px solid #ccc; margin: 5px;float: left;background-color: #c11;color:#fff;"> 
{{else}} 
<div style="width: 90px;padding: 5px; border: 1px solid #ccc; margin: 5px;float: left;background-color: #ff9;color:#333;"> 
{{/if}}

See If Syntax and Else Syntax for more information on conditional statements in jQuery templates. See Example: Examples for a more detailed example.