Debugging UI
About this task
This guide will walk you through how to find UI elements within the Role Based Application and map them to the corresponding element within the application design file (app.xml).
In this scenario we will be using the Techician application to identify which element controls the asset information displayed on a work order’s detail page.
Procedure
Step 1: Open your browser and launch the Role Based Application that you wish to debug. In this example, we will be using the TECHMOBILE application.
Step 2: Open an existing workorder that has an asset assigned.
Step 3: Right click on the Asset information and select “Inspect”.
A new window will pop up that will expose all of the HTML that makes up the UI. Note this window may look different than the screenshot attached.
From this new window move the cursor over the various HTML elements. When your cursor hovers over an element it will be highlighted on the application’s page. In our scenario we are looking for an element that is wrapping the text description of our asset.
Step 4: Capture the “id” attribute of the element highlighted. In our case this value is “yzqaa”
Step 5: In the configuration tool, open the TECHMOBILE application. Find the code editor section and left click anywhere within that editor. Then use the “find” command by using keybind “CTRL + F” if using windows or “Command + F” if using Mac. Paste the value of the id into the search bar. The code editor should automatically jump to that element with the correct id.
