Skip to Content

An example to learn how fullScreenPageRoutes works in full screen application via debugging

In CRM Fiori there is a full screen application named My Task.

Note: This “full screen” has nothing to do with F11 in your browser.

/wp-content/uploads/2016/05/clipboard1_951717.png

My colleague today asked me one question: what is the usage of this attribute “fullScreenPageRoutes”?

/wp-content/uploads/2016/05/clipboard2_951718.png

If google this attribute as keyword, there are not so many useful result returned. How to do self study on this attribute via debugging?

Open Development tool and perform global search via Ctrl+Shift+F, click line 156 and set a breakpoint there. Refresh the application.

/wp-content/uploads/2016/05/clipboard3_951725.png

Debugger is triggered. We can find that the route information we set in Configuration.js are loaded and stored in variable oAppMeta accordingly.

/wp-content/uploads/2016/05/clipboard4_951726.png

Where does this oAppMeta come from? Click the blue callstack frame. Here a metadata instance is created with type “FS” ( fullscreen ), and the whole configuration data wrapped by { } is passed into function createMetaData as second argument, that is, oAppMeta within createMetaData function. 

/wp-content/uploads/2016/05/clipboard5_951727.png

Since the application has type “FS”, so oMeta.routing is hard coded as below in ComponentBase-dbg.js. The routing object has attribute “routes” which is again an object which has another object attribute “fullScreen”.

/wp-content/uploads/2016/05/clipboard6_951731.png

/wp-content/uploads/2016/05/clipboard7_951732.png

/wp-content/uploads/2016/05/clipboard8_951733.png

Then later when UI Component is being initialized, the merged route information is stored in private attribute _oRouter of application UI component in line 218.

/wp-content/uploads/2016/05/clipboard9_951734.png

The view marked with blue “sap.ca.scfld.md.view” will be used in _routeMatched:

/wp-content/uploads/2016/05/clipboard9_951734.png

/wp-content/uploads/2016/05/clipboard10_951736.png

This is the reason why you can observe the load of corresponding xml file in Chrome network tab:

/wp-content/uploads/2016/05/clipboard11_951737.png

/wp-content/uploads/2016/05/clipboard12_951738.png

Since when I launch this Fiori application locally in my Tomcat with url: http://localhost:8090/cus.crm.mytasks/, no hash is appended after url, so route configuration with target view S2 is chosen:

/wp-content/uploads/2016/05/clipboard13_951739.png

/wp-content/uploads/2016/05/clipboard14_951740.png

The view hierarchy could be found below:

/wp-content/uploads/2016/05/clipboard15_951741.png

And if I change the attribute name deliberately, I can only see a blank screen:

/wp-content/uploads/2016/05/clipboard16_951742.png

Compare the new view hierarchy this time:

/wp-content/uploads/2016/05/clipboard17_951743.png

The reason is quite simple if we understand previous analysis. This time the route data provided by application fails to be merged, since line 261 expects attribute fullScreenPageroutes but I only have “fullScreenPageroutesAAAAA“.

/wp-content/uploads/2016/05/clipboard18_951744.png

In console you can see warning message which complains application didn’t provide any page to display.

/wp-content/uploads/2016/05/clipboard19_951745.png

Application descriptor

There is now new approach to define application specific configuration via descriptor file manifest.json. For details please refer to SAPUI5 walkthrough step10: Descriptor for applications.

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