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 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 on 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 will be cssClassList, and DOM Attribute will be css-classlist.
Component Typography All the wrapper of the custom-element should have mat-typography class mat-typography <aac-record-form [objectId]="objectId" [recordId]="recordId" [fieldDisplayMode]="fieldDisplayMode">Loading... </aac-record-form>
Spinner State Change Event Event emitted while the component is making an async call to APIs. It will help to display a custom spinner/loader component in the page. 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 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.