Customizing the Mobile App user interface
Administrators can customize the mobile app user interface to reflect a corporate brand. You can customize the server URL/login screen, Agent/Manager/Approver dashboard, User dashboard, and ticket system screen. The configuration for the customization must be performed using the IBM Control Desk classic GUI.
- Server URL/login screen
- Brand title
- Brand icon
- Buttons
- Text color
- Background color
- Agent/Manager/Approver/User dashboard
- Header
- Background color
- Text color
- Header icon placeholder color
- Screen Background
- Background color
- Text color
- Header icon placeholder color
- Header
- Ticket system screen
- Header
- Fab icon (same as header color)
Before you begin
- The following steps are to be followed only if the web server and application server are on the
same machine.Make sure that the Doclinks file server is configured and there is a folder as C:/doclinks/mobile created for the mobile application customization feature. If not, do the following step for the Doclinks file server configuration and mobile folder creation:
- Stop the WebLogic Server.
- Back up the config.xml file in the domain in which you want to configure the Web
application:
Table 1. Operating system Path Windows <BEA WebLogic root>user_projects\domains\<domain name>
For example, /usr/bea/user_projects/domains/mydomain.
UNIX <BEA WebLogic root> /user_projects/domains/<domain name>\
For example, /use/bea/user_projects/domains/mydomain
- Start the application server.
- Access the administration console
http://<host>:<port>/console
, where <host>:<port> is the IP address and the port number of your IBM Control Desk server, for example,https://172.20.152.172:9043/ibm/console/
- From the navigation pane, browse to .
- Click the application server created for the product, for example, webserver1.
- In the server window, under the Configuration tab, click Global Directives under the Configuration settings menu.
- In the Global Directives window, fill C:/doclinks in the Document root box.
- Click Apply, a new box Messages will be displayed, click Propagate
configuration file.Note: A message will be displayed for a successful propagate completed.
- Go to folder location at C:\<Program Files>\<project
name>\HTTPServer\conf where <Program Files> is the
folder where your application is installed and <project name> is the
name of your project folder, for example, C:\Program Files\IBM\HTTPServer\conf.
- Edit file httpd.conf inside the above folder as follows:
- Update next line after line "
# symbolic links and aliases may be used to point to other locations
" as follow:DocumentRoot "C:\doclinks"
- Update next line after line "
# This should be changed to whatever you set DocumentRoot to.
" as follow:<Directory "C:\doclinks">
- Update next line after line "
- Edit file httpd.conf inside the above folder as follows:
- Start the server again, go to
http://<host>:<port>/console
, where <host>:<port> is the IP address and the port number of your IBM Control Desk server, for examplehttps://172.20.152.172:9043/ibm/console/
- Go to .
- For the row of your application server, for example, webserver1, select Select Propagate Plugin from the drop-down and click Submit Action tab at the top.
- Stop and restart your application server.
-
Follow the below steps when the web server and application server are not on the same machine (SaaS environment)
- Copy the brand icon and paste it manually into the below directory
<drive>\Program Files\ibm\WebSphere\AppServer\profiles\ctgAppSrv01\installedApps\ctgCell01\MAXIMO.ear\maximouiweb.war\webclient\mobileapp\resources\brandIcon\
Note: Brand icon must be with an aspect ratio of 5 x 2 with 1280 px width and 512 px height. - Rebuild / Redeploy ICD Classic GUI.Note: This will take downtime of approximately 5 hrs.
- Update the brand icon path in the mobile.customization.brandicon system property. For
more details, see Mobile App color customization properties.Note: The brand icon path is as follow:
https://<host>:<port>/<application_name>/webclient/resources/brandIcon/brandicon.png
, for example http://172.90.189.176:8080/maximo_test-qa-7613-new/webclient/mobileapp/resources/brandIcon/brandicon.png.
- Copy the brand icon and paste it manually into the below directory
Mobile App customization preview interface
Access the below mobile app customization preview web page to review the different combination of themes:
https://<host>:<port>/maximo/webclient/mobileapp/index.jsp
where <host>:<port> is the IP address and the port number of your IBM Control Desk server.
In the Mobile app customization preview web page you can try different themes by selecting different combinations of colors (color pickers) or values in the input-boxes. Use the scroll bars Header image background opacity and Page image background opacity to check the opacity level of Header and Page background color respectively. Once you have decided the theme on the preview web page, make a note of the color code and the other relevant values for the respective system properties.
Log in to the IBM Control Desk classic GUI, go to the , and update the mobile system properties with the values that you noted above using the Mobile app customization preview web page. For more details on the mobile system properties, refer to Mobile App color customization properties.
- The mobile app customization preview web page in the IBM Control Desk 7.6.1.3 supports only the English language.
- Customization support in the IBM Control Desk 7.6.1.3 requires ICD mobile app version 2.0.2 or higher.
- Save: Once you have decided on the theme on the preview web page, click the Save button to save the configuration settings.
- Submit: Once you have clicked the Save button successfully, Submit button gets enabled. Click Submit button to update the configuration settings into the backend database.
Once you have submitted the configuration setting successfully, the configurations details will be saved in the backend database. After successfully saving the customization settings into the database, login into the mobile app to view the updated mobile interface based on the configuration setting you saved in the preview web page.
- The language of the mobile app customization preview web page will be in English only.
- Customization support in the IBM Control Desk 7.6.1.4 requires ICD mobile app version 2.0.3 or higher.
- The customized interface in the mobile app will reflect only when you re-login to the mobile app at least once after all the mobile settings are configured.