Customizing the Mobile App user interface

Before you begin

1. 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:

   1. Stop the WebLogic Server.
   2. 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

   3. Start the application server.
   4. 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/
   5. From the navigation pane, browse to Servers > All servers.
   6. Click the application server created for the product, for example, webserver1.
   7. In the server window, under the Configuration tab, click Global Directives under the Configuration settings menu.
   8. In the Global Directives window, fill C:/doclinks in the Document root box.
   9. Click Apply, a new box Messages will be displayed, click Propagate configuration file.
      Note: A message will be displayed for a successful propagate completed.
   10. 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">

   11. 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 example https://172.20.152.172:9043/ibm/console/
   12. Go to Servers > All servers.
   13. 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.
   14. Stop and restart your application server.
2. Follow the below steps when the web server and application server are not on the same machine (SaaS environment)

   1. 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.
   2. Rebuild / Redeploy ICD Classic GUI.
      Note: This will take downtime of approximately 5 hrs.
   3. 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.

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 System Configuration > Platform Configuration > System Properties, 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.

IBM Control Desk 7.6.1.4 provides an enhancement in the mobile app customization preview web page and two new buttons Save and Submit are added. Also, system properties are not required to be configured in IBM Control Desk 7.6.1.4. See details below:

• 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.