An interface using SAPUI5.

Info

The interface contains a shell and multiples tables view with different properties

main.js

var mContent = { };
			
function getShellContent(key) {
				
	if (!this.mContent[key]) {

		if (key === "home") {
			this.mContent[key] = new sap.ui.commons.Label({ text: "Home view content" });
		} else if (key === "selection") {
			this.mContent[key] = new sap.ui.commons.Label({ text: "Selection view content" });	
			
		} else if (key === "basic") {
//			this.mContent[key] = new sap.ui.commons.Label({ text: "Basic Part Information view content" });
			this.mContent[key] = this.getContent();
		} else if (key === "time") {
			this.mContent[key] = new sap.ui.commons.Label({ text: "Time Series view content" });
		} else if (key === "initial") {
			this.mContent[key] = new sap.ui.commons.Label({ text: "Initial Status Configuration view content" });
		} else if (key === "seasonality") {
			this.mContent[key] = new sap.ui.commons.Label({ text: "Seasonality view content" });
		} else if (key === "application") {
			this.mContent[key] = new sap.ui.commons.Label({ text: "Application Configuration view content" });
		} else {
			this.mContent[key] = null;
		}	
	}
	
	return this.mContent[key];
}

function getHelpMenu() {
	
	var buttonHelpMenu = new sap.ui.commons.MenuButton({
		text: "Help",
		tooltip: "Help",		
		menu: new sap.ui.commons.Menu("h00",{
			items: [
			        new sap.ui.commons.MenuItem("h01", {
			        	text: "Help",
			        	tooltip: "Help",		
			        }),
			        new sap.ui.commons.MenuItem("h02", {
			        	text: "Report Incident",
			        	tooltip: "Report Incident",	
			        }),
			        new sap.ui.commons.MenuItem("h03", {
			        	text: "About",
			        	tooltip: "About",	
			        }),
	    ]}),			
	});

	return buttonHelpMenu;
}
	
function getCurrentUser() {
			
	var currentUser = new sap.ui.commons.TextView({
		text: "Administrator",
		tooltip: "Administrator",
	});
	
	return currentUser;
}
	
function getPIOLogo() {
	
	var pioLogo = new sap.ui.commons.Image({
		src: "img/PIOLogo.png",
		alt: "PIO Logo",
		width: "24px",
		height: "24px",
	});

	pioLogo.addStyleClass("LeftRightMargins10px");
	
	return pioLogo;
}
	
function getHomeMenu() {
	
	var ni01 = new sap.ui.ux3.NavigationItem({ key:"home", text: "Home", tooltip: "Home", });
	return ni01;
}

function getSetupMenu() {
	
	var ni02 = new sap.ui.ux3.NavigationItem({ key:"setup", text: "Setup", tooltip: "Setup", });
	
	ni02.addSubItem(new sap.ui.ux3.NavigationItem({ key:"selection", text: "Selection",tooltip: "Selection", }));
	ni02.addSubItem(new sap.ui.ux3.NavigationItem({ key:"basic", text: "Basic Part Information",tooltip: "Basic Part Information", }));
	ni02.addSubItem(new sap.ui.ux3.NavigationItem({ key:"time", text: "Time Series",tooltip: "Time Series", }));
	ni02.addSubItem(new sap.ui.ux3.NavigationItem({ key:"initial", text: "Initial Status Configuration",tooltip: "Initial Status Configuration", }));
	
	return ni02;		
}

	
function getConfigurationMenu() {
	
	var ni05 = new sap.ui.ux3.NavigationItem({ key:"configuration", text: "Configuration", tooltip: "Configuration", });
	ni05.addSubItem(new sap.ui.ux3.NavigationItem({ key:"seasonality", text: "Seasonality", tooltip: "Seasonality" }));
	ni05.addSubItem(new sap.ui.ux3.NavigationItem({ key:"application", text: "Application Configuration", tooltip: "Application Configuration" }));
	return ni05;
}


