Difference between revisions of "AgileApps Components Library for Custom UI Development"

From AgileApps Support Wiki
imported>Aeric
imported>Aeric
(Replaced content with "For information related to Custom UI Development, see [https://docs.webmethods.io/AgileApps/10.13.7/getting_started/introduction/#gsc.tab=0 Custom UI documentation]")
Β 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
=Overview=
For information related to Custom UI Development, see [https://docs.webmethods.io/AgileApps/10.13.7/getting_started/introduction/#gsc.tab=0 Custom UI documentation]
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-i''d="-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'''
<p>Custom Notes-editor component</p>
<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);
}

Latest revision as of 07:39, 1 October 2020

For information related to Custom UI Development, see Custom UI documentation