imported>Aeric |
imported>Aeric |
| (10 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 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 3 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:
| |
| <code><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></code>
| |
| | |
| :* '''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);
| |
| }
| |
