How to customize the Uplus application
Because the Uplus application is running as a single page application (SPA), it can run on any application server and will load all the functionality from the 'index.html' top level file. Running on the same server as the Pega Platform will avoid cross-origin issues and will also provide the ability to run the Uplus application with a pre-defined set of default case types, removing the need for users to upload a config file.
To customize the Uplus application,
- download the latest war file uplus-wss-.war from the uplus-wss github release distribution or if you want to get the latest version of the code, download the source files from github and copy the contents of the 'docs' folder to the 'uplus' folder and skip to step #5 below)
- copy the war file in the ‘webapps’ folder
- unzip the war file - it should create a uplus-wss_1.3.1 folder
- delete the .war file
- rename the folder to your preference - for example 'uplus'
- change the content of the folders for customization - each industry has its own folder
Uplus can be deployed on a Kubernetes using a docker image. Use 'docker pull richardmarsot/uplus-wss' to download the image
The zip file contains a directory for each industry. Inside each industry folder, apply the following steps to customize the Uplus application:
-
To change the default settings with preloaded configuration, update the file config-settings.js. Note that the default server settings are only used the first time you access the uplus app - If you go to the Settings page and update any settings or upload a new config file, all the configuration will run from your browser (settings are stored in local storage) - To reset your configuration and use the server-side settings, click on 'Reset to default' in the settings page.
-
To customize the logo or images, replace the images in the 'img' folder.
-
To change the default color, update the color in the file 'override.css' file located in the 'css' folder
-
To change the different text sentences, edit the file 'lang-en.js' located in the 'i18n' folder
-
To translate the application in a different language, create a new file 'lang-.js' in the same 'i18n' folder by doing a saveAs of the 'lang-en.js' file - then translate every key into the appropriate language. Once done, edit the settings 'config-settings.js' file located in the 'js' folder and add the language to the 'languages' property. Also add a new key lang_xx='YYY' to all the language files that will point to the name of the language in the current language (search for lang_en). To change the default language, update the property 'defaultlocale' in the same config-settings.js page. After these changes on the server, do not forget to click on 'Reset to default' to wipe out the configuration stored in your browser local storage and reload from the server default config.
Important Note: This change is not needed if you are using the war file provided in the distribution file or using the latest files from the docs folder. the war file already contains the update web.xml to deal with the redirect. see https://github.com/pegasystems/uplus-wss/blob/master/docs/WEB-INF/web.xml
You need to configure your tomcat server to use the 404.html file that is present in the root directory. This file is used to handle browser refresh and redirect to the correct url if the url is not found.
Add a new file called web.xml inside the webapps/uplusapp/WEB-INF folder with the following changes
- To change the account screen, edit the file 'config-flow.js' located in the 'js' folder
In this file you can configure the account picker which is used to display how many services are displayed - just add or remove the json objects in the accountpicker array.
Avoid entering string directly in this file and only use keys - the translation of every key will be in the lang-xx.js file under the i18n folder.
You can also add more items to this list - note that title is the only required attribute - icon, id and desc are optional - the items will be presented on a 3x3 grid - Here is an example when adding more items:
add the localization keys
using a little bit of override CSS you could hide the border around each card and create one around the account-picker group
The Top level menus is configured to show more offers - see retail_bank example - it is possible to set an href attribute to this object - in this case, the href will be used to navigate - this can be used to open a quicklink
By default the recent activity widget will show a list of transactions as defined in the config-flow.js file - the first event is always set to the 15th of the current month so that the activity is not outdated and dynamic - the remaining events are always set two days apart from each other. The events are configured by settings the value of the keys 'recentactivityXXXX_msg' in the language file.
It is possible to change this default behavior and instead define a date and cost for the recent activity widget. Edit the config-flow on your local deployment of the Uplus app and add the attribute 'date' and 'cost' - cost should be a decimal value that will be converted to a currency using the locale of the user.
Here is an example of the changes in the config-flow.js file
The recent activity will render like this in English US
And like this in French
The Uplus app ships a web.xml in the WEB-INF folder that is used to configured the redirect handling when using Tomcat. If you are using nginx, you need to configure the server to correctly handle 404 error so that on browser refresh, the url is correctly routed to the right page. To do so, copy the file '404.html' present in the 'docs' folder of the Uplus app into the root folder of your nginx server and configure the server config file to use this 404.html file using the following changes
For more details - see https://www.cyberciti.biz/faq/howto-nginx-customizing-404-403-error-page/
You can override the override.css file located in the industry folder - For example to restore the retail_bank look and feel to the v1 uplus app, you can use the following CSS:
` div.hero-main { background: url(https://pegawss.web.app/retail_bank/img/hero-1.jpg); background-position: 50% 64%; background-repeat: no-repeat; background-size: cover; height: 700px; margin-bottom: 14px; }
.hero-heading>h1.hero {
color:#FFF;
}
`
here is a snapshot of the css file
You will get the following home page