//left part of the page
function getWrkContext(){
	var oPanel = new sap.ui.commons.Panel({width: "100%", showCollapseIcon:false});

	//Set the title of the panel
//	sap.ui.commons.Title
	oPanel.setTitle(new sap.ui.commons.Title({text:"Current Working Context" }));
	
	var oInput1 = new sap.ui.commons.TextField({id:'input1',editable:false, width:"100%"});
	
	oPanel.addContent(oInput1);
	return oPanel;
}
function getEmptySpace(){
	var oLabel = new sap.ui.commons.Label(""); 
	return oLabel;
}
//active material table creation
function getActiveMaterials(){
//	var oData={};
	//Create an instance of the table control
	var oPanel = new sap.ui.commons.Panel({width: "100%",showCollapseIcon:false});

	//Set the title of the panel
//	sap.ui.commons.Title
	oPanel.setTitle(new sap.ui.commons.Title({text:"Active Materials"}));
	var oTable = new sap.ui.table.Table({
//		title: "Active Materials",
		width: "100%",
		visibleRowCount: 7,
		firstVisibleRow: 2,
		selectionMode: sap.ui.table.SelectionMode.Single,
		footer: "",
		toolbar: new sap.ui.commons.Toolbar({items: [ 
			new sap.ui.commons.Button({text: "Delete", width: "100px", press: function() {  }})
		]}),

	});

	//Define the columns and the control templates to be used
	var oColumn = new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "Material Key"}),
		template: new sap.ui.commons.TextView().bindProperty("text", "materialKey"),
		sortProperty: "materialKey",
		filterProperty: "materialKey",
		width: "50%"
	});
	oTable.addColumn(oColumn);
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "English Name"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "name"),
		sortProperty: "name",
		filterProperty: "name",
		width: "50%"
	}));

	//Initially sort the table
	oTable.sort(oTable.getColumns()[0]);
	oPanel.addContent(oTable);
	return oPanel;

}
function getActiveWorshops(){
	var oPanel = new sap.ui.commons.Panel({width: "100%",showCollapseIcon:false});

	//Set the title of the panel
//	sap.ui.commons.Title
	oPanel.setTitle(new sap.ui.commons.Title({text:"Active Workshops"}));
	//Create an instance of the table control
	var oTable = new sap.ui.table.Table({
//		title: "Active Workshops",
		width: "100%",
		visibleRowCount: 7,
		firstVisibleRow: 2,
		selectionMode: sap.ui.table.SelectionMode.Single,
		footer: "",
	});

	//Define the columns and the control templates to be used
	var oColumn = new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "Plant Key"}),
		template: new sap.ui.commons.TextView().bindProperty("text", "plantKey"),
		sortProperty: "plantKey",
		filterProperty: "plantKey",
		width: "33%"
	});
	oTable.addColumn(oColumn);
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "MRP Area Key"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "mrpKey"),
		sortProperty: "mrpKey",
		filterProperty: "mrpKey",
		width: "33%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "MRP Area Name"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "mrpName"),
		sortProperty: "mrpName",
		filterProperty: "mrpName",
		width: "33%"
	}));

	//Initially sort the table
	oTable.sort(oTable.getColumns()[0]);
	
	oPanel.addContent(oTable);
	return oPanel;

}

