Manage Extensions
Create JavaScript and CSS code on the Manage Extensions page from the Manage Grids tab. This code can then be added to individual grids, or added to all grids globally.
Create New Extensions
Click the New button at the top of the page. In the Extension Details section, enter a Extension Name, choose the Type, and enter the Code Body. You can create multiple extensions and save them all at once by clicking the Save button. extensions with the Type “Global JavaScript” or “Global CSS” will be applied to all grids in the Salesforce org, whether they exist today or will be created in the future. extensions with the type “JavaScript” or “CSS” can be applied to specific grids by selecting them in the extensions section on page 1 of the Grid Wizard.
Modify Existing Extensions
Click on an extension name to see its details. In the Extension Details section, edit the Extension Name, Type, or Code Body. You can edit multiple extensions and save them all at once by clicking the Save button.
Delete Extensions
Check the box next to an extension name and click the Delete button. You can select multiple extensions and delete them all at once by clicking the Delete button.
Custom CSS Example
For custom CSS you would go to Manage Grids->Manage Extensions and create a new CSS or Global CSS component. Global works on all grids. Use CSS for an individual grid (That is applied in the Grid Configuration of a grid wizard). If you want to color the header, you would use this CSS statement:
.header-row td { background-color: #2baced !important; }
You can find color codes here: https://www.w3schools.com/cssref/css_colors.asp
For a child object header row:
.child-row th { background-color: #d1d2d3 !important; }
or
.child-row th { background-color: azure !important; }
To color a header by connection, you need to know the data source ID. This is the 32 character number like this: “3C97EA7A-97C2-483A-AD37-65CB9E1A9367?. You find this by using your browsers inspect function. To do this hover over the grid header of the data source you want, right click and use the inspect function. Here is an example of the resulting code to change the header:
.grid–wrapper .grid[ds-id=”3C97EA7A-97C2-483A-AD37-65CB9E1A9367?] > tbody > .header-row > td,
.grid–wrapper .grid[ds-id=”3C97EA7A-97C2-483A-AD37-65CB9E1A9367?] > thead > tr > th {
background: lightblue !important;
color: black !important; }
To update both the header and the data row:
/* Header */
.grid-wrapper .grid[ds-id=”3C97EA7A-97C2-483A-AD37-65CB9E1A9367?] > tbody > .header-row,
.grid-wrapper .grid[ds-id=”3C97EA7A-97C2-483A-AD37-65CB9E1A9367?] > thead > tr {
border: 3px
solid lightgreen;
}
/* Data row */
.grid-wrapper .grid[ds-id=”3C97EA7A-97C2-483A-AD37-65CB9E1A9367?] > tbody > .data-row {
border: 3px solid lightgreen;
}
