AgileApps Support Wiki Pre Release

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]")
Β 
(17 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. }).

Latest revision as of 07:39, 1 October 2020

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