Reusing of UI Definitions: Reusable UI Definitions with Parameters

You can define a reusable UI definition with string parameters, such as a view value, and then provide values for these parameters when you are referencing the reusable UI definition.

Defining a Reusable UI Definition with Parameters

To define parameters in a reusable UI definition, you add the parameter names in the qp-include-parameters tag, which is inside the template tag of the reusable UI definition. You define parameters by using the mustache.js library. For details about the library, see https://github.com/janl/mustache.js.

You can define a parameter as being required (that is, a developer must specify a value for the parameter when the developer inserts the reusable UI definition in a particular form) by using the required modifier for the parameter. You can also specify the default value for a parameter.

To reference the parameters in the tags of the reusable UI definition, you specify the parameter name in double braces, for example, "{{id}}".

The following code shows an example of the Address section. In this example, the id, address-view, and wg-container parameters are required. The caption parameter has the Address string as the default value.

<template>
  <qp-include-parameters
    id.required
    address-view.required
    wg-container.required
    caption="Address">
  </qp-include-parameters>

  <qp-fieldset
    id="{{id}}"
    view.bind="{{address-view}}"
    caption="{{caption}}"
    wg-container="{{wg-container}}"
    >
      <field name="FakeField" unbound>
        <qp-address-lookup class="col-12" view.bind="{{address-view}}">
        </qp-address-lookup>
      </field>
      ...
  </qp-fieldset>
</template>

Inserting a Reusable UI Definition with Parameters

When you want to insert a reusable UI definition, you specify the parameters in the qp-include tag.

The following example shows the insertion of the reusable UI definition for the Address section, whose HTML code is defined in the section above.

<div slot="B">
  <qp-include url="../../../common/forms/form-address/form-address.html"
    id="formA"
    address-view="AddressCurrent"
    wg-container="AddressCurrent_formA"
  ></qp-include>
</div>