SharePoint 2013 Script to update Title link with URL and ID

SharePoint 2013 Script to update Title link with URL and ID

So I needed to create a list data view and have the items title link to a fixed URL path with the item’s ID at the end as a query string parameter.
In SharePoint 2010 I would get this done in SharePoint Designer, adding an empty data view
and editing its XSL.
In 2013 I wanted to do this using JSlink but I found it more complicated than I thought it would be, and I was short on time, so I wrote this simple script that grabs the ID from the last column of the data view and updated the href attribute of the first data view column –

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>

//Update this path and Query String Parameter name
var urlPath = "http://MyUrlPath?MyQueryStringName=";
var listName = "MyListName";

$("document").ready(function(){
    // Loop through the data view rows 
    $("table[summary*="+listName+"] tr").each(function() {
       var DVlink = urlPath + $(this).find("td:last").text();
       var LinkHTML = "<a href=" + DVlink + ">" + $(this).find("td:first").text() + "</a>";
       $(this).find("td:first").html(LinkHTML);
       //Hide data view last column with the ID
       $(this).find("th:last").hide();  $(this).find("td:last").hide();
    });
});

</script>

In order to get the above script to work make sure:
1. Your SharePoint site has a jQuery reference.
2. Your Data View first column is the title or any other column you want to use as a link.
3. Your Data View last column is the item’s ID.
4. Update the variable “urlPath” with your own path.
5. Update the variable “listName” with your own list’s name.

Useful JavaScript functions for SharePoint 2013 List Forms

Useful JavaScript functions for SharePoint 2013 List Forms

The following are useful functions you can use in your SharePoint 2013 OOTB list forms, In order to use these functions you will need to:
A. Make sure you have an updated jQuery reference locally on the form page or globally for your site.
B. Add these functions locally on the form page or globally for your site.
C. Make sure to call these function with a “$( document ).ready()” function.

Here are the functions:

1. Hide a field on a form in New/Edit/Display mode by Title –

1
2
3
function HideFieldOnForm(fieldTitle) {
   $('h3:contains("' + fieldTitle + '")').closest('tr').hide(); 
}

2. Show a field on a form in New/Edit/Display mode by Title –

1
2
3
function HideFieldOnForm(fieldTitle) {
   $('h3:contains("' + fieldTitle + '")').closest('tr').toggle("slow"); 
}

3. Disable a field on a form in New/Edit mode by Title (Of input type – single line of text or multiple line of text) –

1
2
3
function DisableFieldOnForm(fieldTitle) {
    $("input[title*='" + fieldTitle + "']").attr('disabled', 'disabled');
}



4. Disable a Choice\Lookup Select Box\Drop down type field on a form in New/Edit mode by Title –

1
2
3
function DisableSelectField(fieldTitle) {
    $("select[title*='" + fieldTitle + "']").attr('disabled', 'disabled');
}

5. Set a Choice\Lookup Select Box\Drop down type field Value on a form in New/Edit mode by Title –

1
2
3
function SetLookupVal(fieldTitle,val) {
   $("select[title*='"+ fieldTitle +"']").val(val);
}

6. Hide\Show field when checking\unchecking a Yes\No checkbox –

1
2
3
4
5
6
7
8
9
10
11
12
function HideShowByCheckBox(CheckBoxTitle,FieldToShowAndHide) {
   $("input[title*='"+ CheckBoxTitle +"']").change(function() {
      if(this.checked) {
         //Uses function number 2 above
         ShowfieldDispform('"+ FieldToShowAndHide +"');
      }
      else {
     //Uses function number 1 above
         HideFieldOnForm('"+ FieldToShowAndHide +"');               
      }
   });
}