Contact usDemo App

Debugging

PreBilt Overview

The PreBilt front end is an SAP UI5 application framework that renders user interfaces dynamically at runtime based on configuration data from the backend. Instead of hardcoding UI elements, PreBilt uses App Master Data (AMD) - a configuration-driven approach where the backend defines:

  • Screen layouts and UI controls

  • Field mappings and data bindings

  • Business logic and validations

  • Screen buttons and actions

This architecture allows UI modifications through backend configuration changes without frontend code deployment, making the application highly flexible and maintainable.

Prerequisites

This guide assumes you have some experience with single page web applications and SAPUI5 applications. Also, a knowledge of calling JSON APIs from JavaScript would be helpful.

Debugging PreBilt applications

Debugging PreBilt applications requires understanding both the configuration-driven architecture and runtime rendering:

Key debugging considerations:

  1. Configuration vs Code Issues

    1. Determine if issues stem from AMD configuration or JavaScript code

    2. Check Network tab for AMD data loading from backend services

    3. Validate AMD JSON structure in browser console

    4. Compare expected vs actual configuration values

  2. Dynamic Rendering Challenges

    1. UI elements don’t exist until runtime rendering completes

    2. Use browser breakpoints in rendering functions – setupDetail Page or setupListPage

  3. Common PreBilt Debugging Points

    1. AMD Loading: Verify configuration data arrives correctly

    2. Control Generation: Trace how configuration maps to UI5 controls

    3. Data Binding: Ensure dynamic bindings match backend field names

    4. Event Handlers: Confirm dynamically attached events work properly

    5. Validation Rules: Check if backend validation logic executes correctly

  4. Debugging Tools and Techniques

    1. Enable UI5 debug mode: sap-ui-debug=true URL parameter if low level UI5 debugging is required

    2. Use UI5 Inspector browser extension for control hierarchy

    3. Set breakpoints in base controller rendering methods

  5. Configuration-Specific Issues

    1. Missing or malformed AMD entries

    2. Incorrect control type mappings

    3. Invalid property assignments for UI5 controls

    4. Broken references between configuration elements

General web debugging with browser developer tools

Browser developer tools are essential for debugging web applications. Access them by pressing F12 or right-clicking and selecting “Inspect” in most browsers. The developer tools provide several panels:

  • Elements/Inspector: View and modify HTML/CSS in real-time

  • Console: View JavaScript logs, errors, and execute commands

  • Network: Monitor HTTP requests and responses

  • Sources/Debugger: Set breakpoints and step through JavaScript code

  • Application/Storage: Inspect cookies, local storage, and session storage

Key debugging techniques

  • Use breakpoints to pause code execution at specific lines

  • Use console.log() statements to track variable values

  • Inspect element styles to debug CSS issues

  • Use the debugger statement in JavaScript to create breakpoints programmatically

Check the console for JavaScript errors

The console is your first stop when debugging JavaScript issues:

  1. Red error messages indicate JavaScript exceptions that stopped code execution

  2. Yellow warnings highlight potential issues that may cause problems

  3. Stack traces show the sequence of function calls leading to an error

Common console error types

  • ReferenceError: Variable or function not defined

  • TypeError: Operation performed on wrong data type

  • SyntaxError: Invalid JavaScript syntax

  • NetworkError: Failed resource loading

Tips for console debugging

  • Clear the console before reproducing issues for cleaner output

  • Use console filters to show only errors or warnings

  • Click on file links in stack traces to jump directly to problematic code

  • Use console.trace() to log the current call stack

Check the network tab for SAP connection issues

The Network tab helps diagnose SAP backend connectivity problems:

What to look for

  1. HTTP Status Codes:

    1. 200: Successful request

    2. 401: Authentication required

    3. 403: Authorization denied

    4. 404: Resource not found

    5. 500: Server error

  2. Performance issues:

    1. Look for slow requests (red timing bars)

    2. Check for excessive number of requests

    3. Verify response sizes aren’t too large

Server errors may indicate issues in the ABAP backend layer. It is worth checking transaction ST22 in the SAP system for these types of errors.

