Add JavaScript to modern lists

(1) Share

Report

Posted on by taraubianca25

100

Hi,

I am using the new modern list component that is in preview right now. It looks really good compared to the old one.

I would like to add some JavaScript to the list, but I can not identify what would be the right function to identify it. As for the old list component, the function started always like this:

$(document).ready(function (){ $(".entitylist.entity-grid").on("loaded", function () {
........

I tried using different classes from the Inspect Element which I thought would identify correctly the list, but no luck.

Any ideas what would be the new structure?

Thank you.

Categories:

All responses (6)

Answers (1)

vitalii_hladkyi 10 on at

Like (0)

Report

Re: Add JavaScript to modern lists

Thanks!
MutationObserver in combination with setInterval works perfect for me
Fubar 7,962 Super User 2025 Season 1 on at

Like (0)

Report

Re: Add JavaScript to modern lists

As it doesn't load the same way as a standard list no idea if there is any plans to add things like onloaded events or not, in the meantime rather than a timer, you should also be able to use a javascript MutationObserver which lets you catch changes to the DOM.
Inogic 1,023 Super User 2025 Season 1 on at

Like (0)

Report

Re: Add JavaScript to modern lists

Hi,

Glad our solution helped.

Thanks!
Inogic Professional Services: Power Platform/Dynamics 365 CRM
An expert technical extension for your techno-functional business needs
Drop an email at crm@inogic.com
Service: https://www.inogic.com/services/
Tips and Tricks: https://www.inogic.com/blog/
vitalii_hladkyi 10 on at

Like (0)

Report

Re: Add JavaScript to modern lists

Hi!
It make sence, but it won't work if user will try to sort items. It would be great if there was some kind of event, like on old lists "onload" event, so the code will fire after items are loaded
But I got your idea, thanks!
Verified answer

Inogic 1,023 Super User 2025 Season 1 on at

Like (2)

Report

Re: Add JavaScript to modern lists

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!
Inogic Professional Services: Power Platform/Dynamics 365 CRM
An expert technical extension for your techno-functional business needs
Drop an email at crm@inogic.com
Service: https://www.inogic.com/services/
Tips and Tricks: https://www.inogic.com/blog/
vitalii_hladkyi 10 on at

Like (0)

Report

Re: Add JavaScript to modern lists

I have the same issue. Looks like modern lists doesn't load js files from "lists" forler at all.
Anyone found workaround?