Toggle menu

Page Instance Handlebars Helpers

The following Handlebars helpers display information about repeating pages and page instances.

INSTANCES

{{INSTANCES "PAGE1" includeNew=false}}

The INSTANCES helper is used to access the instances of a repeating page.

Parameters

NameDescription
NAMEINSTANCES must always be supplied the name of the repeating page whose instances you want to display.
includeNewOptional. Default: false

If you set this as true the template will display a block for a newly created page instance (eg when a user presses the "Add" button in the Wizard Buttons - Repeating Pages set). The block will be empty because the user won't have completed any of the fields yet. The example templates in the forms designer do not include this parameter as displaying an empty instance can look confusing, especially in a server-side template

Examples

INSTANCES is usually as a sub expression to the #each block helper, like this:

{{#each (INSTANCES "PAGE2")}}
    <your-template>
{{/each}}

The template included in the forms designer includes buttons to edit or remove a page instance, and the option to add a new one:

<div class="icmform__summary icmform__summary--cards">
    <h2 class="icmform__heading icmform__heading--cards">Summary - People</h2>
    {{#any (INSTANCES "PEOPLE")}}
        <div data-grid-mincolwidth="250" gdata-grid-maxcols="4" data-grid-step="4" class="grid grid--formcards grid--formsummary grid--4col">
            {{#each (INSTANCES "PEOPLE")}}
                <div class="grid__cell grid__cell--formcards grid__cell--cols1" data-grid-colspan="1">
                    <div class="grid__cellwrap">
                        <div class="card card--forms{{#if this.isCurrentPageInstance}} card--selected{{/if}}">
                            {{#if this.isCurrentPageInstance}}
                                <div class="card__label">
                                    <span class="card__labeltxt">Selected</span>
                                </div>
                            {{/if}}
                            <h3 class="card__heading">#{{this.pageInstanceDisplay}}</h3>
                            <div class="card__content">
                                <ul class="card__list">
                                    {{#if (FIELD "NAME" pageInstance=this.pageInstance)}}
                                        <li class="nvp nvp--formsummary">
                                            <span class="nvp__label">Name</span>
                                            <span class="nvp__value">{{FIELD "NAME" pageInstance=this.pageInstance}}</span>
                                        </li>
                                    {{/if}}
                                </ul>
                            </div>
                            <div class="card__actions">
                                {{NAVIGATIONBUTTON action="BACKLINK" label="Edit" extraClass="summaryaction cta-link cta-link--link cta-link--edit" pageName="PEOPLE" pageInstance=this.pageInstance mode="EDIT"}}
                                {{NAVIGATIONBUTTON action="BACKLINK" label="Remove" extraClass="summaryaction cta-link cta-link--link cta-link--delete" pageName="PEOPLE" pageInstance=this.pageInstance mode="REMOVE"}}
                            </div>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>
        {{else}}
            <p class="icmform__info icmform__info--cards">There are currently no items.</p>
    {{/any}}
    {{#lt (PAGEINSTANCECOUNT "PEOPLE") (PAGEINSTANCEMAX "PEOPLE")}}
        <div class="icmform__buttons icmform__buttons--cards">
            {{NAVIGATIONBUTTON action="BACK" label="Add" extraClass="summaryaction btn--add" pageName="PEOPLE" pageInstanceAction="ADD" mode="EDIT"}}
        </div>
    {{/lt}}
</div>
<hr class="icmform__separator icmform__separator--cards" />

this Object

While iterating over instances, the following are available in the this object.

this.isCurrentPageInstance

Returns true if this page instance is the one the user is currently viewing.

this.isNewlyCreated

Returns true if the page instance has been created but not yet submitted, eg when a user presses the "Add" button in the Wizard Buttons - Repeating Pages set and is taken to a new instance. Will return false if you are navigating back to an instance that has already been submitted.

this.pageInstance

Returns the current page instance. This count is zero-based. 

this.pageInstanceDisplay

Returns the page instance, plus one, making it better for display on your forms (ie the first instance is 1 not 0).

PAGEINSTANCE

{{PAGEINSTANCE}}

The page instance that's currently being displayed (zero-based, ie the first instance is 0). This is the instance of the page the helper is called on.

PAGEINSTANCEDISPLAY

{{PAGEINSTANCEDISPLAY}}

The user friendly current page instance (one-based, ie the first instance is 1). This is the instance of the page the helper is called on.

PAGEINSTANCEMIN

{{PAGEINSTANCEMIN}}

The minimum number of instances (of this page) set in the forms designer.

PAGEINSTANCEMAX

{{PAGEINSTANCEMAX}}

The maximum number of instances (of this page) set in the forms designer.

PAGEINSTANCECOUNT

{{PAGEINSTANCECOUNT}}

The current number of instances (of this page) that have been generated.

Last modified on 19 July 2024

Share this page

Facebook icon Twitter icon email icon

Print

print icon