Answered

Make the entire row of list table clickable

(0) Share

Report

Posted on by ThareLyn

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

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.

Categories:

Power Apps portals

I have the same question (0)

All responses (20)

Answers (1)

oliver.rodrigues 9,368 Most Valuable Professional on at

Like (2)

Report

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.

Was this reply helpful? Yes No
Verified answer

oliver.rodrigues 9,368 Most Valuable Professional on at

Like (3)

Report
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); }); } }); }); };

Was this reply helpful? Yes No
v-albai-msft on at

Like (0)

Report

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

Was this reply helpful? Yes No
DylanR 50 on at

Like (0)

Report
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); }); } }); }); }

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

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.

Was this reply helpful? Yes No
DylanR 50 on at

Like (0)

Report

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

Here is where I have added the script.

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

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

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.

Was this reply helpful? Yes No
DylanR 50 on at

Like (0)

Report
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); }); } }); }); }

Was this reply helpful? Yes No
oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report
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:

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

Was this reply helpful? Yes No
DylanR 50 on at

Like (0)

Report

Hi @OliverRodrigues
Thank you for your reply. I have added it to that location as below snippets show. I'm not sure if I've missed something in the script? The script doesn't run at all.

Was this reply helpful? Yes No