function getMaterialLevel(){
	var oPanel = new sap.ui.commons.Panel({width: "100%",showCollapseIcon:false});

	//Set the title of the panel
//	sap.ui.commons.Title
	oPanel.setTitle(new sap.ui.commons.Title({text:"Material Level Attributes"}));
	var oLayout = new sap.ui.commons.layout.MatrixLayout({
		id : "matrix2",
		layoutFixed : true,
		columns : 6,
		width : "100%",
		widths : [ "8%", "20%","10.5%", "20%","10.5%", "20%" ]
		});
//	first row
	var label1=new sap.ui.commons.Label("label1"); 
	label1.setText("Material key");
	var textField1 = new sap.ui.commons.TextField({id:'materialKeyField',width:"250px",editable:false});
	
	
	var label2=new sap.ui.commons.Label("label2"); 
	label2.setText("Material type(R/C/F) ");
	var textField2 = new sap.ui.commons.TextField({id:'matTypeRCP',width:"250px",editable:false});
	
	var label3=new sap.ui.commons.Label("label3"); 
	label3.setText("Criticality");
	var textField3 = new sap.ui.commons.TextField({id:'criticality',width:"250px",editable:false});
	oLayout.createRow({height:"24px"},label1,textField1,label2,textField2,label3,textField3);
	
//2nd row
	var label4=new sap.ui.commons.Label("label4"); 
	label4.setText("En. Name");
	var textField4 = new sap.ui.commons.TextField({id:'enName',width:"250px",editable:false});
	
	
	var label5=new sap.ui.commons.Label("label5"); 
	label5.setText("Unit Price ");
	var textField5 = new sap.ui.commons.TextField({id:'unitPrice',width:"250px",editable:false});
	
	var label6=new sap.ui.commons.Label("label6"); 
	label6.setText("Material Status");
	var textField6 = new sap.ui.commons.TextField({id:'matStatus',width:"250px",editable:false});
	oLayout.createRow({height:"24px"},label4,textField4,label5,textField5,label6,textField6);
//3rd row
	var label7=new sap.ui.commons.Label("label7"); 
	label7.setText("Fr. Name");
	var textField7 = new sap.ui.commons.TextField({id:'frName',width:"250px",editable:false});
	
	
	var label8=new sap.ui.commons.Label("label8"); 
	label8.setText("Central buyer ");
	var textField8 = new sap.ui.commons.TextField({id:'centralBuyer',width:"250px",editable:false});
	
	var label9=new sap.ui.commons.Label("label9"); 
	label9.setText("Dangerous Goods Inc");
	var textField9 = new sap.ui.commons.TextField({id:'dangGoods',width:"250px",editable:false});
	oLayout.createRow({height:"24px"},label7,textField7,label8,textField8,label9,textField9);	
//4th row
	var label10=new sap.ui.commons.Label("label10"); 
	label10.setText("NI. Name");
	var textField10 = new sap.ui.commons.TextField({id:'niName',width:"250px",editable:false});
	
	
	var label11=new sap.ui.commons.Label("label11"); 
	label11.setText("Strategic Flag ");
	var textField11 = new sap.ui.commons.TextField({id:'flag',width:"250px",editable:false});
	
	var label12=new sap.ui.commons.Label("label12"); 
	label12.setText("Unit Of Measure");
	var textField12 = new sap.ui.commons.TextField({id:'um',width:"250px",editable:false});
	oLayout.createRow({height:"24px"},label10,textField10,label11,textField11,label12,textField12);	
//	add layout 
	oPanel.addContent(oLayout);
	
	return oPanel;
}

