Add JavaScript to modern lists

[taraubianca25]

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.

[vitalii_hladkyi]

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

[Inogic · Accepted solution]

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]

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!

[Inogic]

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/

[Fubar]

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.

[vitalii_hladkyi]

Thanks!

MutationObserver in combination with setInterval works perfect for me