sap.m.table css grid

[benlim]

Hi,

How can I draw cell border in sap.m.table using CSS?

Does the values of the column can combine into 1 value if they are having the same value?

Regards,

Ben

[benlim]

[Updated] I'm able to remove the grey line between the rows and use Merge properties to merge in the table but still not manage to loop the objects and draw the border for the columns that having same value. Anyone have such experience?

I added below properties in the CSS file to remove the row separator. Does this approach is a best practice of doing this?

.sapMLIBShowSeparator>td { border-top: 0px solid #ff0000; }

[iftah_peretz · Accepted solution]

Hey,

This is not going to be pretty.

You can work on the CSS side but you'll have a lot of issues if you'd need to set the design dynamically.

I'm attaching a code snippet that registers an event in the "onInit" named "updateFinished" that is handled later in the function "onUpdateFinished".

In it, I randomly took the second item (you can put your own logic on deciding which one to style its border) and via the DOM reference I changed it's style to have borders (see var domRef).

There are many issues with this example, especially if your app is in some supper app, but you would have to deal with that.

The code I manipulated is based on the Fiori work-list app.

The relevant code in Worklist.controller.js:

		onInit: function() {
			var oViewModel,
				iOriginalBusyDelay,
				oTable = this.byId("table");


			// Put down worklist table's original value for busy indicator delay,
			// so it can be restored later on. Busy handling on the table is
			// taken care of by the table itself.
			iOriginalBusyDelay = oTable.getBusyIndicatorDelay();
			// keeps the search state
			this._aTableSearchState = [];


			// Model used to manipulate control states
			oViewModel = new JSONModel({
				worklistTableTitle: this.getResourceBundle().getText("worklistTableTitle"),
				saveAsTileTitle: this.getResourceBundle().getText("saveAsTileTitle", this.getResourceBundle().getText("worklistViewTitle")),
				shareOnJamTitle: this.getResourceBundle().getText("worklistTitle"),
				shareSendEmailSubject: this.getResourceBundle().getText("shareSendEmailWorklistSubject"),
				shareSendEmailMessage: this.getResourceBundle().getText("shareSendEmailWorklistMessage", [location.href]),
				tableNoDataText: this.getResourceBundle().getText("tableNoDataText"),
				tableBusyDelay: 0
			});
			this.setModel(oViewModel, "worklistView");
			// Make sure, busy indication is showing immediately so there is no
			// break after the busy indication for loading the view's meta data is
			// ended (see promise 'oWhenMetadataIsLoaded' in AppController)
			oTable.attachEventOnce("updateFinished", function() {
				// Restore original busy indicator delay for worklist's table
				oViewModel.setProperty("/tableBusyDelay", iOriginalBusyDelay);
			});


		},


		/* =========================================================== */
		/* event handlers                                              */
		/* =========================================================== */


		/**
		 * Triggered by the table's 'updateFinished' event: after new table
		 * data is available, this handler method updates the table counter.
		 * This should only happen if the update was successful, which is
		 * why this handler is attached to 'updateFinished' and not to the
		 * table's list binding's 'dataReceived' method.
		 * @param {sap.ui.base.Event} oEvent the update finished event
		 * @public
		 */
		onUpdateFinished: function(oEvent) {
			// update the worklist's object counter after the table update
			var sTitle,
				oTable = oEvent.getSource(),
				iTotalItems = oEvent.getParameter("total"),
			        domRef = oTable.getItemsContainerDomRef();
                        //Set some random item's border    
			domRef.children[1].children[1].style = "border-top: 2px solid black !important;" +
				"border-bottom: 1px solid black !important; border-left: 2px solid black !important; border-right: 2px solid black !important";
			// only update the counter if the length is final and
			// the table is not empty
			if (iTotalItems && oTable.getBinding("items").isLengthFinal()) {
				sTitle = this.getResourceBundle().getText("worklistTableTitleCount", [iTotalItems]);
			} else {
				sTitle = this.getResourceBundle().getText("worklistTableTitle");
			}
			this.getModel("worklistView").setProperty("/worklistTableTitle", sTitle);
		},

[iftah_peretz · Accepted solution]

Here is the final result add-border.png.

[benlim · Accepted solution]

Hi Iftah Peretz,

Thanks for your response.

I've tried to merge across column in sap.m.table and notice it's the limitation on this control. So I tried to design in CSS whether it is possible with this. My design would be dynamic and the table will not have fix column.

Actually my expected final output would be like below layout. I'll need to draw the border for each item and merge those value across column which having the same value.

Any suggestion on how to populate below layout?

[iftah_peretz · Accepted solution]

Hi,

I've given you a cell based solution and I now understand that this might not suffice. Am I right?

If this is the case, there's always an option to revert back into HTML component that you can control completely design wise and use it as a presentation container for your data the way you want to.

Another option is to search for a better fit for you needs in the SDK. Meaning, not to keep that data sap.m.table.

[benlim · Accepted solution]

Hi Iftah,

The output will be dynamic. How could I manupulate using HTML component? Let say I have below maintenance table, how can I read cell by cell and generate the output using HTML component?

[iftah_peretz · Accepted solution]

Generate any table you want (the generator is just so you can get the hang of it - Google some more on table design in HTML), once you get it pass it with data as a string and build the HTML .

[benlim · Accepted solution]

Hi Iftah Peretz,

Thanks for your suggestion. I managed to display the expected layout Sample output

However, I still have some queries on this HTML api.

1.) Since the layout will be dynamic, how could I design for my database in order for me to extract as a json format so that I'm able to generate as a HTML string?

2.) By using HTML component, am I able to click each of the cell and perform further action for example view details of that selected cell by calling a dialog screen?

Appreciate much for your guidance.

[iftah_peretz · Accepted solution]

Hi,

I'm happy you are seeing progress in your project.

as for your questions:

1. Your data is just another string that needs to be added to the HTML content string. You can even do this in the background and pass the whole string as your data to be placed as the HTML string. Build your styling logic to fit your needs - based on the data.
2. Yes. But this is beyond this scope. You'll need to dig into the API and Google (start here).