Custom Templates

Custom Templates can be displayed within the JSF by using a template object in the schema. The template must be declared at the same level as the JSF component and an object containing a reference to the template must be passed into the JSF component using the [templates] binding.

JSF will communicate that the template component has changed via the (templateEvent) output. This event will return an object with the name of the template followed by a list of the template paths with their current value in JSF and the formControl. This formControl can be used to update the values stored in JSF when a change occurs.

When JSF has finished inserting the template it will send out one (templateEvent) with any existing values (sent in during editMode) that the embedded template can use to set its own initial values.

Property	Value	Use	Example
*type	"template"	Indicates that the schema object is a custom template.	"type": "template"
*name	String	The corresponding label for the form element.	"name": "Form Display Name"
isHidden	boolean	This flag will hide the element from view of the user. However, this can still be programmatically set.	"isHidden": true
isReadOnly	boolean	This property indicates that the input control cannot be changed by the user. Any data within a readonly field will not be returned upon form submission.	"isReadOnly": true
*templateName	String	The name of the template reference value that is passed into the component.	"templateName": "myTemplate"
*targetPaths	array	An array of paths to other JSF properties that should be updated by this template.	"targetPaths": [ "templateValue1", "keys.keyFromTemplate" ]
* = required property

Example Schema:

{
  "template": {
    "type": "object",
    "name": "Template",
    "description": "This section displays template functionality.",
    "properties": {
      "templateVisibleValue": {
        "name": "JSF Visible template value",
        "type": "string",
        "isHidden": false
      },
      "templateDisplay": {
        "name": "My Template",
        "type": "template",
        "isReadOnly": true,
        "templateName": "myTemplate",
        "targetPaths": [
          "template.templateValue",
          "template.templateVisibleValue",
          "template.timesButtonClicked"
        ]
      },
      "templateValue": {
        "name": "Hidden template value",
        "type": "string",
        "isHidden": true
      },
      "timesButtonClicked": {
        "name": "Number of times the button was clicked",
        "type": "integer",
        "isHidden": true
      }
    }
  }
}

HTML where JSF component is created:

<jsf-component
  [schemaData]="schemaData"
  [config]="config"
  [templates]="{ myTemplate: myTemplate }"
  (templateEvent)="templateEvent($event)">
</jsf-component>

<ng-template #myTemplate>
  <app-template-test></app-template-test>
</ng-template>

Template Event Structure:

export interface TemplateEvent {
  key: string;
  targetPaths: TemplateTarget[];
}

export interface TemplateTarget {
  path: string;
  formControl: AbstractControl;
  data: any;
}

Revision History

4.1.0

• Enhancement: Added template type support for custom templates inside schemas