{"id":1450,"date":"2022-08-30T15:16:38","date_gmt":"2022-08-30T15:16:38","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/19\/generating-a-hyperlink-from-variables-or-other-method-using-javascript-jquery-and-caml-for-a-sharepoint-list-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:38","modified_gmt":"2022-08-30T15:16:38","slug":"generating-a-hyperlink-from-variables-or-other-method-using-javascript-jquery-and-caml-for-a-sharepoint-list-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/generating-a-hyperlink-from-variables-or-other-method-using-javascript-jquery-and-caml-for-a-sharepoint-list-collection-of-common-programming-errors\/","title":{"rendered":"Generating a hyperlink from variables or other method (using JavaScript, jQuery, and CAML for a SharePoint List)-Collection of common programming errors"},"content":{"rendered":"

This is a question on how to get a hyperlink into a SharePoint table where the hyperlink has to be generated from variables containing certain parts of the link (unless there is a different or better way). My apologies if I am asking my question in an unclear or improper fashion – I am quite new to this type of integration and some of these technologies. I may have included a lot more detail than necessary.<\/p>\n

What I am doing:<\/strong><\/p>\n

Basically what I have is a SharePoint List that contains task items (called Task Test List). This is is published to a section of the site whose link looks like this:<\/p>\n

https:\/\/myteam.thiscompany.com\/techdev\/sandbox\/lists\/Task%20Test%20List\/Task%20List2.aspx<\/p>\n

We have created a .js file and published it to the Site Assets section. This JavaScript file also uses jQuery and a CAML query. What it does is pulls data from the Test Task List and uses it in a new task list (for testing) called SortList. This new list lives in a section called WebPart pages. The link for this site looks like this:<\/p>\n

https:\/\/myteam.thiscompany.com\/techdev\/sandbox\/WebPart%20Pages\/Forms\/AllItems.aspx<\/p>\n

The link for the actual page (called SortList) looks like this:<\/p>\n

https:\/\/myteam.thiscompany.com\/techdev\/Sandbox\/WebPart%20Pages\/SortList.aspx<\/p>\n

Basically, what all this does is: using a webpart, allow us in a test segment of the SP site to take that test task list and re-sort it using drag and drop (we select any row and drag it to where we want it to be in the list and it drops right there).<\/p>\n

The problem:<\/strong> On this drag and drop list (SortList), one of the columns is an Edit column. It pulls a hyperlink field from the source task list. Clicking the link allows us to edit the task item (whose data makes up the row) – it does this by using the task ID.<\/p>\n

However that link, when clicked, is going to the webparts page, and I need it to go to the Test Task List. So for example, it goes here on click:<\/p>\n

https:\/\/myteam.thiscompany.com\/techdev\/Sandbox\/WebPart%20Pages\/Edit<\/p>\n

But I need it to go here:<\/p>\n

https:\/\/myteam.thiscompany.com\/techdev\/Sandbox\/Lists\/AI%20Test%20List\/Task\/editifs.aspx?List=532ed23b%2D1041%2D4600%2D887f%2D58b08e1f4b9d&ID=1909&Source=https%3A%2F%2Fmyteam%2Ethiscompany%2com%2FSandbox%2FLists%2FTask%2520Test%2520List%2FTask%2520List2%2Easpx&Web=ba8a673c%2D8072%2D4a44%2Db895%2D4e1c1f962b2f<\/p>\n

All of this from the above link is what I think I need to change:<\/p>\n

List=532ed23b%2D1041%2D4600%2D887f%2D58b08e1f4b9d&ID=1909&Source=https%3A%2F%2Fmyteam%2Ethiscompany%2com%2FSandbox%2FLists%2FTask%2520Test%2520List%2FTask%2520List2%2Easpx&Web=ba8a673c%2D8072%2D4a44%2Db895%2D4e1c1f962b2f<\/p>\n

In my current URL I am pointing to “Task%20List” and the correct name should be: “Task%20Test%List”.<\/p>\n

The GUID to use for the List is “532ed23b%2D1041%2D4600%2D887f%2D58b08e1f4b9d”<\/p>\n

As far as I can tell, the important parameters are the list= (which will need to be hardcoded so I was thinking to add a list variable in the JS file and reference that) and the ID= (which I already have).<\/p>\n

If that is correct, I am looking for advice on how to do that because I don’t know. Or if there are other methods I would be grateful to know them.<\/p>\n

Here is the CAML query, looking at the data from the list:<\/strong><\/p>\n

function loadPrioritizedList() {\n    $(\"#tasksUL\").empty();\n\/\/ TDs below have to be 3 more width than the headers \n    $().SPServices({\n        operation: \"GetListItems\",    \n        webURL: myURL,\n        listName: targetListName,\n        CAMLViewFields: \"\",\n        CAMLQuery: '' +\n        '' +\n        '' +\n        '' +\n        '', \n        CAMLRowLimit: listrowlimit,  \n<\/code><\/pre>\n
And here is where I am using the data:<\/strong><\/p>\n
  CAMLRowLimit: listrowlimit,  \n            completefunc: function (xData, Status) {\n                $(xData.responseXML).SPFilterNode(\"z:row\").each(function() {\n                    var tdHtml = \"<\/code><\/pre>\n\n\" + PriorityFormat($(this).attr(\"ows_Priority_x0020_Number\")); + \"<\/code><\/td>\n” + ($(this).attr(“ows_Edit_x0020_Link”)).split(“, “)[1] + “<\/td>\n” + $(this).attr(“ows_Priority”) + “<\/td>\n” + TopItem($(this).attr(“ows_Top_x0020_Item_x003f_”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Purpose”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Work_x002d_Task_x0020_Order”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Work_x0020_Status”)) + “<\/td>\n” + FormatDate($(this).attr(“ows_DueDate”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Task_x0020_Type”)) + “<\/td>\n<\/tr>\n
“; $(“#tasksUL”).append(tdHtml);<\/p>\n
The code for the link is currently:<\/strong><\/p>\n
tdHtml = tdHtml + '<\/code><\/pre>\n'+ ($(this).attr(\"ows_Edit_x0020_Link\")).split(\", \")[1] +'<\/code><\/td>\n
';<\/code><\/p>\n
Here is what the SortList looks like:<\/strong> <\/p>\n
Here is the full code from the whole .js file:<\/strong><\/p>\n
\n\n    #tasksUL {\n        PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px\n    }\n    #tasksUL LI {\n        PADDING-BOTTOM: 0.4em; MARGIN: 0px 3px 3px; PADDING-LEFT: 1.5em; PADDING-RIGHT: 0.4em; HEIGHT: 10px; FONT-SIZE: 1.4em; CURSOR: pointer; PADDING-TOP: 0.4em\n    }\n    #tasksUL LI SPAN {\n        POSITION: absolute; MARGIN-LEFT: -1.3em\n    }\n    .listtable {\n        font-size:10px;\n        color:#333333;\n        border-width: 1px;\n        border-color: #729ea5;\n        border-collapse: collapse !important;\n        position: relative;\noverflow-y:auto;\nfloat:left !important; \n    }\n    .listtable_hdr th {\n        font-size:10px;\n        background-color:#acc8cc;\n        border-width: 1px;\n        padding: 4px;\n        border-style: solid;border-color: #729ea5;\n        text-align:left;\n    }\n    .listtable tr {\n        background-color:#d4e3e5;\n    }\n    .listtable td {\n        font-size:10px;\n        border-width: 1px;\n        padding: 4px;\n        border-style: solid;\n        border-color: #729ea5;\n        vertical-align:center;\nborder-collapse: collapse;\n    }\n    .listtable_hdr\n    {   \/* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here *\/\n        position: static;    float: left;                        \n    }\n\n\n\n\n\n\n\n\n    \/\/CONFIGURATION VARIABLES\n    \/\/Assumes that this list is on the same site as the WebPart\n    var targetListName = \"Task Test List\";\n    var myURL = \"https:\/\/myteam.thiscompany.com\/techdev\/Sandbox\"\n    var updatecount = 100;\n    var listrowlimit = 50;\n    var tablewidth = 975;\n\n    var fixHelperModified = function(e, tr) {\n\n        var $originals = tr.children();\n        var $helper = tr;\n\n        $helper.children().each(function(index) {\n            $(this).width($originals.eq(index).width())\n        });\n    $helper.width(tablewidth);\n\n        $helper.css('background-color', '#d3e324');\n\n        return $helper;\n    };\n\n    function PriorityFormat(item) {\n        if (typeof item === 'undefined')\n            return 0;\n        else\n            return parseInt(item);\n    }\n\n    function TopItem(item) {\n        if (item == \"1\")\n            return \"Yes\";\n        else \n            return \"No\";\n    }\n\n    function StringChk(item) {\n        if (typeof item === 'undefined')\n            return \" \";\n        else\n            return item;\n    }\n\n    function FormatDate(item) {\n        if (typeof item === 'undefined')\n            return \" \";\n        else {\n            var d = $.datepicker.parseDate(\"yy-mm-dd\",  item);\n            var dt_to = $.datepicker.formatDate('dd\/mm\/yy', d);\n            return dt_to;\n        }\n    }\n\n    function loadPrioritizedList() {\n        $(\"#tasksUL\").empty();\n    \/\/ TDs below have to be 3 more width than the headers \n        $().SPServices({\n            operation: \"GetListItems\",    \n            webURL: myURL,\n            listName: targetListName,\n            CAMLViewFields: \"\",\n            CAMLQuery: '' +\n            '' +\n            '' +\n            '' +\n            '', \n            CAMLRowLimit: listrowlimit,  \n            completefunc: function (xData, Status) {\n                $(xData.responseXML).SPFilterNode(\"z:row\").each(function() {\n                    var tdHtml = \"<\/code><\/pre>\n\n\" + PriorityFormat($(this).attr(\"ows_Priority_x0020_Number\")); + \"<\/code><\/td>\n‘+ ($(this).attr(“ows_Edit_x0020_Link”)).split(“, “)[1] +’<\/td>\n” + $(this).attr(“ows_Priority”) + “<\/td>\n” + TopItem($(this).attr(“ows_Top_x0020_Item_x003f_”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Purpose”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Work_x002d_Task_x0020_Order”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Work_x0020_Status”)) + “<\/td>\n” + FormatDate($(this).attr(“ows_DueDate”)) + “<\/td>\n” + StringChk($(this).attr(“ows_Task_x0020_Type”)) + “<\/td>\n<\/tr>\n
“; $(“#tasksUL”).append(tdHtml); }); } }); $(“#tasksUL”).sortable({ containment: “#scroll2”, helper: fixHelperModified, scroll: true, axis: “y”, cursor: “move” }).disableSelection(); } \/\/Beginning to save items function saveListOrder() { $(“#Dialog”).dialog({ width: 200, height: 100, title: “Saving…”, resizable: false, closeOnEscape: false, modal: true }); alert(‘Saving new list order.’); var total = 0; var itemcnt = 0; var msgstart = “”; var msgend = “”; var updatestart = “”; var updateend = “”; \/\/ process each var updatemsg = updatestart; $(‘#tasksUL tr’).each(function(index) { \/\/ here we want to do ‘updatecount’ at a time to the list itemcnt = itemcnt + 1; total = total + 1; \/\/ create the update method for this item updatemsg = updatemsg + msgstart; updatemsg = updatemsg + “” + total + “”; var itemId = $(this).attr(“id”); updatemsg = updatemsg + “” + itemId + “”; updatemsg = updatemsg + msgend; \/\/ if we hit 100 then save to list and reset counter if (itemcnt == 100) { itemcnt = 0; updatemsg = updatemsg + updateend; SaveItem(updatemsg, total); updatemsg = updatestart; } }); \/\/ Now we need to update the last items if (itemcnt > 0) { updatemsg = updatemsg + updateend; SaveItem(updatemsg, total); } alert(‘List items saved. Reloading list.’); $(“#saveid”).html(“”); loadPrioritizedList(); $(“#Dialog”).dialog(‘close’); } function SaveItem(updatemsg, total) { $().SPServices({ operation: “UpdateListItems”, debug:false, async: false, batchCmd: “Update”, listName: targetListName, updates: updatemsg, completefunc: function(xData, Status) { $(“#saveid”).html(“Updated ” + total + ” list items”); } }); } $(document).ready(function() { \/\/alert(“jQuery”); \/\/alert($().SPServices.SPGetCurrentSite()); \/\/$(‘.listtable’).css(‘cursor’, ‘pointer’); $(“#Dialog”).dialog({ width: 200, height: 100, title: “Loading…”, resizable: false, closeOnEscape: false, modal: true }); $(“#msgid”).html(“Drag list items to save priority.”); loadPrioritizedList(); $(“#Dialog”).dialog(‘close’); }); Drag rows to new position to change List Order.
\nSave List Order<\/p>\n\n\n
List Order<\/th>\nEdit<\/th>\nPriority<\/th>\nTop Item?<\/th>\nEffort\/Purpose<\/th>\nContract-Task Order<\/th>\nWork Status<\/th>\nAction Need Date<\/th>\nAction Type<\/th>\n<\/tr>\n<\/table>\n<\/table>\n
<\/p>\n
Thanks again for any help!<\/p>\n
    \n
  1. \n
    Actually you have to use $(this).attr('ows_Edit_x0020_Link').split(', ')[0]<\/code> (note the [0] instead of [1]) for the “href”. If you use [1] then you’ll have “Edit” and not the URL<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-19 13:17:11. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    This is a question on how to get a hyperlink into a SharePoint table where the hyperlink has to be generated from variables containing certain parts of the link (unless there is a different or better way). My apologies if I am asking my question in an unclear or improper fashion – I am quite […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1450","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1450"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1450\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}