The demands for enterprise software has changed since the user experience of the iPhone has spoiled us all. Especially when it comes to mobile applications, companies demand to use their own corporate identity. This is even more important when the application is customer facing, for example in a customer service scenario.
SAM allows to change the basic look and feel of the mobile client within minutes. This short tutorial will show you how.
Below are two screenshots of standard SAM with our signature colors.
Standard SAM login dialog
Standard SAM order list
The user interface of the SAM client is written in SAP UI5 and JavaScript. It is running inside an Apache Cordova container to enable full offline support and to leverage the full power of SAP MobiLink. Let's assume these colors and logos do not match the CI of our intergalactic organization and we want to make sure that the user interface reflects our companies style guide when we face aliens to fix their spaceship.
There are a few things we need before we can start:
- The company logo - this should be a transparent image with a width of at least 400 pixels.
- Login background picture - a background picture for the login dialog. It must be called login_background.jpg and should be at least 1920 x 1280 pixel.
- The color codes for the primary color, a secondary/third color and one for elements that are highlighted/selected
Step 1 - Replacing the logos
By default, the logo is in SVG format and called SAM_Logo.svg. If your file is a different format, for example PNG, you can change the file name in the Login.view.xml.
The code that needs to the changed in line 16
The alternative logo
Copy your logo into the www/img folder.
Step 2 - Replacing the background image
Copy your background image called login_background.jpg into the www/img folder. In case the file has a different name, you can change it in the file www/css/style.css. The property for this is loginPageStyle.
The alternative background image for the login dialog
Step 3 - Changing the UI Colors
All the colors of the application can be changed in the file www/css/style.css. The most important ones are defined in the header of the file as css variables. Changing the following 4 colors is doing the job most of the time. But of course, you are free to change any attribute in the style sheet.
- main-ui-color - the main color of the UI, for example used for the header section
- table-header-color - color for the table header in list views
- table-grouping-color - in case you group entries within a list, this color is used for the header of the groups
- ui-highlight-color - the color used to highlight selected objects, for example in the left navigation
In our example we change the values to the following colors:
You can use your favorite text editor to do the changes, in my case I am going with Microsoft Visual Studio Code on my mac.
If you plan to go with iOS, you need to do one additional change - in the file config.xml, you need to change the color of the status bar to the same value as main-ui-color. This can be done in the following tag:
<preference name="StatusBarBackgroundColor" value="#4184b1" />
The result will look like this:
This shows how quick and easy you can change the colors of the SAM client. This is just a very high-level look at what is possible. If you are familiar with HTML5, SAP UI5 and Fiori, it will be easy for you to change every aspect of the UI. Have fun!