function getPlantLevel(){

	//Create an instance of the table control
//	var title = new sap.ui.commons.Title({text:"Plant Level Attributes"});
	var oPanel = new sap.ui.commons.Panel({width: "100%",showCollapseIcon:false});

	//Set the title of the panel
//	sap.ui.commons.Title
	oPanel.setTitle(new sap.ui.commons.Title({text:"Plant Level Attributes"}));
	var oTable = new sap.ui.table.Table({
//		title: "Plant Level Attributes",
		width: "100%",
		visibleRowCount: 15,
		firstVisibleRow: 15,
		selectionMode: sap.ui.table.SelectionMode.Single,
		footer: "",
	});

	//Define the columns and the control templates to be used
	var oColumn = new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "MRPAC"}),
		template: new sap.ui.commons.TextView().bindProperty("text", "mrpac"),
		sortProperty: "mrpac",
		filterProperty: "mrpac",
		width: "5%"
	});
	oTable.addColumn(oColumn);
	
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "ABCc"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "abcc"),
		sortProperty: "abbc",
		filterProperty: "abbc",
		width: "5%"
	}));
	
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "XYZ"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "xyz"),
		sortProperty: "xyz",
		filterProperty: "xyz",
		width: "5%"
	}));
	
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "Bulk"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "bulk"),
		sortProperty: "bulk",
		filterProperty: "bulk",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "AC"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "ac"),
		sortProperty: "ac",
		filterProperty: "ac",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "SPT"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "spt"),
		sortProperty: "spt",
		filterProperty: "spt",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "MRPC"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "mrpc"),
		sortProperty: "mrpc",
		filterProperty: "mrpc",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "ProdS"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "prods"),
		sortProperty: "prods",
		filterProperty: "prods",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "SMT"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "smt"),
		sortProperty: "smt",
		filterProperty: "smt",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "PG"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "pg"),
		sortProperty: "pg",
		filterProperty: "pg",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "ABCI"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "abci"),
		sortProperty: "abci",
		filterProperty: "abci",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "PS"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "ps"),
		sortProperty: "ps",
		filterProperty: "ps",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "FM"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "fm"),
		sortProperty: "fm",
		filterProperty: "fm",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "Last day"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "lastday"),
		sortProperty: "lastday",
		filterProperty: "lastday",
		width: "5%"
	}));
	oTable.addColumn(new sap.ui.table.Column({
		label: new sap.ui.commons.Label({text: "End Of S"}),
		template: new sap.ui.commons.TextField().bindProperty("value", "endofs"),
		sortProperty: "endofs",
		filterProperty: "endofs",
		width: "5%"
	}));

	//Initially sort the table
	oTable.sort(oTable.getColumns()[0]);
	
	oPanel.addContent(oTable);
	return oPanel;

}
 function getContent(){
	//create a horizontal Splitter
		var oSplitterV = new sap.ui.commons.Splitter("splitterV"); 
		oSplitterV.setSplitterOrientation(sap.ui.commons.Orientation.vertical);
		oSplitterV.setSplitterPosition("25%");
		oSplitterV.setMinSizeFirstPane("20%");
		oSplitterV.setMinSizeSecondPane("30%");
		oSplitterV.setWidth("100%");
		oSplitterV.setHeight("100%");

		//adding content to both panes
//		left panel
//create active material control table		
//		var oTable1 = this.getActiveMaterials();
//		var oText = new sap.ui.commons.TextField({value:"Edward"});
//		add controllers to vertical layout
		
//		create panel 
//		var oPanel = new sap.ui.commons.Panel({width: "370px"});
//		set title of the panel
//		oPanel.setTitle(new sap.ui.core.Title({text: "Current Working Context"}));

		var oLayout = new sap.ui.commons.layout.VerticalLayout("LayoutLeft", {
			content: [this.getWrkContext(),this.getActiveMaterials(),this.getActiveWorshops()]
		});
//		oPanel.addContent(oLayout);
		oSplitterV.addFirstPaneContent(oLayout);
//		var oLabel2 = new sap.ui.commons.Label({text: "Second Pane"});
		var oLayout2 = new sap.ui.commons.layout.VerticalLayout("LayoutRight", {
			content: [this.getMaterialLevel(),this.getPlantLevel()]
		});
		oSplitterV.addSecondPaneContent(oLayout2);	
		return oSplitterV;

 }


var shell = new sap.ui.ux3.Shell("appShell", {
	appIcon: "img/SAPLogo.gif",
	appTitle: "SAP UI5 Training",
	showFeederTool: false,
	showLogoutButton: true,
	showPane: false,
	showTools: false,
	headerType: sap.ui.ux3.ShellHeaderType.SlimNavigation,
	designType: sap.ui.ux3.ShellDesignType.Standard,
	logout: function() { alert("logout pressed!");}
});

shell.addHeaderItem(this.getCurrentUser());

shell.addHeaderItem(new sap.ui.commons.Button({ 
	text: "Personalize",
	tooltip: "Personalize",
	press: function() {  shell.openPersonalizationDialog(); },
}));

shell.addHeaderItem(this.getHelpMenu());
shell.addHeaderItem(this.getPIOLogo());

shell.addWorksetItem(this.getHomeMenu());
shell.addWorksetItem(this.getSetupMenu());
shell.addWorksetItem(this.getConfigurationMenu());
//add content 
//shell.addPaneContent(this.getLeftSide());
var that = this;
shell.attachWorksetItemSelected (function (evt) {
	var key = evt.getParameter("key");
	var content = that.getShellContent(key);
	shell.setContent(content);
});

shell.setContent(this.getShellContent("ni01"));

shell.placeAt("content");