Display Column Type = Hyperlink on Home

27337

Hello. 

There are two data fields for the isheet column type "Hyperlink" (I'll call the column "Site"). 1) Display Name (e.g. Google), and 2) URL (e.g. https://www.google.com).

I want to insert the URL value in an <a href> using javascript on the Home page. Something along the lines of:

    if(colID == columns["Site"

        content += '<td><a href="' + value [url] + '">' + value [DisplayName] + ' </a></td>';
        }

I would be grateful if you can advise what I'm doing wrong?

My thanks in advance!

Nick

]]>
  • Nick Fernley, what's your data source? ExportXML? and how have you processed it? Does "value" variable have a key/value JSON object. If so, should it be this if "url" and "DisplayName" are your keys?

     

    '

    "

    ' + value["DisplayName"] + ' '; ]]>
  • Hi Andrew Quinn, and thank you for your response. I'm calling .isheetExportType=xml using ajax. I'm not sure if the "url" and "display name" have key/values (I don't know how to check this). I am referring to the isheet record data as per the screen below for the column id "Site". Again, my thanks

  • Hi Nick Fernley, I've provided a complete example to achieve what you are looking to do. The code includes comments to describe what's going on, if not for you then for other users reading this post in the future looking to achieve something similar:

    <div id="CommunityExamples">
        <table class="table table-condensed export-data">
            <thead>
                <tr>
                    <th>Site Url</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Loading...</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
    
        // When the HTML page is ready for us JQuery will call our function
        $j(function() {
    
            CommunityExamples.getISheetExportXML({
                siteID: 1111,
                sheetID: 2222,
                sheetViewID: 3333
            }).then(function($data) {
    
                // our link column ID
                var linkColumnID = CommunityExamples.getColumnIdByName($data, "Site");
    
                // iterate through the iSheet records returned and translate each item
                // to an equivalent HTML table row with the required columns, and data from the iSheet Item
                var $rows = $data.find("view > data > item").map(function(idx, el) {
                    // find the link column in this iSheet Item data
                    var $linkColumn = $j(el).find("> column[columnid=" + linkColumnID + "
    ); // and construct the HTML table row using the data from this iSheet item var $link = $j("") .attr("href", $linkColumn.find("linkDisplayURL").text()) .attr("target", "_blank") .html($linkColumn.find("linkDisplayName").text()); return "
    "
    + $link.get(0).outerHTML + ""; }); // convert the JQuery Array to a standard Javascript Array, and join each element // in the array to create one (concatenated) string, which we then set as the // HTML table's body - replacing any previous table body contents $j("#CommunityExamples table.export-data tbody").html($rows.toArray().join("")); }) }); var CommunityExamples = { // function to retrieve the ExportXML data for our iSheet View getISheetExportXML: function(params) { return $j.ajax({ "dataType": "xml", "url": "./sheetViewExportXML.action?" + $j.param({ "metaData.siteID": params.siteID, "metaData.sheetId": params.sheetID, "metaData.sheetViewID": params.sheetViewID, "metaData.isheetExportType": "xml" }) }).then(function(data) { // return the XML data as a JQuery fragment return $j(data); }); }, getColumnIdByName: function($data, columnName) { return +$data // get all the column headers .find("view > head > headColumn > columnValue") // and find the required column (by name) .filter(function(idx, el) { return $j(el).text() === columnName; }) // then extract the column ID from the parent of the element found .parent() .attr("columnid"); } }; </script>

    The code above is provided as only an example and doesn't include best practices, which would be advisable when writing Production code.

    Any questions, just post them. Hope this helps,

    Andrew

    ]]>
  • Hi Andrew Quinn. Thank you so much for your detailed and considerate response. It is very much appreciated. I'll try out your code and let you know how I get on a bit later on in the week. Again, my thanks! Nick

  • That worked a charm, thanks Andrew Quinn. I now just need to figure out how I append a call to display the data from the other iSheet columns in the HTML table. Again, my sincere thanks

  • Nick Fernley, something along the lines of...if imaginary column was called "Site Type" and it was a SingleLineText column in the iSheet:

    // our link column ID
    var linkColumnID = CommunityExamples.getColumnIdByName($data, "Site");
    
    // my other column
    var otherColumnID = CommunityExamples.getColumnIdByName($data, "Site Type");
    
    // iterate through the iSheet records returned and translate each item
    // to an equivalent HTML table row with the required columns, and data from the iSheet Item
    var $rows = $data.find("view > data > item").map(function(idx, el) {
    	
    	// find the link column in this iSheet Item data
    	var $linkColumn = $j(el).find("> column[columnid=" + linkColumnID + "
    ); // and construct the HTML table row using the data from this iSheet item var $link = $j("") .attr("href", $linkColumn.find("linkDisplayURL").text()) .attr("target", "_blank") .html($linkColumn.find("linkDisplayName").text()); // get the iSheet Item data for the other column (Site Type) var otherColumnValue = $j(el).find("> column[columnid=" + otherColumnID + "] > displayData").text(); return "
    "
    + $link.get(0).outerHTML + "
    "
    + otherColumnValue + ""; });

    Of course, creating helper functions would make the code more compact and easier to read, the more columns you are accessing to build the table row.

    Andrew

    ]]>
  • Andrew Quinn, you are a gent. That worked a treat! Bottle of scotch is on it's way! Thank you again