SAP Fiori Elements應用裏Back按鈕的實現邏輯分析

One of my colleagues today asked me this question: Suppose this below is an application generated by Smart Template, and I would like to debug how the back button is implemented. Since the whole UI page is implemented by framework, I don’t know where to set breakpoint. How to proceed?

Here below is my process about how to find the back implementation in framework file within several minutes.

(1) Use Chrome extension Inspector ( the UI5 tab in Chrome development tool below ) to figure out that the button is located in UI area sap.uxap.ObjectPageHeader.

Based on the learning in My understanding about how object page in Smart Template is rendered I search by keyword 「Back」 in file Details.view.xml first, no result.

(2) Then search in next xml file NavigationBar.fragment.xml, this time the button is found.

Perform global search via Ctrl+Shift+F with key word 「_templateEventHandlers.onBack「, no result.

Then search 「_templateEventHandlers」 instead, this time TemplateAssembler-dbg.js is found.

Unfortunately it is difficult to judge the type of _templateEventHandlers simply from context code as it is filled in a generic way.

(3) Perform search on onBack instead, and the result is what I am looking for:

Set a breakpoint and click back button to verify: breakpoint is triggered:

So the trick here is the keyword I am using to search in a tentative way.

• first time search by _templateEventHandlers.onBack, no result
• second time search by _templateEventHandlers, has result but not useful
• third time search by onBack, done.

要獲取更多Jerry的原創文章，請關注公衆號"汪子熙":