AgileApps Components Library for Custom UI Development

Overview

This feature enables the designers to use the AgileApps components (run-time UI components) to create custom applications. All the basic components are made available as a separate module, package, or library. From here, you can pick the components as per your requirements. Each component has its own input and output behavior.

Component Library

• Login form component.
• Record form component.
• Record view component.
• Table grid component.
• Notes editor component.
• Activity history component.
• Task view component.
• Process view component.
• Attachment component.
• Dashboard component.

Component common structure overview

• Tag-name-You can use all the components by its corresponding tag name. The tag-name syntax details are available in Smart Components for AgileApps.

• Tag-attribute- All the tags have attributes. Some of these attributes are mandatory. These attributes are classified into three categories, namely Input Attributes, Output Events, and Component Instance Methods.

• Input-attribute: Most frequently used input-attributes are object-id and record-id. These attributes are native HTML tag attributes and are used along with the normal HTML tag attributes. Some attributes like css-classlist are optional, and is used to apply external style to the component. For example:

   <ace-record-form object-id="cases" record-id="-1" id="recordForm" css-classlist="bg-white border border-secondary px-4 py-4"></ace-record-form>

• Output-attribute: Output is in event form, triggered by the component. Necessary output-data/information will be available in the 'details' property of the event. To get the output, first of all consumer need to register the output-event with the DOM by 'addEventListener' and take the necessary action when the event will be triggered. Below example gives better understanding.

Example: Suppose we are going to consume <ace-notes-editor></ace-notes-editor> component, and we have the pre-knowledge that it trigger output-event in 'saveNote' name (component and its corresponding output-events are described in Design Document). So we register this event in DOM like componentReference.addEventListener('saveNote', function(event){ var data = event.details; // do other staffs. }).

Example of output binding <ace-notes-editor id="ace-notes-editor" object-id="xxxxxxxxxxxxxx" record-id="xxxxxxxxxx" action-panel="hide" action-button="evenly"></ace-notes-editor> const notesEditor = document.querySelector('#ace-notes-editor'); notesEditor.addEventListener('saveNote', function (event) { var data = event.details; console.log(event.details) });

• Style-attribute: Consumer can apply the external style on the component through the style-attribute.

Example of style-attribute <ace-notes-editor css-classlist="bg-white border border-secondary px-4 py-4" object-id="xxxxxxxxxxx" record-id="xxxxxxxxxxxx" action-panel="hide" action-button="evenly"> </ace-notes-editor>

Note: 1: Here bg-white, border, border-secondary, px-4, py-4 all are consumer side style class, when these class pass to the component, component will override these style on it's own. 2: Some component has other attributes which are used to hide-show or positioning of the part of the component. Details are available in Design Document.

Example: Say notes-editor has two extra optional attributes namely action-panel and action-button which are used to

• show-hide the SAVE, CANCEL button panel.
• appear this panel in TOP or BOTTOM.
• SAVE, CANCEL button can positioned in left or right or in equal gap, in between gap, etc. (For details see Design Document).

Instance-public-method: Consumer can directly access the component's public methods to achieve some custom behavior over the component. (Components and its corresponding public methods are described in Design Document). Example: Say notes-editor component has 3 public methods which can be access by consumers, these are namely saveNotes(), resetNotes(), inputContent(). so consumer can use these 3 as per their requirement.

Example of public method

Custom Notes-editor component

<button onclick="saveNote()">SAVE Notes</button> <button onclick="cancelNote()">Cancel Notes</button> <button onclick="updateNotes()">Update Content</button> <ace-notes-editor id="ace-notes-editor" object-id="xxxxxxxxxxxxxx" record-id="xxxxxxxxxx" action-panel="hide" action-button="evenly"></ace-notes-editor> const notesEditor = document.querySelector('#ace-notes-editor'); function saveNote() { notesEditor.saveNotes(); } function cancelNote() { notesEditor.resetNotes(); } function updateNotes() { const noteObj = { subject: 'My First Note', content: 'Hello world !!!' }; notesEditor.inputContent(noteObj); }