imported>Aeric |
imported>Aeric |
| (8 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 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:
| |
| <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 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 like
| |
| <code>componentReference.addEventListener('saveNote', function(event){ var data = event.details; //. }).</code>
| |
| | |
| '''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);
| |
| }
| |
