Hi,
The new Layout control opens new grounds to discover how to customize the grid with custom CSS and SCRIPTS,
We have optimized the grid with the below JavaScript simple logic which works pretty well,
Navigate to the Visual Studio for the target Web page from the Design Studio,
Paste the given Code Snippet in the Js file of the Target Web page,
let list_interval = setInterval(() => { ... }, 100);: This sets up a repeated action that runs every 100 milliseconds. The action checks if any elements with the attribute data-automationid="DetailsRowCell" exist in the DOM.
Once the element is loaded clearInterval removes the interval.
list_interval is wrapped into the GridOptimization() which is called within once document is loaded.
$(document).ready( ()=> {
GridOptimization();
});
function GridOptimization() {
let list_interval = setInterval( ()=> {
if ($('div[data-automationid="DetailsRowCell"]').length != 0) {
//You can add your logic here.
$(".ms-DetailsRow-fields.fields-213").css("color", "blue")
clearInterval(list_interval);
}
}, 100)
}
Save and Sync the Power Pages site,
After Save and Sync, the Portal looks like below where the change we tried to achieve was to change the font of data present in the list using javascript.
Hope this helps.
Thanks!
