Split-Screen In Fiori Made Easy!

While working with the famous Master Detail or the Split Screen layout in Fiori, often we could come across situations where we need to explain the working mechanism of it to the beginners. This is especially true when we try to train a group of junior engineers coming from college and starting their career in SAPUI5. It could be easy as a pro to utilize the demo apps or utilize the templates available on SAP Web IDE to build a Master Detail app. However for someone starting their career directly in Fiori, it may not be the ideal place to start their journey. This post aim to detail the building of a Master Detail from scratch without using any template. Experienced members please ignore(we have the Flexible Column Layout). Some thing like the below shown on Fiori Design Guidelines is what we are trying to achieve.

Step1: Application Initializing

First of all we create a bare minimum SAPUI5 application(not the Master Detail template). We stick to the minimum version(1.38) available for selection the Web IDE.

Template and version selection in SAP Web IDE

Input the initial view as ‘App.view.xml’ and proceed. Once the project is created, open the ‘App.view.xml’ file and insert the “SplitApp” control as below:-

Step 2: Displaying Details of Master Item

Similar to the earlier step, we proceed to create another view named ‘detail’ this time. Bind the product details to the controls as below:

Result
It is very convenient to start with a “SplitApp” control and grow from there. If we have selected the ‘Master-Detail’ template and proceeds to OData service selection from the wizard(like SAP ES5 sytem – OData services), then if the association and navigation between Entity Sets are properly defined we could easily map Master List and Detail list via wizard itself as below:

Fig 7): SplitApp creation via template in Web IDE.

However in some of the cases where you are starting on the project and have the Entity set for Master list only available, and want to proceed accordingly on the UI and later on build the Detail related sets(like in Agile methodology),provide association between them etc. later, then it would be a good idea to start prototyping on the UI side with a ‘SplitApp’ master list and proceed from there rather waiting for a full fledged OData service.

Full code available on GitRepo at FioriMasterDetail

Thanks