HtmlView

Label: :IA_Function
Property: type: HtmlView
Inherits from: Function and View

View type function that generates HTML from a template and received data, and inserts it into the specified area and container.

• HtmlView

  • Parameters

  • Outgoing triggers

    • Type: click

    • Type: context

    • Type: submit

  • Custom functionality

    • Trigger type click

      • Example

    • Forms

      • Example

    • Custom trigger events

      • Example

    • Copy to clipboard

      • Examples

    • Visual components

      • Example

  • HtmlView Examples

    • Lists

Parameters

Key	Description	Default value	Possible values
css	CSS style definitions inserted in the generated HTML
data	Data that is injected in the template
lists	Collections of data, will be grouped into objects to be rendered by mustache
template	[Required] Mustache template

Outgoing triggers

Type: click

Occurrence: Html elements with the trigger-click class will execute a click trigger when clicked.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
data	Data-attributes of the clicked element (e.g. <div data-myProperty="myValue" class="trigger-click"> results in {'myProperty':'myValue'})	object

---

Type: context

Occurrence: Html elements with a context-[menu-name] class will open a context menu defined by the context menu triggers connected to the HtmlView (more info). Clicking one of the context menu items will fire the context trigger event.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
menu	Name of the menu, specified in the class (e.g. class="context-myMenu" will provide the menu name myMenu.	object
target	Data-attributes of the right-clicked element. (e.g. <div data-myProperty="myValue" class="trigger-click"> results in {'myProperty':'myValue'})	object

---

Type: submit

Occurrence: Form elements will fire a submit trigger event when submitted.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
form	Name of the form (from the name attribute).	object
data	Submitted data	object

Custom functionality

The HtmlView has built-in functionality that can be accessed using html classes.

Trigger type click

Add the class trigger-click to an element and it will trigger a Trigger with type: click when the element is clicked. Extra data can be added using the data- attributes.

Example

HtmlView template:

<div class="trigger-click" data-name="John" data-age="39"></div>

Resulting trigger event when clicked:

{
	"type": "click",
	"data": {
		"name": "John",
		"age": "39"
	}
}

Forms

Form elements fire submit Triggers when they are submitted.

Example

HtmlView template:

<form>
	<input type="text" name="firstname"></input>
</form>

Resulting trigger event when submitted:

{
	"type": "submit",
	"data": {
		"name": "firstname"
	}
}

Adding the class "close-on-submit" to the <form> element will close the HtmlView when the form is submitted:

<form class="close-on-submit">

Adding a property "submit-on-change" to any of the form's elements will submit the form when its value is changed. Submission can be debounced (preventing multiple submissions within a timeframe) by setting the property's value (in milliseconds). Defaults to 500ms. Example:

<form>
	<input submit-on-change name="input1"></input>
	<input submit-on-change="500" name="input2"></input>
</form>

Custom trigger events

The HtmlView listens for interactor-event DOM events on any containing element. When the HtmlView receives this event an InterActor trigger event is triggered with specified parameter data.

Example

HtmlView template:

	<div>
		<button type="button" class="trigger-custom-event">Click me</button>
	</div>

	<script type="text/javascript">
		$(function() {
			$('.trigger-custom-event').click(function() {
				$(this).trigger('interactor-event', {
					customData: 'custom value'
					type: 'custom-event'
				});
			});
		});
	</script>

When the button is clicked the HtmlView will execute a trigger with the following event data:

{
	type: 'custom-event',
	customData: 'custom value'
}

Copy to clipboard

The HtmlView can copy pieces of text to clipboard with a single click. Create a div with the property to-clipboard and its value will be copied to clipboard when the div is clicked. Also formatted text can be copied, if the data-type attribute is set to text/html.

Examples

<div to-clipboard="This text will be copied">Copy to clipboard</div>
<div data-type="text/html" to-clipboard="<b>This formatted text</b> will be <i>copied</i> to <img src='clipboard.png'">Copy to clipboard</div>

Visual components

Visual components are custom html elements that can be added and will be replaced by more complex structures and logic. Available components are listed here.

Example

This example will create a wysiwyg text editor inside the HtmlView:

<ia-text-editor name="myField"></ia-text-editor>

HtmlView Examples

Lists

The lists parameter packs multiple lists into one list of objects. For example, you can make a list of objects with structure {id: ... , name: ...}, by setting the lists parameter like this:

lists.people.name: ['Peter', 'Suzan', 'Hank', 'Karen']
lists.people.age: [57,24,63,35],

In the template parameter, you can then use this list of objects:

{{#lists.people}}
    <li>{{name}} - {{age}}</li>
{{/lists.people}}