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 Component's standard events (e.g: onSave, onLoad, onSubmit) has to be published. Note: parameter name is customEventName.||sample usage // 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 component's Public methods This is a mechanism to access public method of the component. For that all the wrapper component has to follow the below techniques. Suppose in component has a methodA() which has to be exposed outside. So in wrapper of this component should has a @Input directory which will link the component method to the outside. And in JavaScript function this wrapper method has to be called.||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.
