Skip to Content
Author's profile photo Jerry Wang

Two types of popup Dialogs in Fiori

This blogs introduces the tips how to find the location of source code where the popup dialog is raised.

There are two kinds of popup dialogs in Fiori ui.

Type one: Model Dialog based on IFrame

For example, if I click the glass icon, and then there is one dialog popped up. I need to know which line of code has raised this popup dialog and why.

/wp-content/uploads/2015/10/clipboard1_816224.png

Solution

Set the breakpoint on the function createIFrameDialog below. You can find Shell.view.js via the path below.

/wp-content/uploads/2015/10/clipboard2_816225.png

And then click the icon again, breakpoint is triggered.

/wp-content/uploads/2015/10/clipboard3_816226.png

From the callstack I can understand the usage of this dialog is for XHR logon, since it is necessary to also retrieve remote catalog information from another system, Q7D:

/wp-content/uploads/2015/10/clipboard4_816227.png

Type two: Message dialog

You can see one example below.

/wp-content/uploads/2015/10/clipboard5_816228.png

And now your requirement is to find out which line of code has raised it.

Solution

1. Search keyword sap.ca.ui.dialog.factory in Chrome development tool. Click the file factory-dbg.js:

/wp-content/uploads/2015/10/clipboard6_816229.png

Set the breakpoint on function _openDialog.

2. Repeat the operation to trigger the breakpoint. When breakpoint is triggered, check the inner callstack and then we can know the error dialog is poped up because of the failure metadata load in function checkModelMetaData:

/wp-content/uploads/2015/10/clipboard7_816230.png

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.