Advanced Custom Cards

If you want your Custom Card to contain bespoke content, you can select the 'Customized' option. 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.

Please Note: Custom Cards in Enate execute in Angular 10. Customers who use or are developing advanced custom card content should review the changelog of Angular 10 (https://github.com/angular/angular/blob/master/CHANGELOG.md) for changes that may affect their custom code.

Selecting the 'Customized' option will will expose HTML, Typescript and CSS tabs on screen.

When you click on one of these tabs, you will see the existing auto-generated code for the Custom Card. You can adjust / overwrite this code as desired.

Attribute	Description
HTML	The HTML Code will populate the Custom Data Fields on the Ticket/Case/Action. Also specifies the input format in which the data needs to be added. If you reference a custom data field in the HTML for a card, the field must be added to the card in order to work.
Typescript	The Typescript will do the binding of data and adjust the HTML before rendering it to the webpage. It can also perform the validations where it can highlight the mandatory fields.
CSS	Deals with styling required for the HTML; example hiding the up/down arrow on a number field control etc.

When you update the Custom Card by adding new Custom Data Fields to it, you will have to disable and re-enable the 'Customized' toggle option in order to generate the customised code for the new fields.

You can see what edits have been made to the Custom Card and when, as well as when the Custom Card was created, and even when a Custom Card was deleted by clicking on the Show Activity button.

Custom Card Code Examples

Check out the Custom Card Code section of the Enate Extensions area to learn more about the code you can write and how to interact with data fields and validation.