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 Events- Output is in an event form and is triggered by the component. Necessary information is available in the details property of the event. To get the output, you need to first register the output-event with the DOM through addEventListener and take necessary actions when the event is triggered. Following example provides more information:

If we are using the <ace-notes-editor></ace-notes-editor> component, and we know that it triggers an output-event in 'saveNote' name. We register this event in DOM as follows:

   componentReference.addEventListener('saveNote', function(event){ var data = event.details; //. }).

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: You can apply the external style on any of the components using 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); }