Create links in Kentico reports - hyperlink

Question

I'd like to add clickable links to a Kentico Report. The report editor allows you to add all kinds of HTML mark-up in the layout, but it doesn't allow you to add HTML INSIDE of a table that you've inserted into the layout. (Or if it does, it is not obvious from the UI, or from the Kentico documentation.) I want a link to appear in each row, and the link should include a value from that row.
Clicking any of the links would open another page that shows more data about a particular record. In my case, my first column is an ID column and I want its value (in each row) to behave like a hyperlink to another page whose URL includes the clicked ID value as a parameter.

Answer 1

We can use jquery within our Kentico report to allow each value in a particular field to cause a link to be opened when clicked. In my case, I have a URL into which I want to embed an ID value from the report. I want to open one of the admin pages whose URL looks like the following (where 9999 is replaced with a record ID from my report):
/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=00000000-0000-abcd-0123-000000000000&objectid=9999&displaytitle=false
So let's assume the first field in the report is an ID column and we want to make the displayed ID behave like a link to some other page.
First we need jquery. Edit the report's layout in '<>Source' mode and add a script reference for jquery, such as one you can get from code.jquery.com, or just reference it locally if you have it:
<script src="/jquery-3.4.0.min.js"></script>
Next, we must find each ID field and then make it behave like a hyperlink. To do so, we find the <th> with the ID column's title, walk up to the <table>, and then find all <tr>s immediately under the <tbody>. Once we have each <tr>, we iterate through them to:
underline the ID value like a hyperlink
set the cursor to a hand like a hyperlink
add an onclick event to do open a URL (in a new tab) with my ID field's value
So here is the script. Add it just like you added the jquery script tag. (but add it after the jquery script tag)
<script>
$('th:contains("MyIDColumnTitle")').parents('table').first().children('tbody').children('tr').each(function() {
$(this).children('td').first()
.css('text-decoration','underline')
.css('cursor','pointer')
.click(function(){
var thisId = $(this).text();
var u = "/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=00000000-0000-abcd-0123-000000000000&objectid=" + thisId + "&displaytitle=false"
window.open(u,'_blank');
});
});
</script>
Keep in mind that if MyIDColumnTitle is not very unique, this script may find the wrong th and table. Modify the jquery selector to suit your needs. You may want to add a wrapping element around your report that has an element ID so you can be specific with your selector.
It wouldn't be difficult to take the same concept and use it to launch a page in a modal dialog instead.