Promoted Views: Allow a column to be defined as Hyperlinks

L_Schick

We have custom extensions for SR's and IR's that we use to populate a URL to a third party project tracking system. It would be nice if that column in the promoted view would turn the addresses into a hyperlink so users can just click the link instead of copying and pasting into a new tab.

Adam_Dzyacky

Lot of potential uses here - 3rd party ticketing, knowledge base, sharepoint, SCOM alert URL.

Nicholas_Velich

Behind-the-scenes, the promoted view is using a "Kendo Grid" and it is possible to put HTML links or other HTML formatting in a Kendo Grid column based on the "encoded" property.

In order to do so, we need the proper formatting and a code snippet as shown in the post below (EDITED). Here is an example link format:

<a href="http://www.google.com">Test Link</a>

If that property were then displayed in the promoted view along with the below changes, it would be a clickable link.

Nicholas_Velich

Screenshots:

In the extended property you would put this (I used Title in this case)

Then, the column displays a clickable link:

L_Schick

For some reason it doesn't display as a link for me.

Nicholas_Velich

Weird. What Portal version and View Builder version?

L_Schick

Portal 5.0.5 and View Builder 7.5.0.41

Nicholas_Velich

Oops, looks like I fixed/broke my lab while testing this initially, and got a bit mixed up. Try the following code in your /CustomSpace/custom.js file in your Dev environment:

$(document).ready(function (){

        var url = window.location.href;

        if(url.indexOf("/View/6d915d45-1c8c-5dfb-11b8-ab67118abee2") > -1){ // Verify we are on the appropriate promoted view page

                setTimeout(function() { // Grid is not ready when the document is ready, so this delay is necessary

                        var grid = $('[data-role=grid]'); // Get the Grid object

                        var gridColumns = grid.data('kendoGrid').columns; // Get the columns object

                        var changes = false; // Boolean to determine if there are changes

                        for (var i = 0; i < gridColumns.length; i++) { // Loop through each column

                                if(gridColumns[i].encoded == true){  // Flip the encoded flag if it is found and mark that there were changes

                                        gridColumns[i].encoded = false;

                                        changes = true; 

                                }

                        }

                        if(changes == true){ // Only called if changes occured

                                app.lib.mask.apply('Building Links'); // Mask so the user doesn't seen screen jitter

                                $('[data-role=grid]').data('kendoGrid').dataSource.group([]); //  Trick to re-assess the encoding

                                setTimeout(function() { // Reload the page after a 1 second delay (enough time for the previous two lines to complete)

                                        window.location.href = url;

                                },1000);

                       }

                },2000);

        }

});


You will need to change the URL on line 3 to the URL of your promoted view.

Note: this code is flipping the encoded flag on all columns, which is probably unnecessary. We could probably add to the IF statement on line 10 the following:    gridColumns[i].title == "The Title of your column with the link"

L_Schick

Yes, that works much better :-) I'll play around with this to see how cumbersome it is to add all of my views to this, but it definitely helps in the short term.

L_Schick

As a work around for not having these link enabled by default we added a button to the form that opens the URL to the 3rd party site.

If it helps anyone else you can add the code below to your custom.js file and point it to the extension field you have your URL in. Then just add a button to your form

// Go To Project Site SR
app.custom.formTasks.add('ServiceRequest', null, function(formObj, viewModel){  
    viewModel.set("GoToProjectSiteSR", function() {

         var win = window.open(document.getElementsByName("WFN_ExtString28")[0].value, '_blank');
      win.focus();
      return;
 });
 });