SAP Fiori里两种弹出对话框(popup dialog)设计

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.

Solution

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

And then click the icon again, breakpoint is triggered.

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:

Type two: Message dialog
You can see one example below.

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:

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:

要获取更多Jerry的原创文章，请关注公众号"汪子熙":