Adding a Color to Alternate Rows in a Detail with Tile View in Creatio

When viewing a list in Creatio, whether a section list or a detail list, there are two views you can chose from: List view or Tile view. List view is more of a typical datagrid like display with single rows of data and tile view is where you can have multiple rows of fields for each record. In list view, you get a nice alternating background of gray on every other row, but this is missing when the list is in tile view. This article will show you what to add to get the same alternating gray color in lists with tile mode as well. When the changes are added, any detail in tile view will look like this:

Notice the gray background on every other row. Normally, you would get this, with no alternating background color:

A detail in list view, does have this alternating color out of the box, like this:

To add this, you’ll need to add some custom CSS to Creatio. We’ll want this CSS to be global to the entire Creatio application so we’ll be adding it to the BootstrapModulesV2. I have an article covering this here:

Applying Global CSS Styles in Creatio

If you want to add this alternating style to only the details on a given page, you can add it to that page only. However, for this article, we want this to apply to any/all details in tile view. For this to apply everywhere, we’ll to add our CSS to BootstrapModulesV2. First, we need to create our nodule that will contain our CSS. As outlined in the article above, create a new module, we will name it UsrListTileStyleCSS. Then, we’ll add the following CSS on the LESS tab:

.grid-detail .grid-tiled .grid-row.grid-active-selectable {
    border-top: 1px solid #e0e0e0 !important;
}

.grid-detail .grid-tiled .grid-row.grid-active-selectable:before {
    content: none !important;
}

.grid-detail .grid-tiled .grid-row.grid-active-selectable:nth-child(even) {
    background-color: #f7f7f7;
}

Then, to have this load everywhere we’ll need to create an overriding schema for BootstrapModulesV2 to have it load our CSS. To do this refer to my article on applying global CSS styles. That is it. Now when you reload your browser you’ll see the alternating color rows in details in tile view, no matter which page they are on.

Added Bonus

You can also have this same style apply to section lists as well by modifying the CSS above and simply removing the .grid-detail before each style. When you do that, you’ll get the alternating color on section lists in tile view *and* on detail lists in tile view. Here’s what that will look like: