EXTENSIBLE POINTS IN GUI TIER
This article provide the guidelines for UI
User Interface Extensibility.
Theme and Brand
- SCSS Variables are available for the modifications. You can change the variables available in variable.scss located at <USER_SEGMENT>/scss/_base folder. In this file you can override the variable values which are present in framework/scss/_base/_variable.scss. We are not allowing changes in framework file. Same functionality you can achieve by the Branding.
- We are not allowing adding new new styles in the core UI.
- For the Images you are free to do modifications.
Component Extensibility
- Framework Elements like (header,dashboard, menu etc ) are not available for the modification and customization.
- All components available under component folder are available for the extension.
Adding New and Overriding Existing Components
If you want to add new component place that component in <CHANNEL_ROOT_PATH>/extensions/components. It follow the same structure which is present in components folder. Same thing is applicable for the existing components. If you want to change anything then copy that component and place it extensions/components folder with the same structure.
If resource bundle needs to change for that component place related resource bundle in <CHANNEL_ROOT_PATH>/extensions/resources location. Structure remain same for <CHANNEL_ROOT_PATH>/resources and <CHANNEL_ROOT_PATH>/extensions/resources folder. Make sure that you updated the resource bundle path in your component.
If any component is present in <CHANNEL_ROOT_PATH>/extensions/components will take precedence over the <CHANNEL_ROOT_PATH>/components. For it we maintaining the list of components available in extensions in <CHANNEL_ROOT_PATH>/extensions/extension.json. In this file user should provide the list of all the components. For example:
{
"components" : ["api/internal-account-input"]
}
If newly created component needs the styles put related style in <CHANNEL_ROOT_PATH>/scss/_<componentName>.scss and import this file in <CHANNEL_ROOT_PATH>/scss/_extension.scss.
Add / Modify Validations
All the validation available in the application are maintained in <CHANNEL_ROOT_PATH>/framework/js/base-models/validations/obdx-locale.js. Implementer can override and add new validations in the application without changing this file. An extension hook is given at : <CHANNEL_ROOT_PATH>/extensions/validations/obdx-locale.js
In this file Implementer can add or override validations.
For Example: The pattern to be updated can be found corresponding to the input field from the respective HTML. If you need to change the pattern which validate mobile number. Add updated pattern in this file as below.
Calling Custom REST Service
In implementation if any new services are written by implementer it has been directed to change the context root for new REST to digx/cz/v1. For supporting it from the UI, implementer has to pass cz/v1 in the version field of the AJAX setting from his model.
For example see the snippet below:
Dashboard and JSON context extension
For every application you can override following three properties
- User Type: Type of user
- Context: folder location from which json will be picked
- Dashboard: The dashboard to be loaded for a particular Application Role.
To evaluate these parameters there are three respective functions and one array in <CHANNEL_ROOT_PATH>/extensions/override/extensions.js file
customRoles Array,
Description,
Add any custom Application Roles created in this array as string values.
evaluateUserType function,
Arguments ( roles: [])
roles[] (array) will contain all the roles mapped to the user
defaultSegment (string) will contain system evaluated default segment
Return Value (String),
Should return string representing what is the segment for respective component (possible values: ANON | CORPADMIN | RETAIL | CORP | ADMIN)
Description,
If you want to change user type for your application, you can do so by implementing this function and return required user type for your application.
evaluateContext function,
Arguments ( segment , roles )
roles[] (array) will contain all the roles mapped to the user
segment (string) will contain evaluated user segment
Return Value (String)
Should return string representing what is the context for respective component
(Possible values: index | retail | corporate | admin | corp-admin or any custom value from CHANNEL_ROOT)
Description,
This function will set context for your components to fetch json artifacts from correct folder. Return possible value and then json will be fetch from respective location. Using this you can specify menu for your context. For example, if you have a new application role as SpecialMaker, you need to return fully qualified name from CHANNEL_ROOT, as “extensions/SpecialMaker”.
Please note that all the JSON lookup will change for the application. For this example above, you would copy corporate/json to extensions/SpecialMaker/json.
Also, new location for menu.json will be “extensions/SpecialMaker/json/menu.json”
evaluateDashboard function,
Arguments ( roles , rolesList )
role (String) will contain the first application role matched from customRole
array.
rolesList (Array[]) will contain all the application roles assigned to a user.
Return Value (String)
Should return string representing what is the dashboard required.
Possible values are (grouped by enterprise role):
- Retail: “dashboard”, “term-deposits”, “demand-deposits”, “loans”, “trends”, “cards”
- Corporate: “maker”, “approver”, “viewer”, “term-deposits”, “demand-deposits”, “loans”
- Admin: “approver”, “maker”, “checker”, “dashboard”, “configurations”
- Corporate Admin: “approver”, “checker”, “maker”, “dashboard”
Description,
This function will set dashboard for your custom application role to be one of the shipped dashboards.
Note:
• Core functionality of Framework Elements like (header, dashboard, menu etc.) are not available for the modification. You can customize menu options.
• If any component is present in <CHANNEL_ROOT_PATH>/extensions/components will take precedence over the <CHANNEL_ROOT_PATH>/components.
• All components available under component folder are available for the extension