imported>Aeric |
imported>Aeric |
| (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);
| |
| }
| |
