SAP Knowledge Base Article - Public

3054375 - How To Get The Screen Path With Google Chrome Developer Tools

Symptom

You want to get the screen path of screen ABC in SAP Cloud For Customer (C4C) or SAP Business ByDesign (BYD).

Image/data in this KBA is from SAP internal systems, sample data, or demo systems. Any resemblance to real data is purely coincidental.

Environment

SAP Cloud For Customer

SAP Business ByDesign

Resolution

If you need to know the screen path of any given screen, you can follow the steps below using Google Chrome Developer Tools:

  1. Navigate to one screen before accessing the one you want to get the path (e.g. if you want to get the path of Visit TI in C4C, you need to stop at Visit OWL before entering a Visit document).
  2. Open Google Chrome Developer tools by pressing F12 on your keyboard. 
  3. Navigate to Network tab of Developer Tools.
  4. It is good if Network is clean, so you can click the "Clear" button to leave Network empty. 
  5. Go back to C4C/BYD and click on the link to the screen you want to get the UI Path. 
  6. Now back to Developer Tools double click on the "json?app.component" item. Usually it is the first item loaded if Network was empty. 
  7. In the Headers tab, scroll down until you see Query String Parameters. 
  8. The screen path will be in the "app.component" parameter.

Screenshot for reference:

ui_path_developer_tools.png

Keywords

Google Chrome Developer Tools; Screen Path; UI; User Interface; , KBA , AP-RC-UIF , C4C UI Framework , How To

Product

SAP Cloud for Customer add-ins all versions ; SAP Cloud for Customer core applications all versions