The purpose of this module is to demonstrate customisation of the user interface and support for localisation. |
This lab requires you have access to SSO and CustomerID administrative interfaces. |
The following image shows all the elements that can be customised in a SSO/CustomerID page:
The following image is an example of a real user interface created by a UK customer, Brighton & Hove City Council. Observe and compare it with the previous image.
Now we'll have several exercises in which you will customise the user interface of the installation on your own computers.
1. Add new template reference to
C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\template.index
smartplan = templates/smartplan.properties |
2. Create new UI Template
In C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\templates\ copy the file default.properties to smartplan.properties.
Add the following line to smartplan.properties
logo.svg = /resource/smartplan.svg |
3. Copy smartplan.svg to c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\resources\. First you have to create subdirectory \resources
md "c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\resources\" copy "\\ubidemo.com\Ubidemo\Software\IAM Academy\smartplan.svg" "c:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\resources\" |
smartplan.svg = resources/smartplan.svg |
1. Now add the new template to Smartplan application. This will assign all your modifications (saved as template "smartplan") to the SmartPlan application, which controls the login user interface. On SSO Management console, open: SmartPlan, Applications and SmartPlan Application. Write smartplan in the field "UI Template Names." Click "Update."
2. Also, add the template to the CustomerID Adminstration interface.
The CustomerID Administration application is located in the "eIDM Services" site, under Applications. It is called eidm2.
Before:
After:
Press Update.
3. Finally, restart UbiloginServer service. The changes can take a few minutes to take effect.
In the future, you can follow the same steps to add a template for any application.
Go to SmartPlan application to verify the changes in the login screen:
http://localhost:8090/smartplanapplication/
3. Go to Customer ID user interface.
https://login.smartplan.com:7443/eidm2/wf/admin
The user interface will change from blue to orange elements:
Modify CustomerID's favicon
Copy the new favicon.ico file from the IAM Academy Software folder on your Desktop into C:\Program Files\Ubisecure\customerid\application\custom\favicon.ico
copy "\\ubidemo.com\Ubidemo\Software\IAM Academy\favicon.ico" "C:\Program Files\Ubisecure\customerid\application\custom\" |
In order to modify CustomerID's default logo, you must use a PNG/JPG file. SVG is not a valid format.
Copy and rename the logo file smartplan.png from the IAM Academy Software folder on your Desktop to C:\Program Files\Ubisecure\customerid\application\custom\logo.png
copy "\\ubidemo.com\Ubidemo\Software\IAM Academy\smartplan.png" "C:\Program Files\Ubisecure\customerid\application\custom\logo.png" |
1. Restart the Wildfly service.
2. Reload the Customer ID user interface window. Note! You might have to clear the browser cache and restart the browser before modifications take effect.
Here you can see some tips and tricks to get rid of the old favicon icons and replace them with new ones. |
Login screen has the following customisation options:
message.index
file holds an index of UI message files. Ubisecure SSO comes pre-configured with default (English) texts for all supplied authentication methods. To override the default uas, or errors messages, add an entry named uas, or errors to message.index.This is for Swedish:
uas = messages/uas.properties errors = messages/errors.properties uas_sv = messages/uas_sv.properties errors_sv = messages/errors_sv.properties |
uas = messages/uas.properties errors = messages/errors.properties uas_fi = messages/uas_fi.properties errors_fi = messages/errors_fi.properties uas_de = messages/uas_de.properties errors_de = messages/errors_de.properties |
Add a string in the user interface to make the error message a bit more friendly.
USER_NOT_FOUND = Hey :) We didn't find you. Would you try again? |
Now try to log in with a nonexistent user name, and observe the message that appears in red letters.
Add new languages to templates for selection. You must edit C:\Program Files\Ubisecure\ubilogin-sso\ubilogin\custom\templates\smartplan.properties file. (For reference, full values of default.properties file are in Template files page)
If you wish to localise to Swedish:
defaultlocale = sv locales = en, sv localenames = in English, på svenska |
If you wish to localise to Finnish instead:
defaultlocale = fi locales = en, fi localenames = in English, Suomeksi |
If you wish to localise to German instead:
defaultlocale = de locales = en, de localenames = in English, Deutsch |
Go to the login screen of the My Smart Plan application to see the changes.
Note, if the Nordic letters don't display properly, change the encoding of the smartplan.properties file to ANSI in the text editor.
Optional exercise: Add a new language to a template
Repeat the step 5 to add a new language.
Full default options for default uas.properties and errors.properties are available in documentation |
Change the default language to either Finnish or Swedish. In order to do this, edit C:\Program Files\Ubisecure\customerid\application\custom\eidm2.properties
If you wish to localise to Swedish:
default.locale = sv locales = en, sv localeName.en = in English localeName.sv = på svenska |
If you wish to localise to Finnish:
default.locale = fi locales = en, fi localeName.en = in English localeName.fi = Suomeksi |
If you wish to localise to German:
default.locale = de locales = en, de localeName.en = in English localeName.de = Deutsch |
Change the default texts in the "Front Page" that appears in CustomerID Administrative Interface. The steps are:
Copy file C:\Program Files\Ubisecure\customerid\application\custom\messages_en.properties to file messages_de.properties (for German) in the same directory.
Modify some texts in messages_de.properties (or messages_fi.properties or messages_sv.properties),
for example in German: admin.frontpage.welcometext1 = SmartPlan Organisationen
for example in Finnish: admin.frontpage.welcometext1 = SmartPlan järjestelmän organisaatiot
or in Swedish: admin.frontpage.welcometext1 = SmartPlan organisationer
Localised role descriptions. Edit C:\Program Files\Ubisecure\customerid\application\custom\roles.properties
First observe the contents of the file. Then localise SmartPlan role descriptions by editing the custom roles.properties configuration.
If you wish to localise to German:
de.friendlyName.mainuser = Kontakt de.friendlyName.user = Verantwortlicher |
If you wish to localise to Finnish:
fi.friendlyName.mainuser = Yhteyshenkilö fi.friendlyName.user = Edustaja |
If you wish to localise to Swedish:
sv.friendlyName.mainuser = Kontakt sv.friendlyName.user = Representativ |
Localised attribute descriptions. By editing the custom messages_de.properties (or messages_fi.properties or messages_sv.properties) file add the line:
If you wish to localise to German:
organization.crmid = Kundennummer |
If you wish to localise to Finnish:
organization.crmid = CRM ID |
If you wish to localise to Swedish:
organization.crmid = Kundnummer |
Restart the Wildfly service.
Create the file terms_sv.html (or terms_de.html in German or terms_fi.html in Finnish), which are the Terms and Conditions in Finnish or Swedish, on directory C:\Program Files\Ubisecure\customerid\application\custom This will be used in later exercise.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <body> SmartPlan terms in German </body> </html> |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <body> SmartPlan terms in Finnish </body> </html> |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <body> SmartPlan terms in Swedish </body> </html> |
Enable third-party implementations of
Examples:
Below an example of calling Discovery UI API.
Now do it yourself!
You can use the following URL to fetch information for SmartPlan application and smartplan template:
https://login.smartplan.com:8443/uas/discovery?entityID=<entityID>
&template=smartplan&locale=en
Replace <entityID>
with the value given for SmartPlan Application on SSO Management console:
Template API allows for a consistent and safe reference method to elements required for providing custom user experiences
Examples
Benefits
Examples:
To get the page logo in Finnish for the template named default:
To get the logo in Finnish for the authentication method called sms.otp.1 (Obs: this call will not work in the current environment as we didn't configure method-image):