Client-side HTML template functions
Before you can add a template widget or tile widget to a view, you need to create a saved template. The saved template defines the content that is displayed. You can write the template in plain text or HTML. In either case, you can include any of the standard template functions to fetch data from your application.
When creating a saved HTML template for use with a template or tile widget, you can add functionality using the Grexx-specific classes listed below. This includes performing activities, loading a child widget, embedding video, and creating print, copy, and back buttons.
For security reasons it is not possible to use the style attribute or to include JavaScript or references to JavaScript. To apply styles, apply CSS to the platform, casetype, or widget. To use JavaScript, use a plugin.
Embed an activity in a template
You can allow users to perform an activity with a clickable HTML element. This can be an optional activity or a mandatory task that has already been initiated. You can specify whether or not to display the activity form and whether to reload some or all of the elements on the page after the activity has been performed.
Use the html.activity template function to achieve the same result with less code. You can specify values for each of the attributes listed below when you configure the template function.
Create a clickable element with the btn btn-success grexxclickhandler class and the data-grexxclickhandlertype="activity" attribute. Add other attributes as required:
| Attribute | Value | Description |
|---|---|---|
data-grexxclickhandleractivitytype | optional, optionalByTag, or required | Specify whether the activity is an optional activity or a mandatory task. Defaults to optional. |
data-grexxclickhandleractivityid | A case ID | The activity case ID in your Studio. Required if activity type is optional. Available from activitymeta.Activity caseid |
data-grexxclickhandleractivitytag | A tag | Identify activities by tag rather than by activity case ID. Required if activity type is optionalByTag. Available from activitymeta.Tags |
data-grexxclickhandlertaskid | A case ID | The case ID of the mandatory task to be performed. Required if activity type is required. Available from taskmeta.Task ID |
data-grexxclickhandlercaseid | A case ID | The case on which the activity is performed. Defaults to the case being viewed (not a case identified by an iterator or tile). Available from casemeta. |
grexxclickhandleractivityexecution | form or none | To execute the activity immediately without displaying the form, set the value to none. If not specified the form is displayed. |
data-grexxclickhandleractivityreload | See below | The reload behavior (see below) Defaults to reload. |
data-grexxclickhandlercheckrights | true or false | Indicates whether permissions should be checked. Defaults to false. If no rights are granted, the entire button will be removed from the HTML. |
data-grexxclickhandlercheckrightsonreload | true or false | Whether rights should be checked when the template is reloaded. Default is false. If false, the values are retrieved from the cache. |
data-grexxclickhandlerasklocation | true or false | Requests the user's location before the activity is performed. This is available from user.usersession using the location key. |
data-grexxclickhandlerrequireslocation | true or false | The activity will not run if the user's location is not known. |
data-grexxclickhandleractivityloader | true or false | Activates the loading functionality from bootstrap. Use the data-loading-text attribute to specify the text to display. |
data-grexxclickhandleractivityfieldtag | A tag | Associate one or more input fields with the activity. You can use this to populate activity form fields with values from custom input fields. This is useful if you have set grexxclickhandleractivityexecution to none. For more information, see Populate activity form fields from input fields below. |
For example:
<button class="btn btn-success grexxclickhandler"
data-grexxclickhandlertype="activity"
data-grexxclickhandleractivitytype="optional"
data-grexxclickhandleractivityid="{activitymeta.ID}"
data-grexxclickhandleractivitytag="tag"
data-grexxclickhandleractivityexecution="{form or none}"
data-grexxclickhandleractivityreload="{reload or no-reload or refresh}"
data-grexxclickhandlercheckrights="{true or false}"
data-grexxclickhandlercheckrightsonreload="{true or false}"
data-grexxclickhandlercaseid="{casemeta.case-ID}"
data-grexxclickhandlerrequireslocation="true or false"
data-grexxclickhandlerasklocation="true or false"
data-grexxclickhandleractivityloader="{true or false}"
data-loading-text="Loading..."
data-grexxclickhandleractivityfieldtag="a-unique-tag"
>
Start {activitymeta.Name} activity
</button>
Reload options
The following reload options can be used with data-grexxclickhandleractivityreload. You can combine options using ; (for example self;siblings).
| Reload option | Description |
|---|---|
reload | All widgets are reloaded. However, the page is not refreshed. |
no-reload | Nothing is reloaded. This is useful if you are sure that no information will change on the current page. |
refresh | Refreshes the entire page. This is useful if the view contains conditional rights or widgets. |
self | Only reloads the (sub)widget from which the activity was started. |
parent | Reloads the parent widget if the activity was started from a sub-widget. |
children | Reloads all sub-widgets of the (sub)widget from which the activity was started. |
siblings | Reloads all other sub-widgets of the same parent, or all widgets in the same container. |
tile | Reloads the current tile (only applicable within tile widgets). If the tile no longer appears in the dataset, it will be deleted. Does not check whether other tiles have been added, changed, or deleted. The order is also not changed, not even of the current tile. |
widgets | Reloads the widgets based on caseids, separated by a , (comma), based on data-grexxclickhandleractivityreloadwidgets, for example data-grexxclickhandleractivityreloadwidgets="1:2:3,1:2:4". |
Add keyboard shortcuts to perform activities
To allow users to perform an activity or follow a link using a keyboard shortcut, add the grexx-click-on-key class to the link or button element. Use the data-grexx-hotkey attribute to define the key sequence. The keys must follow Mousetrap syntax. To define multiple alternative key sequences, use comma separation. For example:
<button class="btn btn-success grexxclickhandler grexx-click-on-key" data-grexx-hotkey="ctrl+shift+k, command+shift+k'" <!-- Other attributes --> >
Press ctrl+shift+k or command+shift+k
</button>
<a class="grexx-click-on-key" data-grexx-hotkey="g r e x x" href="https://grexx.net">Type the letters g, r, e, x and x after each other</a>
Certain keyboard shortcuts are reserved by the operating system or browser and are therefore not available.
Populate activity form fields from input fields
To populate one or more of the fields on the activity form with values from input fields, use the form-control grexxclickhandler-field class. Identify the form field using the data-grexxclickhandleractivityfield attribute and apply a tag using the data-grexxclickhandleractivityfieldtag attribute. Then, apply the same tag to the activity button. For example:
<input type="text" class="form-control grexxclickhandler-field" data-grexxclickhandleractivityfield="1:8297:1257:1" data-grexxclickhandleractivityfieldtag="a-unique-tag" placeholder="Enter ID">
<input type="text" class="form-control grexxclickhandler-field" data-grexxclickhandleractivityfield="1:8297:1665:1" data-grexxclickhandleractivityfieldtag="a-unique-tag" placeholder="Enter Name">
<button class="btn btn-success grexxclickhandler"
data-grexxclickhandlertype="activity"
data-grexxclickhandleractivitytype="optional"
data-grexxclickhandleractivityid="{activitymeta.ID}"
data-grexxclickhandleractivityexecution="none"
data-grexxclickhandlercheckrights="true"
data-grexxclickhandleractivityloader="true"
data-loading-text="Loading..."
data-grexxclickhandleractivityfieldtag="an-unique-tag">Start {activitymeta.Name} activity</button>
You can find the case ID of a form field from the Form designer: open the settings and enable Case-ID visibility. You can also use the Form designer to define placeholder text for individual form fields.
Load a child widget from a master template widget
If you have made a template widget the master widget for another widget, you can use a click handler to control when the the detail is loaded in the child widget. You can also specify the case, optional activity, or mandatory task for which you want to load details in the child widget. For example:
<button class="btn btn-success grexxclickhandler"
data-grexxclickhandlertype="master"
data-grexxclickhandlercaseid="{casemeta.case-ID}"
data-grexxclickhandleractivityid="{activitymeta.ID}"
data-grexxclickhandlertaskid="{taskmeta.ID}">
Load detail
</button>
Whereby:
data-grexxclickhandlercaseidcontains the value ofcasemeta.Case-ID.data-grexxclickhandleractivityidcontains the value ofactivitymeta.Activity case ID. You can use this option when the child widget is an activity widget.data-grexxclickhandlertaskidcontains the value oftaskmeta.Task ID. You can use this option when the child widget is an activity widget.
Sub widgets
Use the html.Sub widget template function to achieve the same result with less code. You can specify values for each of the attributes listed below when you configure the template function.
To load a widget with data for another case, use the grexxsubwidget class and specify both the widget ID and case ID. For example:
<!-- Load widget directly -->
<div class="grexxsubwidget"
data-grexxwidget="1:142:1"
data-grexxcaseid="1:4581:1"
data-grexxload="direct">
</div>
<!-- Load after the user has clicked another element -->
<div class="grexxsubwidget"
data-grexxwidget="1:142:1"
data-grexxcaseid="1:4581:1"
data-grexxload="onclick"
data-grexxtriggertarget="#anotherElement">
</div>
The user must have rights to the mentioned widget, otherwise nothing will be shown. The class grexxsubwidget-loading indicates that the widget is loading and can be used in combination with CSS for styling.
If you start an activity from a sub-widget with the grexxclickhandler, see the documentation above for the different reload types, this will help you determine which parts of your widget need to be reloaded when you have completed your activity.
Videos
To embed YouTube or Vimeo videos with player controls in a template or tile widget, use the grexx-embed-code class. You can also embed a video that has been uploaded as a static file. For example:
<h5>Youtube</h5>
<div class="grexx-embed-code" data-grexx-content="youtube" data-grexx-src="CTzkQbv5d_g"></div>
<h5>Vimeo</h5>
<div class="grexx-embed-code" data-grexx-content="vimeo" data-grexx-src="732066292?h=59f5a57397&badge=0&autopause=0&player_id=0&app_id=58479"></div>
<h5>Video (native HTML5, video from file) </h5>
<video width="800" height="500" controls loop autoplay crossorigin="anonymous">
<source src="video.wmv.mp4" type="video/mp4">
<track default kind="captions" srclang="en" src="video.wmv.vtt"/>
</video>
Link to cases
There are four options for linking to a case:
/page/alias(e.g./page/homepage)/page/casetype-id-of-the-page(e.g./page/1:142:512)/case/caseid(e.g./case/1:6906:23)/case/id-of-caseid(e.g./case/23)
You can use these options in combination with a normal link element to create a button that points to another case or page.
<!-- The links below do the same thing -->
<a href="/page/maintenance">Maintenance page</a>
<a href="/page/{page.maintenance.alias}">Maintenance page</a>
<a href="/case/{page.maintenance}">Maintenance page</a>
<!-- Other examples -->
<a href="/case/{casemeta.caseid}">{casemeta.reference}</a>
Print, back and refresh buttons
Use the html.Print button, html.Back button and html.Refresh button template functions to achieve the same result with less code.
Use the following classes to include buttons that call browser functions.
<!-- Print -->
<button class="btn btn-sm btn-default grexx-print-button">Print</button>
<!-- Back -->
<button class="btn btn-sm btn-default grexx-back-button">Back</button>
<!-- Refresh -->
<button class="grexxclickhandler" data-grexxclickhandlertype="refresh">Refresh</button>
Copy button
Use the html.Copy button template function to achieve the same result with less code.
To create a button that copies text to the clipboard, use the grexx-copy-button class with the following attributes:
data-grexx-copy-src- The text to copy.data-grexx-copy-change-text-button- Set totrueto temporarily change the button label to the string specified indata-grexx-copy-success-text.data-grexx-copy-use-tooltip- Set totrueto display the string specified indata-grexx-copy-success-textin a tooltip.data-grexx-copy-success-text- The success text displayed in the tooltip or button.
If you have not specified a success text but have chosen to use the text in the button or the tooltip, the defaults are applied: success = 'Copied!'.
For example:
<!-- Copy -->
<button class="btn btn-sm btn-default grexx-copy-button" data-grexx-copy-change-text-button="true" data-grexx-copy-success-text="Success! 1" data-grexx-copy-src="https://nl.wikipedia.org/wiki/Dolfijnen">Copy my dolphin</button>
<button class="btn btn-sm btn-default grexx-copy-button" data-grexx-copy-change-text-button="true" data-grexx-copy-success-text="Gelukt! 2" data-grexx-copy-use-tooltip="true" data-grexx-copy-src="https://nl.wikipedia.org/wiki/Beren">Copy my bear</button>
<button class="btn btn-sm btn-default grexx-copy-button" data-grexx-copy-change-text-button="false" data-grexx-copy-success-text="Gelukt! 3" data-grexx-copy-use-tooltip="true" data-grexx-copy-src="https://nl.wikipedia.org/wiki/Wolf">Copy my wolf</button>
<button class="btn btn-sm btn-default grexx-copy-button" data-grexx-copy-change-text-button="true" data-grexx-copy-use-tooltip="true" data-grexx-copy-src="https://nl.wikipedia.org/wiki/Orka">Copy my orca</button>
Floating action button
The default is on hover, but with data-floataction="click" you can change that to a click action.
<div class="btn--fixed" data-grexxtoggle="float" data-floataction="click">
<span class="float">
<i class="fa fa-bars"></i>
</span>
<ul class="float__actions">
<!-- Place for menu content -->
</ul>
</div>
Formatting fields in HTML
Format date in HTML
Date formatting should now be applied using the date.format template function. You can then use an inline template to retrieve the date and specify a format string. This method works in templates used for widgets, emails, PDFs, CSS, and mappings.
The old method described here can only be used for template and tile widgets. This uses the Moment.js formatting options.
<span class="grexxdateformatter" data-grexxdatevalue="2016-04-18T18:30:46.839Z" data-grexxdateformat="yyyy"></span> //== 2016
<span class="grexxdateformatter" data-grexxdatevalue="{date.currentdate}" data-grexxdateformat="lll"></span> //== Apr 18, 2016 8:30 PM
<span class="grexxdateformatter" data-grexxdatevalue="{data.addBusinessDays(..,..)}" data-grexxdateformat="ll"></span> //== Apr 18, 2016
<span class="grexxdateformatter" data-grexxdatevalue="{date.currentdate}" data-grexxdateformat="dd"></span> //== Mo
<span class="grexxdateformatter" data-grexxdatevalue="{date.currentdate}" data-grexxdateformat="ww"></span> //== 17
<span class="grexxdateformatter" data-grexxdatevalue="{date.currentdate}" data-grexxdateformat="Qo Do dddd E Wo a zz + X"></span> //== 2nd 18th Monday 1 16th pm + 1461004246
<span class="grexxdateformatter" data-grexxdatevalue="{date.currentdate}" data-grexxdateformat="DD-MM-YYYY"></span> //== 18-04-2016
<span class="grexxdateformatter" data-grexxdatevalue="{date.currentdate}" data-grexxdateformat="LLLL"></span> //== Thursday, August 11, 2016 3:50 PM
Date formatting in HTML attributes
This only works in template and tile widgets. This option should not be used in templates used to generate emails, PDFs, CSS or mappings.
You can also have the date placed in an attribute field. For example, to fill a tooltip text (alt or title) with the date.
You can do this by filling the data-grexxattribute field with the attribute value. You can also determine where exactly the date should be placed in the field by entering {{date}} as shown below:
<span title ="This {{date}} is the date" class="item-value grexxdateformatter"
data-grexxattribute="title"
data-grexxdatevalue="Datecreated (datetime@taskmeta)"
data-grexxdateformat="DD-MM-YYYY HH:mm">
</span>
Format money attributes
This only works in template and tile widgets. This option should not be used in templates used to generate emails, PDFs, CSS or mappings.
To format currency use the grexxmoneyformatter class.
<span class="grexxmoneyformatter">{case.moneyAttribute}</span>
Formatting code (HTML / XML / CSS / JavaScript)
To display code with syntax highlighting, add the grexxcodeformatter class and specify the language. XML, HTML, JavaScript, CSS are currently supported. To request support for other languages, contact your Grexx coach.
<!-- Simple -->
<div class="grexxcodeformatter" data-grexx-language="xml">{case.xmlAttribute}</div>
<!-- Simple with options -->
<div class="grexxcodeformatter" data-grexx-language="html" data-grexx-linenumbers="true">{case.htmlAttribute}</div>
Google Analytics
See SEO & Metadata.
IRMA
To retrieve attributes via the IRMA app, use the grexx-irma-attribute-receiver class. For example:
<!-- Simple: one attribute -->
<div class="grexx-irma-attribute-receiver" data-irma-attributes="pbdf.pbdf.ageLimits.over12" data-grexx-reload="reload"></div>
<!-- Simple: multiple attributes -->
<div class="grexx-irma-attribute-receiver" data-irma-attributes="pbdf.pbdf.ageLimits.over16, pbdf.pbdf.ageLimits.over65" data-grexx-reload="reload"></div>
<!-- Simple: Request attributes and then execute an activity -->
<div class="grexx-irma-attribute-receiver" data-irma-attributes="pbdf.pbdf.ageLimits.over16, pbdf.pbdf.ageLimits.over65" data-grexxclickhandleractivityid="1:4581:17527"></div>
<!-- Advanced: Create your own custom disclose message -->
<div class="grexx-irma-attribute-receiver" data-irma-disclose="[[['pbdf.pbdf.ageLimits.over21'],[ 'pbdf.pbdf.ageLimits.over65']]]" data-grexx-reload="reload"></div>
Options for requested attributes
Option 1. You can use a comma-separated list of attributes in data-irma-attributes. The list of attributes can be found here.
Option 2. You can compose the content of the Disclose message yourself in data-irma-disclose. This allows you to give the user multiple and/or choices for the attributes to be provided, for example zip code + house number OR street name + house number + city. For more information, refer to the IRMA session requests documentation. Use the same list of attributes as for option 1.
Options for what to do after attributes are retrieved
Option 1. Nothing, by default nothing happens at all when IRMA is ready, the green check mark of IRMA remains.
Option 2. Use data-grexx-reload="reload" to indicate that the page should be refreshed after the user has successfully provided the attribute. You can use this to ensure that you do not unnecessarily ask for the same attribute multiple times.
Option 3. With data-grexxclickhandleractivityid="1:4581:17527" (and all other options for executing activities) you can indicate that an activity should be executed after a successful issue.
How do I get the values in the IRMA attributes?
All IRMA attributes are added to the user session. You can reach them with the user.user-session template function. All attributes are under the irma key. For example, if you requested pbdf.pbdf.ageLimits.over12, you can reach the value with irma.pbdf.pbdf.ageLimits.over12.