Green Screens Modernization engine UI components use predefined templates based on Bootstrap v4 CSS. In previous posts we wrote about how to create custom templates embeddable within template segments or master index page. This time we will show how to override default component UI templates which will reflect to all screens with a single custom script.
Component templates are stored in a single place - GSTemplates component.
When GSTemplates are executed from browser debug console, following list will print out. List of all registered predefined template blocks used by various GS-Tag elements.
GSTemplates
GSAlert: template
GSApp: template#gs-app
GSAppMobile: template#gs-app
GSCard: template
GSFooterTemplate: template#gs-footer
GSFormGroup_COL_L: template
GSFormGroup_COL_R: template
GSFormGroup_ROW_L: template
GSFormGroup_ROW_R: template
GSInfoBar: template#gs-info
GSMobileTop: template#gs-toolbar
GSModal: template
GSOptions: template
GSSeparator: template
GSSidebar: template
GSSubfile: template#gs-subfile
GSTab: template
GSToolbarTop: template#gs-toolbar
GSTopActions: template#gs-topactions
GSWait: template
As one can notice, each template name is equal to or starts with the name of a component it belongs to. Let's take for an example GSTemplate.GSAlert, it belongs to a GSAlert component.
Complete source within GSTemplate.GSAlert is internally defined as sample below.
const GSAlertTemplate = document.createElement('template');
GSAlertTemplate.innerHTML = `
<div class="row justify-content-md-center">
<div class="col-md-8">
<h5 class="alert" ref="title"> </h5>
</div>
</div>
`;
This, allows us not only to access template programmatically, but also to change it. Try to execute GSTemplates.GSAlert.innerHTML from browser debug console. HTML content from previous example will print out html used by GSAlert component to render UI.
To redefine UI for GSAlert component is to create a simple JavaScript which will be loaded after gslib.min.js. Custom script will set a new modified UI as shown in example below.
GSTemplates.GSAlert.innerHTML = `
<div class="row">
<div class="col-md-8 m-0 p-0">
<span class="alert" ref="title"> </span>
</div>
</div> `;
And that's it!!!!
All GSAlert components on all modernized terminal screens will have a new UI style. Only what is important is to take care about placeholders used by UI components as "ref" attributes etc.
Conclusion
Green Screens Terminal UI templating and its concepts are based on modern web components without requiring any external rendering technologies. No dependencies to server-side frameworks. Still, more significant changes might require to modify Modernization UI library, but that's the reason library is available to our clients in open sourced version giving full control into your hands.