All about multiple side bars on SAP UI5 view

[former_member224926]

Getting Started – Introduction

Sometimes, it’s useful to create side bars on left/right/bottom of the screen. It’s a great idea for scope breakdown, and one thing I’ve really enjoyed about UI5 is how easy it is to create your own layout. That said, there does seem to be a bit of confusion on this topic and many don’t know where to start – so hence, I’m writing this blog to hopefully get you kickstarted into building your own suite of awesome controls.

Ok, let us jump right in

I’m going to go ahead and assume you have the following knowledge already

• SAPUI5 or OpenUI5 (can write your own custom application for fiori launchpad)


• Javascript and jQuery


• HTML and CSS

First up, create a whole new project, and some folders for your controls namespace. I highly recommend you create a library of controls in a single common namespace, and reference it from your other applications so you can reuse all your controls.

I’ve created a path of “ui/ui/view” and “ui/ui/controller”, where I plan to put all my side bars into two categories, today I’ll be focusing on left side bars and right side bars. You can create wherever of it feels appropriate to you.

And today I will build a sample application I’m going to call “XOXO Hospital Management system” (which will be have main content as icontab bar and left/right/bottom bars ), and explain the steps I’m taking as I go.
So, I know you just want to hurry up and see the code, so here you go, I build the following skeleton to begin my new control, feel free to copy & paste this for all your requirements.

Getting Started – XOXO View

	createLayout: function(oController) {

		this.setHeight("100%");

		this.setDisplayBlock(true);

		//main page

		this.oPage=new sap.m.Page({width: "100%",showHeader: true,

				title: "XOXO Hospital Management System"

			});

                this.oPage2=new sap.m.Page({showHeader:false});	        

                 //add split App to main page

		this.mainPage = new sap.m.SplitApp("splitApp");

		this.mainPage.addMasterPage(this.getMasterPage(oController));

		this.mainPage.addDetailPage(this.getDetailPage(oController));

	

	        //create split app to adjust left side panel

		var splitApp=new sap.m.SplitApp();

		splitApp.addMasterPage(this.createSidePanel1());

		splitApp.addDetailPage(this.mainPage);

		this.oPage2.addContent(splitApp); 

		

		//create split app to adjust right side panel

		splitApp=new sap.m.SplitApp();

		splitApp.addMasterPage(this.oPage2);

		splitApp.addDetailPage(this.createSidePanel2());

		this.oPage.addContent(splitApp); 		

	},

Ok, so first up, notice I am creating splitapp, so that I get layout to add functionality.

Secondly, notice I’ve declared my page which adds content of left side bar holding navigation bar and splitapp.

In the above example I have already put mainpage holding form content in a splitapp. Then, I added it to another splitapp where navigation bar is master page and main content as detail page. Similarly, it has been masked for right bar. Bottom bar I a using footer although a navigation bar can be used here also unless footer is not serving your requirement.

Ok, we get into resizing, I want to demonstrate that it works, so I will add a simple footer, followed by left navigation and slap it into an right navigation bar aster-detail view

I add the following code to demonstrate basic html rendering

Getting Started – XOXO Controller

onBeforeRendering: function() {

			

		var splitApp = sap.ui.getCore().byId("splitApp");

		this.sideList = splitApp.getCurrentMasterPage().getContent()[0];

		//adjust width to accomdate side bars

		sap.ui.getCore().byId("__app0-Master").setWidth("3.5%");

		sap.ui.getCore().byId("__app0-Detail").setWidth("96.5%");

		sap.ui.getCore().byId("__app1-Master").setWidth("97%");

		sap.ui.getCore().byId("__app1-Detail").setWidth("3%");

                      

}

And viola! there it is



We’re done! there’s a fully functional trio side bars or controls to sit inside of!

See you later…

This was my first blog on SCN, hope you enjoyed it
Next up, I will expand on this topic and demonstrate

1. How to use image processing with SAP HANA


2. Adding icon to the child nodes of tree rendered using navigation list.

@LordOfTheStack