Generating a hyperlink from variables or other method (using JavaScript, jQuery, and CAML for a SharePoint List)-Collection of common programming errors
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.
What I am doing:
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:
https://myteam.thiscompany.com/techdev/sandbox/lists/Task%20Test%20List/Task%20List2.aspx
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:
https://myteam.thiscompany.com/techdev/sandbox/WebPart%20Pages/Forms/AllItems.aspx
The link for the actual page (called SortList) looks like this:
https://myteam.thiscompany.com/techdev/Sandbox/WebPart%20Pages/SortList.aspx
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).
The problem: 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.
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:
https://myteam.thiscompany.com/techdev/Sandbox/WebPart%20Pages/Edit
But I need it to go here:
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
All of this from the above link is what I think I need to change:
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
In my current URL I am pointing to “Task%20List” and the correct name should be: “Task%20Test%List”.
The GUID to use for the List is “532ed23b%2D1041%2D4600%2D887f%2D58b08e1f4b9d”
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).
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.
Here is the CAML query, looking at the data from the list:
function loadPrioritizedList() {
$("#tasksUL").empty();
// TDs below have to be 3 more width than the headers
$().SPServices({
operation: "GetListItems",
webURL: myURL,
listName: targetListName,
CAMLViewFields: "",
CAMLQuery: '' +
'' +
'' +
'' +
'',
CAMLRowLimit: listrowlimit,
And here is where I am using the data:
CAMLRowLimit: listrowlimit,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var tdHtml = "" + PriorityFormat($(this).attr("ows_Priority_x0020_Number")); + "“; $(“#tasksUL”).append(tdHtml);
The code for the link is currently:
tdHtml = tdHtml + ''+ ($(this).attr("ows_Edit_x0020_Link")).split(", ")[1] +'';
Here is what the SortList looks like: 
Here is the full code from the whole .js file:
#tasksUL {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#tasksUL LI {
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
}
#tasksUL LI SPAN {
POSITION: absolute; MARGIN-LEFT: -1.3em
}
.listtable {
font-size:10px;
color:#333333;
border-width: 1px;
border-color: #729ea5;
border-collapse: collapse !important;
position: relative;
overflow-y:auto;
float:left !important;
}
.listtable_hdr th {
font-size:10px;
background-color:#acc8cc;
border-width: 1px;
padding: 4px;
border-style: solid;border-color: #729ea5;
text-align:left;
}
.listtable tr {
background-color:#d4e3e5;
}
.listtable td {
font-size:10px;
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: #729ea5;
vertical-align:center;
border-collapse: collapse;
}
.listtable_hdr
{ /* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here */
position: static; float: left;
}
//CONFIGURATION VARIABLES
//Assumes that this list is on the same site as the WebPart
var targetListName = "Task Test List";
var myURL = "https://myteam.thiscompany.com/techdev/Sandbox"
var updatecount = 100;
var listrowlimit = 50;
var tablewidth = 975;
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr;
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
$helper.width(tablewidth);
$helper.css('background-color', '#d3e324');
return $helper;
};
function PriorityFormat(item) {
if (typeof item === 'undefined')
return 0;
else
return parseInt(item);
}
function TopItem(item) {
if (item == "1")
return "Yes";
else
return "No";
}
function StringChk(item) {
if (typeof item === 'undefined')
return " ";
else
return item;
}
function FormatDate(item) {
if (typeof item === 'undefined')
return " ";
else {
var d = $.datepicker.parseDate("yy-mm-dd", item);
var dt_to = $.datepicker.formatDate('dd/mm/yy', d);
return dt_to;
}
}
function loadPrioritizedList() {
$("#tasksUL").empty();
// TDs below have to be 3 more width than the headers
$().SPServices({
operation: "GetListItems",
webURL: myURL,
listName: targetListName,
CAMLViewFields: "",
CAMLQuery: '' +
'' +
'' +
'' +
'',
CAMLRowLimit: listrowlimit,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var tdHtml = "" + PriorityFormat($(this).attr("ows_Priority_x0020_Number")); + "“; $(“#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.
Save List Order
| List Order | Edit | Priority | Top Item? | Effort/Purpose | Contract-Task Order | Work Status | Action Need Date | Action Type |
|---|
Thanks again for any help!
-
Actually you have to use
$(this).attr('ows_Edit_x0020_Link').split(', ')[0](note the [0] instead of [1]) for the “href”. If you use [1] then you’ll have “Edit” and not the URL
Originally posted 2013-11-19 13:17:11.