Changing a Detail Grid to a Horizontal Layout instead of Vertical Rows in Creatio (formerly bpm’online)

One of the things I love about Creatio is how it is so simple for a non-developer to customize while still allowing developers to take it further, all at the same time. In this article, we’ll completely change how a detail grid is displayed by taking it further with some CSS. In short, we’ll modify the detail’s grid from vertical rows to horizontal cells. We’ll change it into this, with the rows represented by horizontal cells:

Here’s another example, this time with borders & color for each cell:

This is created from just a standard detail like this, with some CSS to modify the layout:

Let’s take a look how to get there. First, we’ll start with our normal detail, as shown in the first screenshot. In my example, I have a detail with just a single Contact lookup. I’ve modified the detail to add items from a contact lookup.

Now, I’ll modify the detail to show in tile layout so it shows the contact photo, so it looks like this:

I don’t want users to be able to change this layout, so I will remove the ability to modify it. Now it’s time to add the special sauce, the CSS. I will add the following CSS to my page. My detail schema is named UsrSchema2Detail. Note, this isn’t the ID of the detail as reflected in the page diff, it’s the actual schema name for the detail file itself. In the CSS below, you’ll need to replace UsrSchema2Detail with the name of your detail schema for this to work (note, uncomment the lines marked (optional) if you want to have color & borders for the cells like the image above):

#UsrSchema2DetailDetailControlGroup-wrap {
	padding-top: 10px;
	padding-bottom: 15px;
}
#grid-UsrSchema2DetailDataGridGrid-wrap.grid-tiled {
	.grid-pad {
		display: inline-block;
		width: 160px !important;
		height: 45px;
		margin-right: 3px;
		padding: 0;
		border: 1px solid transparent; 
		/* (optional) border: 1px solid #d6d4d4; */
		border-radius: 3px;
		/*(optional) background-color: #f8f8f8;*/
		&:hover {
			border: 1px solid #e0e0e0;
			/* (optional) border: 1px solid #aeaeae;
    			background-color: #eaeaea;*/
		}
		&:before {
			content: '';
			height: 0;
		}
		&:after {
			content: '';
			height: 0;
		}
	}
}

Once we’ve added that CSS, the grid will now work like this:

Not only does it take less vertical space on the page, it’s a nice visual list that is still easy to use and works in the same way the detail list works normally with adding/editing/deleting, even with multi-select.