Columns Rearrangement for Sap.m.Table in SAP UI5

[ashok143]

Hi All,

 

Today In this blog I am going to explain how to rearrange the columns for a table.

Actually I got a requirement to rearrange the columns of a Table after Initial arrangement.

By arranging the columns he need to alter column for correcting the value by Comparing the other columns and doesn't require all the columns to visible at a time.

I have taken 9 columns in that Initially 4 columns will be visible and the remaining will be hided. For that I have taken a JSON data and binded the columns to the table.

We have a control named " P13N Dialog" by using this dialog we can rearrange the columns and also we can personalize it.

Let's see how I achieved it.

 

View.view.xml : 

<mvc:View controllerName="p13nDialog.controller.View1" 

xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

displayBlock="true" xmlns="sap.m">

<App>

<pages>

<Page title="{i18n>title}">

<content>

<Button text="p13NBut

<Table id="AssetTable

<columns>

<Column demandPopin="true" minScreenWidth="Tablet" popinDisplay="Inline" 

visible="{columns>visible}" width="100%">

<Text text="{columns>columnKey}"/>

</Column>

</columns>

<ColumnListItem>

<cells>

<Text text="Product ID "/>

<Text text="Name"/>

<Text text="Category"/>

<Text text="Supplier Name"/>

<Text text="Description"/>

<Text text="10"/>

<Text text="5"/>

<Text text="50"/>

<Text text="Status"/>

</cells>

</ColumnListItem>

</Table>

</content>

</Page>

</pages>

</App>

</mvc:View>

 

JSON Data for Columsn:

{

	"ColumnCollection": [{

		"columnKey": "Product ID",

		"visible": true

	}, {

		"columnKey": "Name",

		"visible": true

	}, {

		"columnKey": "Category",

		"visible": true

	}, {

		"columnKey": "Supplier Name",

		"visible": false

	}, {

		"columnKey": "Description",

		"visible": true

	}, {

		"columnKey": "Weight Measure",

		"visible": false

	}, {

		"columnKey": "Weight Unit",

		"visible": false

	}, {

		"columnKey": "Price",

		"visible": false

	}, {

		"columnKey": "Status",

		"visible": false



	}]

}

 

View.controller.js :

Initially I binded the columns which I need to be visible for the data.

sap.ui.define([

	"sap/ui/core/mvc/Controller"

], function(Controller) {

	"use strict";

return Controller.extend("p13nDialog.controller.View1", {

onInit: function() {

var oJSONModel = new sap.ui.model.json.JSONModel();

oJSONModel.loadData("model/columns.json");

this.getView().setModel(oJSONModel, "columns");



		},

});

});

 

I have a Placed a Button in the View to open a Dialog with the columns which are currently visible are selected.

p13nDialog.fragment :

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">

<P13nDialog showReset="true" showResetEnabled="true" ok="onOK" 

cancel="onCancel" reset="onReset" class="sapUiSizeCompact" >

<panels>

<P13nColumnsPanel  items="{path: 'p13Dialog>/ColumnCollection'}" 

columnsItems="{path: 'p13Dialog>/ColumnCollection'}">

<items>

<P13nItem columnKey="{p13Dialog>columnKey}" text="{p13Dialog>columnKey}"/>

</items>

<columnsItems>

<P13nColumnsItem columnKey="{p13Dialog>columnKey}" 

visible="{p13Dialog>visible}"  />

</columnsItems>

</P13nColumnsPanel>

</panels>

</P13nDialog>

</core:FragmentDefinition>

 

code for opening the dialog box when the button is pressed.

onP13nDialog: function() {

var openAssetTable = this.getView().byId("AssetTable"),

columnHeader = openAssetTable.getColumns();

var openAssetColumns = [];

for (var i = 0; i < columnHeader.length; i++) {

var hText = columnHeader[i].getAggregation("header").getProperty("text");

var columnObject = {};

columnObject.columnKey = hText;

columnObject.visible = columnHeader[i].getBindingContext("columns").

getModel().getProperty(columnHeader[i].getBindingContext(

"columns").getPath()).visible;

openAssetColumns.push(columnObject);

			}



var cJSONModel = new sap.ui.model.json.JSONModel({

	ColumnCollection: openAssetColumns

});

this.getView().setModel(cJSONModel, "p13Dialog");



var dialog = sap.ui.xmlfragment("p13nDialog.view.p13",

 this.getView().getController());

this.getView().addDependent(dialog);

dialog.open();

		},

 

After rearranging the columns which will need to be visible will be selected.

