Coding Guidelines and standards for custom elements (ace-elements)

From AgileApps Support Wiki
Guideline Description Example
Component naming standards All the custom tags have to follow the standard naming convention.Tag Name: All the custom tag names start with the prefix ace-. (This is the mark-up tag) tag name: Starting with '<ace-'

<ace-record-form></ace-record-form>,
<ace-table-grid></ace-table-grid>,
<ace-activity-history></ace-activity-history>,
<ace-login></ace-login>.

Input/Attribute Names: Input or attribute should be in camel case inside the component and dash separated in tag name. tag name: Starting with '<ace-'

<ace-record-form object-id="cases" record-id="456546654"></ace-record-form>

Standard Attributes:

style related attribute : css-classlist

Notepad.png

Note: Input parameter is cssClassList, and DOM Attribute is css-classlist.

Component Typography All the wrappers of the custom-element should be in mat-typography class mat-typography
<div class="mat-typography" [ngClass]="cssClasslist">
    <aac-record-form [objectId]="objectId" [recordId]="recordId" [fieldDisplayMode]="fieldDisplayMode">Loading...
    </aac-record-form>
</div>
Spinner State Change Event Event that takes place while the component is making an asynchronous call to APIs. It helps to display a custom spinner/loader component on the page.

Notepad.png

Note: Parameter name is spinnerStateChange.

Parameter details {showSpinner: true}
sample usage

// HTML tag ref
// <ace-record-form id="rfId"></ace-record-form>
//
const rFElem = document.querySelector('#rfId');
rFElem.addEventListener('spinnerStateChange',(event)=>{document.querySelector('#spinner').style.display =
event.detail.showSpinner ? "block":"none"})

Other Custom Events Standard events for the components. For example, onSave, onLoad, onSubmit, and so on have to be published.

Notepad.png

Note: Parameter name is customEventName.

sample usage 1

// HTML tag ref
// <ace-record-form id="rfId"></ace-record-form>
//
const rFElem = document.querySelector('#rfId');
rFElem.addEventListener('customEventName',(event)=>{})
// handle the event data from 'event.detail' property
sample usage 2
//jQuery version
$('#rfId').on("onLoad", function(){}) // onLoad handler
// Multiple events
$('#rfId').on("onLoad onSave onReset", function(){})
// common handler function for onLoad, onSave and onReset.

Accessing the public method of the components This is a mechanism to access the public method of a component.

For this, all the wrapper components have to use the following techniques:
Let us assume that a component has a methodA() which you want to expose outside. So in the wrapper of this component, you should have a @Input directory which links the component method to the outside. You have to call this wrapper method in the JavaScript function.

Component

public methodA(x) { console.log(x) ;}

Wrapper
@Input() accessMethodA = (value) => { this.component.methodA(value) ;}

JavaScript
function callComponentPublicMethod(){ wrapper.accessMethodA('Hello world') ;}

Component Inputs Provide details such as inputs which are optional, which are mandatory, and what is the input format.
Global Routing subscription Whenever the components perform some routing action on the browser, wrapper component should catch the action and use it to trigger some other actions.
Component Wildcard router When there is no URL path matching with the entered URL by user, then a common PageNotFound component should be triggered.
Common lock-component for 400/500 response All the components should maintain the 400/500 response from an API. One common error-component should be used by all the wrappers for the solution.