Custom Card HTML

The HTML section is where you can build your UI. We recommend visiting following articles in the Angular.io help files first to learn about how templates work.

• Template Syntax

• Interpolation

• Template Statements

• Property Binding

• Attribute Binding

• Event Binding

• Two-Way Binding

Custom Card Directives - View & Update Data Fields

We have created a few directives for different data type fields which allow you to see and update the data field value. Please note that this directive is compatible with the 'disable state', meaning that if a work item is not editable then such fields will be in read-only mode and the user will not be able to update data field values.

1. For Boolean Fields

<en8-checkbox 
    [(ngModel)]="Packet.DataFields.model"
    [Option]="option">
</en8-checkbox>

2. Date & Time Fields

<en8-date-time 
    [dateOnly]="boolean" 
    [(ngModel)]="Packet.DataFields.model" 
    [Option]="option">
</en8-date-time>

3. Email Address Fields

<en8-email-address 
    [(ngModel)]="Packet.DataFields.model"
    [Option] "option">
</en8-email-address>

4. List Field

<en8-list
    [(ngModel)]="packet.datafields.model"
    [options]="options">
</en8-list>

5. Long Text Fields

<en8-long-text
    [(ngModel)]="Packet.DataFields.model"
    [Option]="option">
</en8-long-text>

6. Number Fields

<en8-number-input
    [step]="stepAmount"
    [(ngModel)]="Packet.DataFields.model"
    [Option]="option">
</en8-number-input>

7. Text Fields

<en8-short-text 
    [(ngModel)]="Packet.DataFields.model" 
    [Option]="option">
</en8-short-text>

Sample HTML Code

Here are a couple of examples of HTML code you can write within a Custom Card

1. Add Input control for text field with basic HTML input control:

<div class="form-group">
   <label>
      {{Option?.Card.DataFieldsSchema.model?.Name}}
   </label>
   <input
      [(ngModel)]="Packet.DataFields.model" />
</div>

2. Add Input control for text field with directive control:

<div class="form-group">
   <label>
       {{Option?.Card.DataFieldsSchema.model?.Name}}
   </label>
   <en8-short-text 
       [(ngModel)]="Packet.DataFields.model" 
       [Option]="option">
   </en8-short-text>
 </div>

Twitter-bootstrap version 4.x.x is being used as as a base CSS, so you can use any component class in your HTML elements and CSS will be applied at runtime. For more information about this, please go to https://getbootstrap.com/docs/4.6/getting-started/introduction/