Skip to content

View Creation: Handlebars

PeterShuck edited this page May 5, 2017 · 9 revisions

Applies to

Akumina Foundation

Overview

When we create views within the Akumina Framework, we need to leverage Handlebars to incorporate tokens that are accessible to our Widget Definitions. Within the Akumina Framework, only the handlebars icons need be concerned. We automatically compile the template within the Akumina Widget Framework. Below are common use cases for Handlebars within Akumina Widget Templates.

View Icon

An embedded Handlebars expression simply uses {{ content, followed by a }}. In the example below we use Handlebars to display the Title property of data passed to the view by an Akumina Widget.

<div class="myClass">
	<h1>{{Title}}</h1>
</div>

If-Else Statement

Handlebars expression can also be used to incorporate logic into a view. An if-else statement follows the pattern below

{{#if boolean property from widget }} if block {{else}} else block {{/if}}

In the following example, we read the HasTitle property from the widget data and display the value of the Title property only if HasTitle is true.

<div class="myClass">
	{{#if HasTitle}}
	<h1>{{Title}}</h1>
	{{else}}
	<h3>No Title</h3>
	{{/if}}
</div>

Loop

Handlebars expressions can loop through an array passed to the view within the Widget data. A loop follows the pattern below

{{#Array Object Name}} looped block {{/Array Object Name}}

In the following example, we loop through the array object, Items, passed to us from the Widget Data. Within each item we display the value of the item's Title property.

<div class="myClass">
	{{#Items}}
	<div class="myItem">
		<h1>{{Title}}</h1>
	</div>
	{{/Items}}
</div>

HTML Escaping

Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash", {{{.

In the example below we use Handlebars to display the Title property of data passed to the view by an Akumina Widget, without escaping HTML values.

<div class="myClass">
	<h1>{{{Title}}}</h1>
</div>

QuickLinks

Latest Release Notes

Akumina Developer Training

Akumina Learning Center

Akumina and SPFx

Framework Integration Points

4.0.0.0 Overview

Custom Widgets

Implementing Akumina

Digital Workplace Core Site Quick Start

Widget Development

Development Concepts

Deployment

Administration

Developing Solutions

CAML

Clone this wiki locally
You can’t perform that action at this time.