onOK: function(oEvent) {

var data = {

ColumnCollection: oEvent.getParameter("payload").columns.tableItems

	};



var oJSONModel = new sap.ui.model.json.JSONModel();

oJSONModel.setData(data);

this.getView().setModel(oJSONModel, "columns");

this.byId("AssetTable").setWidth("100%");

this.columnListItem();

oEvent.getSource().close();

		},

 

After selecting the columns and rearranging if you need to cancel.

onCancel: function(oEvent) {

var data = this.getView().getModel("columns").getData();

var oJSONModel = new sap.ui.model.json.JSONModel();

oJSONModel.setData(data);

this.getView().setModel(oJSONModel);

this.byId("AssetTable").setWidth("100%");

this.columnListItem();

oEvent.getSource().close();

		},

 

If you need to reset the columns which are Initially we will have a option to reset to make visible that we need to set the property showReset="true" showResetEnabled="true"  for p13n Dialog.

onReset: function() {

	var oJSONModel = new sap.ui.model.json.JSONModel();

	oJSONModel.loadData("model/columns.json");

	this.getView().setModel(oJSONModel, "p13Dialog");

	this.byId("AssetTable").setWidth("100%");

},

 

In this the most important thing is rearranging the cells data by ordering the columns. this is placed in the Columnlist function and placed when cancel/ Ok function is triggered.

columnListItem: function() {

	if (this.byId("newRow") !== undefined) {

		this.byId("newRow").destroy();

	}

	this.byId("AssetTable").destroyItems();

	var data = this.getView().getModel("columns").getData().ColumnCollection;

	var columnlist = [];

	var columnObject = {};

	columnObject.Column = new sap.m.Text({

		text: "ProductID"

	}).addStyleClass("sapUiSizeCompact");

	columnObject.coulmnKey = "Product ID";

	columnlist.push(columnObject);

	columnObject = {};

	columnObject.Column = new sap.m.Text({

		text: "Name"

	}).addStyleClass("sapUiSizeCompact");

	columnObject.coulmnKey = "Name";

	columnlist.push(columnObject);

	columnObject = {};

	columnObject.Column = new sap.m.Text({

		text: "Category"

	}).addStyleClass("sapUiSizeCompact");

	columnObject.coulmnKey = "Category";

	columnlist.push(columnObject);

	columnObject = {};

	columnObject.Column = new sap.m.Text({

		text: "SupplierName"

	}).addStyleClass("sapUiSizeCompact");

	columnObject.coulmnKey = "Supplier Name";

	columnlist.push(columnObject);

	columnObject = {};

	columnObject.Column = new sap.m.Text({

		text: "Description"

	}).addStyleClass("sapUiSizeCompact");

	columnObject.coulmnKey = "Description";

	columnlist.push(columnObject);

	columnObject = {};

	columnObject.Column = new sap.m.Text({

		text: "10"

	}).addStyleClass("sapUiSizeCompact");

	columnObject.coulmnKey = "Weight Measure";

	columnlist.push(columnObject);

	columnObject = {};

	columnObject.Column = new sap.m.Text({

		text: "5"

	}).addStyleClass("sapUiSizeCompact");

	columnObject.coulmnKey = "Weight Unit";

	columnlist.push(columnObject);

	columnObject = {};

	columnObject.Column = new sap.m.Text({

		text: "50"

	}).addStyleClass("sapUiSizeCompact");

	columnObject.coulmnKey = "Price";

	columnlist.push(columnObject);

	columnObject = {};

	columnObject.Column = new sap.m.Text({

		text: "Status"

	}).addStyleClass("sapUiSizeCompact");

	columnObject.coulmnKey = "Status";

	columnlist.push(columnObject);

	var columns = [];

	for (var i = 0; i < data.length; i++) {

		for (var j = 0; j < columnlist.length; j++) {

			if (data[i].columnKey === columnlist[j].coulmnKey) {

				columns.push(columnlist[j]);

			}

		}

	}

	var newRow = new sap.m.ColumnListItem(this.createId("newRow"), {

		cells: [

			columns[0].Column,

			columns[1].Column,

			columns[2].Column,

			columns[3].Column,

			columns[4].Column,

			columns[5].Column,

			columns[6].Column,

			columns[7].Column,

			columns[8].Column

		]

	});

	this.byId("AssetTable").addItem(newRow);

}

 

At present I have added only one row you can bind the data by using its aggregation to the table.

 

OutPut:

Initial view:



p13nDialog:



 

deselcting two columns and selecting the columns which are not visible and moving Product Id to 5th position in the selected Item list and Press Ok.





 

Restoring the Initial columns click on the button dialog will open then click on Restore and Click on Ok.



 

Thanks all.

Hope this might help you to rearrange your columns as you like.