AgileApps Components Library for Custom UI Development

Overview

This feature enables the consumers to consume the AgileApp components (run time ui-components) in any other applications. All the basic important components are made available as a separate module/package/library, from where you can pick the components as per your requirements. Each component has its own input and output behavior. Following are the details of all the published components:

Requirement

The platform UI frame work needs to be upgraded to the 7.x version along with all the dependencies.

Business Requirements

The platform UI framework needs to be upgraded from 5.x series to 7.x series. This activity is expected to happen every year, or every six months depends on the situation.

Restriction, Limitation and Constraints

• The visual look and feel of the components are not exactly same as in AgileApps application.
• All the functionalities and features should work as in the Application.
• The accessibility aspects has to be maintained as before.

Installation

Installation of the selected products

First need to upgrade the version from 5.x to 7.x and after that to get the published custom-components, there are new package dependencies to be introduced in this activity. Following are details:

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: All the components can be consume by its corresponding tag name. Details of these tag-name syntax are discussed in Design documents.

Tag-attribute: All these tag has some attributes, some of these are mandatory, some are optional. Details of these attributes are discussed in Design documents. These attributes may classified into 3 categories, namely Input-attribute, Output-attribute, Style-attribute.

• Input-attribute: Most frequently used input-attributes are object-id and record-id, these attributes are as like as native HTML tag attributes and they are used along with the normal HTML tag attributes. Some of the attributes are optional like css-classlist. which is used to apply external style to the component. 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

Notes-editor

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); }