Block-Custom HTML References

The Block-Custom HTML control is used to add custom view components to your UI model. You can add your own HTML code and take control over the appearance and function of a screen element in your app view.

This topic explains about how to use the following elements in your custom HTML code:

String interpolation

Interpolation refers to embedding expressions into marked up text. By default, interpolation uses as its delimiter the double curly braces, {{ and }}. If you want to bind a reference value as interpolation, you must specify the reference within curly braces.

Example: <button [title]="{test}"> {{{ test }}} <button/>

In the above example, {{{test}}} represents interpolation. The test is a reference value specified in another UI control.

Attribute binding

You can set the value of an attribute directly with an attribute binding using the notation [ ].

Example:<img [src]="{test}" alt="Aleq" width= "500" height = "100"/>

In the above example, "test" is a reference value specified in another UI control. If the user enters image URL in that UI control, the corresponding image will be displayed in the current HTML element. You must enter the reference values within curly braces { }, whenever you use them in your custom HTML code.

Two-way binding

The two-way binding is used to update the data in both UI and reference variable. Two-way binding sets a specific element property and also listens for an element change event. Angular offers a special two-way data binding syntax [()] for this purpose. The [()] syntax combines the brackets of property binding [], with the parentheses of event binding ().

Example:
<input id="test1" type="text" [(ngModel)]="{test}"/>
<input id="test1" type="text" [(ngModel)]="{test}"/>

In the above example, the input given in one text box reflects in the other.

You cannot use [(ngModel)] inside a <form> </form> tag

Attribute directives

Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components. NgClass is one of the most common attribute directive.

Eample:
<button class="btn" [ngClass]="{'btn-warning':
{radio}
== 'Option1', 'btn-danger': {radio} == 'Option2'}">
Submit
</button>

In the above example, the button has the "btn" class applied. The classes "btn-warning" and "btn-danger" are applied dynamically based on the condition. The "radio" is the variable specific in the Selected Radio Reference setting for Selector-Radio Group control. So, when the user selects Option 1 the "btn-warning" class is applied and when the user selects Option 2 the "btn-danger" is applied.

Structural directives

Structural directives are used for condition based rendering of HTML. Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, and manipulating the host elements to which they are attached.

The following directives are commonly used structural directives:

  • NgIf: Conditionally creates or destroys sub-views from the template.
  • NgFor: Repeats a node for each item in a list.
  • NgSwitch: A set of directives that switch among alternative options.

ngIf

Used for allowing or preventing something to render based on a condition.

You can add or remove an element from the DOM by applying an NgIf directive to a host element. Bind the directive to a condition expression like radio in the below example.

Example:
<ol>
<li *ngIf="{radio} == 'Option1'"> Mango </li>
<li *ngIf="{radio} == 'Option2'"> Grapes </li>
<li *ngIf="{radio} == 'Option3'"> Banana </li>
</ol>

ngFor

NgFor is a repeater directive - a way to present a list of items. You define a block of HTML that defines how a single item should be displayed and then you tell Angular to use that block as a template for rendering each item in the list. The text assigned to *ngFor is the instruction that guides the repeater process.

The following example shows NgFor applied to a simple list. Ensure that you use asterisk (*) in front of ngFor.

Example:
<ul>
<li *ngFor="let item of {selectedItems}"> {{ item.name }}</li>
</ul>

ngSwitchCase

NgSwitch is similar to JavaScript switch statement. It displays one element from among several possible elements, based on a switch condition. Angular puts only the selected element into the DOM.

NgSwitch is a set of three cooperating directives - NgSwitch, NgSwitchCase, and NgSwitchDefault as in the following example.

Example:
<ul [ngswitch]="{radio}">
<li *ngswitchcase="'Option1'">Mango</li>
<li *ngswitchcase="'Option2'">Apple</li>
<li *ngswitchcase="'Option3'">Grapes</li>
<li *ngswitchdefault>Default Fruit</li>
</ul>

Custom Element Actions

You can generate actions for custom HTML elements, using the argument name in argument parameter to pass arguments to the event handler function generated by script model using the argument name .

In the below example, if user configures click action on ul tag, then the "employee" object which is passed in the arguments will be available in the function task in Script Model.

Example:
<ul *ngFor="let employee of {employees}" arguments="employee">
<li> Test 1</li>
<li> Test 2</li>
</ul>

You can generate actions for each element within your custom HTML code. After adding the custom HTML code into your Custom HTML control, the elements become visible in your UI model editor. Select an element, navigate to the Settings tab, click Actions and create a script model.

When a script model is associated with any HTML element, an Action ID is generated and appended to the Custom HTML code.

In the above example, if you create a script model for the HTML element <li>Test 1</li> an Action ID is auto generated and appended to the corresponding HTML element as shown below:

Example:
<ul *ngFor="let employee of {employees}" arguments="employee">
<li um-action-id="9be329154e5f"> Test 1</li>
<li> Test 2</li>
</ul>

If you want to bind the same action to any other elements within the same Custom HTML control you can copy the Actions ID to the required element HTML code.

In the above example, if you want to generate the same action for <li> Test 2</li> as well, you can simply copy the Action ID as shown below instead of creating the same script model again.

Example:
<ul *ngFor="let employee of {employees}" arguments="employee">
<li um-action-id="9be329154e5f"> Test 1</li>
<li um-action-id="9be329154e5f"> Test 2</li>
</ul>

Construct View Frames

Using custom HTML control, you can embed one view into another view. This helps in modularization of views within a UI model.

In this example, the UI model includes two views with the names - View1 and View2. The View 1 includes custom HTML control. When you preview the UI model, the View2 must be displayed embedded into View1.

You can construct the View Frame in one of the following ways:

  1. To directly embed and always display View2 in View1, insert the following tag in your custom HTML control:

    <app-view2></app-view2>;

    You must specify the view name in simple case. In the above example, the view name is "View2" which is specified in simple case as "view2" when used in the HTML tag.

  2. To embed and conditionally display View2 in View 1 using the UI controls such as Selector-Checkbox or Selector-Slidetoggle which returns boolean value in the reference, insert the following tag in your custom HTML control:

    <app-view2 *ngif="{toggle_reference}"></app-view2>;

    In this example, Selector-Slidetoggle control is used in inserted in View1 and toggle_reference is specified as value in Reference field under Settings.

    Click Preview and click the Selector-Slidetoggle control to show or hide View 1 embedded into View2.

  3. To embed and conditionally display View2 in View1 using other UI controls that includes a Function Task in Script Model to bind a reference and return boolean value, perform the following steps:
    1. Click Add References and create a global variable to your View 1. You must specify Empty Boolean as Type. If Boolean is specified as Type, select True or False as Value. If True is selected, by default the View2 is displayed in opened state. If False is selected, by default the View2 is displayed in closed state. If Empty is specified as Type, by default the View2 is displayed in closed state always.
    2. Add the below line in Function Body of the Script Task corresponding to the UI control to which you want to bind the reference. In this example, the script model is created in the Actions of Single-Button control in View1.

      3. {button_reference} = !{button_reference};

      The button_reference is the reference value specified in global references (Add References) of View1.

    3. Add the following tag in your custom HTML control:

      4. <app-view2 *ngif="{button_refernece}"></app-view2>;

    Click Preview and click the Single-Button control to show or hide View2 embedded into View1.