Understand the role of tctm_apps.js

The tctm_apps.js file serves as the application registry and configuration hub:

Key responsibilities

  • Defines available apps and their metadata

  • Maps app IDs to their respective controllers and views

  • Configures app-specific settings and parameters

  • Manages app lifecycle and initialization

Debugging tips

  • Check if your app is properly registered in the apps configuration

  • Verify app paths and namespaces are correct

  • Look for missing or misconfigured app properties

  • Use console logging to trace app initialization flow

Understand the role of tctm_core.js

The tctm_core.js file provides core functionality for the entire application:

Core features

  • Application initialisation and bootstrapping

  • Global event handling and communication

  • Utility functions used across apps

Debugging approaches

  • Set breakpoints in initialization functions to trace startup issues

  • Check utility function parameters and return values

  • Verify data models are properly initialized

Understand detail screens

Detail screens typically display information about a single entity or a selection screen.

Common patterns

  • Controller naming: App_XXX.controller.js

  • View naming: App_XXX.view.js - Data binding to a single entity

Debugging detail screens

  1. Verify data binding paths are correct

  2. Check if entity data is loaded before rendering

  3. Ensure form controls are properly bound

  4. Validate navigation parameters passed to the screen

Common issues

  • Missing or incorrect entity keys

  • Binding to non-existent properties

  • Timing issues with asynchronous data loading

Understand List screens

List screens display collections of data in list format.

Typical structure

  • Uses List controls

  • Implements filtering, sorting, and searching

  • Handles item selection and navigation

Debugging list screens

  1. Check if collection binding path is correct

  2. Verify filters and sorters are properly applied

  3. Ensure aggregation binding is set up correctly

Common problems

  • Empty lists due to incorrect service URLs

  • Performance issues with large datasets

  • Filter criteria not properly formatted

Understand individual app architecture

Each app follows a consistent MVC pattern.

Structure:

apps/tctm_wm_app_XXX/
├── controller/
│   └── App_XXX.controller.js
├── view/
│   └── App_XXX.view.js
├── extensions/
│   └── App_XXX.extensions.js
└─── css/
    └── App_XXX.css (optional)

Debugging approach

  1. Start with the controller to understand business logic

  2. Check view for UI element bindings

  3. Review extensions for customizations

Key debugging points

  • onInit lifecycle method for initialization issues

  • Screen “initialise” methods

  • AJAX functions which communicate with SAP.

Debugging locally using live-server

Live-server enables local development and debugging:

Setup steps

  1. Install live-server: npm install -g live-server

  2. Navigate to project root directory

  3. Run: live-server --port=8080

Debugging advantages

  • Automatic browser refresh on file changes

  • No cache issues during development

  • Easy to add console.log statements

  • Can modify code and see immediate results

Common issues

  • Ensure correct relative paths for resources or load SAPUI5 library from SAP CDN in the UI5 bootstrap section in the index.html file.

Debugging a Debug APK file via the browser

Debug APK files can be debugged using Chrome DevTools.

Prerequisites

  1. Enable Developer Options on Android device

  2. Enable USB Debugging

  3. Install Chrome on development machine

Steps

  1. Connect Android device via USB

  2. Open Chrome and navigate to chrome://inspect

  3. Ensure “Discover USB devices” is checked

  4. Launch the debug APK on device 5. Click “inspect” next to your app in Chrome

Debugging features

  • Full access to console logs

  • Network request inspection

  • JavaScript debugging with breakpoints

  • Performance profiling

  • Local storage inspection

Tips

  • Use “adb logcat” for additional Android system logs

  • Enable “Pause on exceptions” for error debugging

    • Use remote debugging for WebView content

    • Monitor memory usage for performance issues

Common APK-specific issues

  • WebView compatibility problems, check the version of Chrome on the Android device

  • Different behavior between browser and WebView

  • usesPlainText permission missing from Android Manifest if plain HTTP is being used (not recommended)

PreviousTroubleshooting

Last updated

Was this helpful?