In the Typescript section of a Custom Card you can add your logical calculation or validation code related to work items and data fields.

In many circumstances you will also need to add validation. The best way to add validation is by using the ngOnInit method. Once you submit a work item it will be checked for any validation errors. If there is a validation error, the work item submission will be paused until the error is resolved.

If you look at your Typescript you will see that there are few lines of code which have been created by default, as well as a few properties such as Option, Packet and IsExpanded.

1. Option - The Option property contains two properties: Packet and Card.

   Card - This property contains the information about the card including which fields are attached to this card.

   Packet - The Packet property contains all the information related to the work item. Use your Swagger UI, available for your instance at (https://<your-work-manager-url>/webapi/) and look for the following APIs to see further details: Case/GetCase Ticket/GetTicket Action/GetAction

In your Typescript section there will be generated/auto- code and it will also contain following ngOnInit method:

ngOnInit() {
        //YOUR CUSTOM CODE BEGINS
        
        //YOUR CUSTOM CODE ENDS
}

Now let us take a few examples to understand how we can add runtime validation.

1. Required Validation

ngOnInit() {
        //YOUR CUSTOM CODE BEGINS

        this.Option.Card.Validators.push(function (packet, card) {
            // YOUR VALIDATION
            const errors = [];
            if (
                packet.DataFields.Policy === null ||
                packet.DataFields.Policy === ""
            ) {
                errors.push('Please enter a policy number');
            }
            return WorkItemValidator.ERRORS(card, errors);
        });

        //YOUR CUSTOM CODE ENDS
    }

2. Range Validation

ngOnInit() {
        //YOUR CUSTOM CODE BEGINS

        this.Option.Card.Validators.push(function (packet, card) {
            // YOUR VALIDATION
            const errors = [];
            if (
                packet.DataFields.Policy > 0 ||
                packet.DataFields.Policy < 9999
            ) {
                errors.push('Policy number must be between 1 - 9999.');
            }
            return WorkItemValidator.ERRORS(card, errors);
        });

        //YOUR CUSTOM CODE ENDS
    }

3. Complex Validation

ngOnInit() {
        //YOUR CUSTOM CODE BEGINS

        this.Option.Card.Validators.push(function (packet, card) {
            // YOUR VALIDATION
            const errors = [];
            if (packet.ProcessType === 1) { //for case type work item
                if (
                    packet.DataFields.Policy > 0 ||
                    packet.DataFields.Policy < 99
                ) {
                    errors.push('Policy number must be between 1 - 99.');
                }
            } else if (packet.ProcessType === 2) { //for ticket type work item
                if (
                    packet.DataFields.Policy > 100 ||
                    packet.DataFields.Policy < 199
                ) {
                    errors.push('Policy number must be between 100 - 199.');
                }
            } else { //for action type work item
                if (
                    packet.DataFields.Policy > 200 ||
                    packet.DataFields.Policy < 299
                ) {
                    errors.push('Policy number must be between 200 - 299.');
                }
            }

            return WorkItemValidator.ERRORS(card, errors);
        });

        //YOUR CUSTOM CODE ENDS
    }

In Enate you can add custom content into your Tickets, Cases & Actions. This custom content is displayed via Custom Cards which can be set to display in the main section of the work item, and also as a section of the side panel on the right side of the screen.

You can instantly create cards of your custom data fields or you can create Advanced Custom Cards that can be designed with HTML, JavaScript or CSS to show richer content such as external systems & webforms.

To create an Advanced Custom Card, select the 'Advanced' option in the Custom Card screen. This will allow you to add HTML, Typescript and CSS.

You will first be presented with a warning message highlighting that you're responsible for the errors / unexpected behaviour that may occur from your bespoke code.

You can revert back at any time by switching the customized setting back to off - this will remove any custom code and return the card to its original form.

Check out the following sections for explanations for how they are structured plus some examples of standard content you may wish to use..

You can check out our Github section that provides you with sample code integrations for Advanced Custom Cards here:

In the CSS section can define your stylesheet information.

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/