cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ThareLyn
Helper I
Helper I

Make the entire row of list table clickable

Hi, So I have a requirement that the whole row should be clickable

ThareLyn_0-1624502115700.png

The first cell (blue font) is the only clickable part of the row, which it will redirect to new page for more details of the record.

I need to make the whole row act the same as the 1st cell.

Is there a ootb for this? if now how can I achieve this requirement? Thank you.

1 ACCEPTED SOLUTION

Accepted Solutions
OliverRodrigues
Super User
Super User

Please take a look at this JS that might help you:

$(document).ready(function () {
    SetLinkAllCells();
});

SetLinkAllCells = function () {

    var entityList = $(".entitylist.entity-grid").eq(0);

    entityList.on("loaded", function () {
        entityList.find("table tbody > tr").each(function (index, tr) {
            
            var primaryColumn = $(tr).find('td')[0];

            /// or retrieve column by name
            /// var primaryColumn = tr.find('td[data-attribute="name"]');

            var url = $(primaryColumn).find("a")[0].href;
            console.log("URL: " + url);
            if (!!url) {
                $(tr).find('td').each(function (index, td) {
                    /// ignore action menu / dropdown
                    if ($(td).attr("aria-label") == "action menu")
                        return;

                    var cellValue = $(td).text();
                    /// clear td value 
                    $(td).text("");
                    var newElement = '<a href="' + url + '" class="details-link has-tooltip" data-toggle="tooltip">' + cellValue + '</a>';
                    $(td).append(newElement);
                });
            }
        });
    });
};



If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

20 REPLIES 20
OliverRodrigues
Super User
Super User

There is no way OOB to achieve this, what you need to do is apply JS and add the link to every <td> from the table.

 

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

OliverRodrigues
Super User
Super User

Please take a look at this JS that might help you:

$(document).ready(function () {
    SetLinkAllCells();
});

SetLinkAllCells = function () {

    var entityList = $(".entitylist.entity-grid").eq(0);

    entityList.on("loaded", function () {
        entityList.find("table tbody > tr").each(function (index, tr) {
            
            var primaryColumn = $(tr).find('td')[0];

            /// or retrieve column by name
            /// var primaryColumn = tr.find('td[data-attribute="name"]');

            var url = $(primaryColumn).find("a")[0].href;
            console.log("URL: " + url);
            if (!!url) {
                $(tr).find('td').each(function (index, td) {
                    /// ignore action menu / dropdown
                    if ($(td).attr("aria-label") == "action menu")
                        return;

                    var cellValue = $(td).text();
                    /// clear td value 
                    $(td).text("");
                    var newElement = '<a href="' + url + '" class="details-link has-tooltip" data-toggle="tooltip">' + cellValue + '</a>';
                    $(td).append(newElement);
                });
            }
        });
    });
};



If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

v-albai-msft
Community Support
Community Support

Hi @ThareLyn ,

Yes, totally agree with @OliverRodrigues that at least for now, there is no OOTB to achieve this.

You may have a try with @OliverRodrigues 's code.

Best regards,

Allen

Hi @OliverRodrigues 
Thanks for sharing. I have the same need, but cannot get your shared script to work. I would really appreciate if you could review my example below and amend where I have gone wrong.
Thanks so very much!

 

$(document).ready(function () {
    SetLinkAllCells();
});

SetLinkAllCells = function () {

    var entityList = $(".opportunity.myform").eq(0);

    entityList.on("loaded", function () {
        entityList.find("table tbody > tr").each(function (index, tr) {
            
            var primaryColumn = $(tr).find('td')[0];

            /// or retrieve column by name
            /// var primaryColumn = tr.find('td[data-attribute="name"]');

            var url = $(primaryColumn).find("name")[0].href;
            console.log("https://myorg.powerappsportals.com/MyList/" + url);
            if (!!url) {
                $(tr).find('td').each(function (index, td) {
                    /// ignore action menu / dropdown
                    if ($(td).attr("aria-label") == "action menu")
                        return;

                    var cellValue = $(td).text();
                    /// clear td value 
                    $(td).text("");
                    var newElement = '<a href="' + url + '" class="details-link has-tooltip" data-toggle="tooltip">' + cellValue + '</a>';
                    $(td).append(newElement);
                });
            }
        });
    });
}

Hi @DylanR 

 

Are you getting any errors? Please confirm where did you add the script. If it is on the page you need to add under localised content> custom Javascript 

 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Hi @ragavanrajan 

Thanks for the speedy reply. I'm not getting any errors.

 

Here is where I have added the script.

 

DylanR_0-1628830224608.png

 

huh! 

Please try adding it under Localize Content 

 

In portal management 

1.Web pages > your web page > scroll down Localized content 

2. Advanced > Custom Javascript 

 

ragavanrajan_0-1628830490370.png

In portal studio 

 

1. Sync configuration and Browse website 

 

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

Hi @ragavanrajan 

I have added it to the location you've given and still no success. Is my script correct? It doesn't give any indication that it has attempted to run on page load.

 

 

$(document).ready(function () {
    SetLinkAllCells();
});

SetLinkAllCells = function () {

    var entityList = $(".opportunity.clientquestionnaire").eq(0);

    entityList.on("loaded", function () {
        entityList.find("table tbody > tr").each(function (index, tr) {
            
            var primaryColumn = $(tr).find('td')[0];

            /// or retrieve column by name
            /// var primaryColumn = tr.find('td[data-attribute="name"]');

            var url = $(primaryColumn).find("name")[0].href;
            console.log("https://myorg.powerappsportals.com/Client-Questionnaire/" + url);
            if (!!url) {
                $(tr).find('td').each(function (index, td) {
                    /// ignore action menu / dropdown
                    if ($(td).attr("aria-label") == "action menu")
                        return;

                    var cellValue = $(td).text();
                    /// clear td value 
                    $(td).text("");
                    var newElement = '<a href="' + url + '" class="details-link has-tooltip" data-toggle="tooltip">' + cellValue + '</a>';
                    $(td).append(newElement);
                });
            }
        });
    });
}
OliverRodrigues
Super User
Super User

hi @DylanR might be a bit confusing, but whenever we create a Web Page, there is an OOB plugin that duplicates that Web Page, creating what we call a "Localized Content Web Page".. this is because the Portals support multiple language, so each Web Page will always contain:

  • 1 main/root Web Page
  • 1 localized/content Web Page per each language

Any JS code should be placed in the Localized Content one, if you open your root Web Page, you will see the below sub-grid:

OliverRodrigues_0-1628841736181.png

Place the JS on that one and see if you have any luck




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (1,683)