imported>Aeric |
imported>Aeric |
| (2 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 as follows:
| |
| <code>componentReference.addEventListener('saveNote', function(event){ var data = event.details; //. }).</code>
| |
| | |
| ::'''Example of output binding'''
| |
| <nowiki>''<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)
| |
| });''
| |
| </nowiki>
| |
| | |
| :* '''Style-attribute''': You can apply the external style on any of the components using '''css-classlist'''.
| |
| '''Example of style-attribute'''
| |
| | |
| <nowiki>
| |
| <ace-notes-editor css-classlist="bg-white border border-secondary px-4 py-4" object-id="xxxxxxxxxxx" record-id="xxxxxxxxxxxx" action-panel="hide"<br>
| |
| action-button="evenly"></ace-notes-editor>
| |
| </nowiki>
| |
| | |
| Here ''bg-white'', ''border'', ''border-secondary'', ''px-4'', and ''py-4'' are user-specific style classes. When you pass these classes to the component, it will override the styles.
| |
| | |
| Some components have other attributes that you can use to hide, show, or position the component.
| |
| | |
| For example, Notes Editor has two extra optional attributes namely '''action-panel''' and '''action-button''' which are used to
| |
| :* show or hide the SAVE and CANCEL buttons.
| |
| :* show this SAVE and CANCEL buttons on the top or bottom of the component.
| |
| :* The SAVE and CANCEL buttons can be positioned in the left, right, with equal gap, and in between the spaces.
| |
| | |
| '''Instance-public-method'''- You can access the public methods of the component to achieve some custom behavior over the component.
| |
| '''Example''': <br>
| |
| Notes Editor component has 3 public methods which you can access. These are namely saveNotes(), resetNotes(), inputContent().
| |
| You can use these three as per your requirement.
| |
| | |
| '''Example of public method'''
| |
| <nowiki>
| |
| <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);
| |
| }
| |
| </nowiki>
| |
