Coding Guidelines and standards for custom elements (ace-elements)
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
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 <aac-record-form [objectId]="objectId" [recordId]="recordId" [fieldDisplayMode]="fieldDisplayMode">Loading... </aac-record-form>
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.
Parameter details {showSpinner: true}
Note: Parameter name is spinnerStateChange.
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. -
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 Which inputs are optional, which are mandatory, what is the input format. (This explanation will be filled by component wrapper developers)||
Global Routing subscription Whenever the components makes some routing action on the browser, wrapper component should catch the action and used 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 trigger. Common lock-component for 400/500 response All the components should maintain the 400/500 response from API.One common error-component has to be used by all the wrapper for the solution.
