Archive for December, 2015

Introduction

In this article, I will explain the various operations on new, edit and display form using jQuery viz. Hide a field, make read only, set the value at runtime, etc. And I will also explore SPUtility.js,

  • Hidden columns: Introduce these hidden columns on your New and Edit forms but not your Display form as an example. Or what if your scenario requires that they are hidden from all default New, Edit.
  1. Using jQuery

    Before

    listitem

    Step 1: Navigate to your SharePoint 2013 site.

    Step 2: From this page select the Site Actions | Edit Page.

    Edit the page, go to the “Insert” tab in the ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button”.

    Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following:

    1. “javascript” src=“/JS/jquery-1.9.0.min.js” type=“text/javascript”>
    2. “javascript” type=“text/javascript”>
    3.     $(document).ready(function() {
    4.         $(‘nobr:contains(“Complete”)’).closest(‘tr’).hide();
    5.         $(‘nobr:contains(“Manager”)’).closest(‘tr’).hide();
    6.     });

    listitem

  2. Using SPUtility.js: SharePoint 2013 using SPUtility.js. SPUtility.js is a powerful js file to work with list or library forms. You can do this by using the SPUtility.js library, As an example I have created a simple list with:

    • Title (simple text).
    • Country (Choice Field) [Tunisia, Switzerland, Canada, France, Other] – Other is the default value.
    • City (Simple text).
    By default the City field is hidden if the Country field value is Other.

    Steps

    Open the list where you want to implement the logic and put the following code inside a script editor web part in the NewForm.aspx. Edit the page, then Add web part and  select a script editor web part.

    1. “text/javascript” src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js”>
    2.     
    3.     “/SiteAssets/Script/sputility.min.js”>
    4.         
    5.         
    6.             // wait for the window to load
    7.             $(document).ready(function()
    8.                 {
    9.                 // Get a single select dropdown field
    10.                 var countryField = SPUtility.GetSPField(‘Country’);
    11.                 // create a function to show or hide City based on Country’s value
    12.                 var showOrHideField = function()
    13.                 {
    14.                     var countryFieldValue = countryField.GetValue();
    15.                     // Hide the City field if the selected value is Other
    16.                     if (countryFieldValue === ‘Other’)
    17.                     {
    18.                         SPUtility.HideSPField(‘City’);
    19.                     } else {
    20.                         SPUtility.ShowSPField(‘City’);
    21.                     }
    22.                 };
    23.                 // run at startup (for edit form)
    24.                 showOrHideField();
    25.                 // make sure if the user changes the value we handle it
    26.                 $(countryField.Dropdown).on(‘change’, showOrHideField);
    27.             });
    28.         

    The result

    result

    Disabled or read-only

    Text Field: Disabled or read-only to multiple lines of text field and single line text in Edit form in SharePoint list.

    Before

    edit

    Steps

    Open the list where you want to implement the logic and put the following code inside a script editor web part in the NewForm.aspx . Edit the page – Add web part and then select a script editor web part.

    1. “javascript”src=“/JSLibrary/jquery-1.9.0.min.js”type=“text/javascript”>
    2. “javascript”type=“text/javascript”>
    3. $(document).ready(function ()
    4. {
    5.     ConvertTextboxToLable(‘Title’);
    6.     ConvertTextareaToLable(‘Description’);
    7. });
    8. //Convert Multiline Text Area to Lable
    9. function ConvertTextareaToLable(colName)
    10. {
    11.     var txtHTML = $(“textarea[Title='” + colName + “‘]”).html();
    12.     var tdColumn = $(“textarea[Title='” + colName + “‘]”).closest(‘td’);
    13.     var tdColumnHTML = $(tdColumn).html();
    14.     $(tdColumn).html(
      ‘” + tdColumnHTML + “‘

      “);

    15.     $(tdColumn).append(txtHTML);
    16. }
    17. //Convert Single Line Textbox to Lable
    18. function ConvertTextboxToLable(colName)
    19. {
    20.     var txtHTML = $(“input[type=text][Title='” + colName + “‘]”).val();
    21.     var tdColumn = $(“input[type=text][Title='” + colName +
    22.     “‘]”).closest(‘td’);
    23.     var tdColumnHTML = $(tdColumn).html();
    24.     $(tdColumn).html(
      ‘” + tdColumnHTML +
    25.     “‘

    “);

  3.     $(tdColumn).append(txtHTML);
  4. }

Result

edit

People Picker Field

Disable People Picker / Lookup fields in SharePoint list forms (EditForm.aspx).

Before

edit

Steps

Open the list where you want to implement the logic and put the following code inside a script editor web part in the NewForm.aspx (Edit the page, then Add web part and select a script editor web part.

  1. “javascript”src=“/JSLibrary/jquery-1.9.0.min.js”type=“text/javascript”>
  2. “javascript”type=“text/javascript”>
  3. $(document).ready(function ()
  4. {
  5.     var control = $(“textarea[title=’People Picker’]”)[0];
  6.     /* Detect browser*/
  7.     if (navigator.appName == ‘Microsoft Internet Explorer’)
  8.         {
  9.             control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[1].style.display = “none”;
  10.         }
  11.         else
  12.         {
  13.             control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[2].style.display = “none”;
  14.         }
  15.         var innerHtml = control.parentNode.parentNode.innerHTML;
  16.     control.parentNode.style.display = “none”;
  17.     control.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML = control.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML +  + $(‘.ms-inputuserfield #content’).text() + ;
  18. });

Result

edit

Adding a title on form:A custom title can be added on the list form on runtime using jQuery.

Before

title
Steps

Open the list where you want to implement the logic and put the following code inside a script editor web part in the NewForm.aspx. Edit the page, Add web part and then select a script editor web part.

  1. “javascript” src=“/JSLibrary/jquery-1.9.0.min.js” type=“text/javascript”>
  2.     
  3.     “javascript” type=“text/javascript”>
  4.         $(document).ready(function ()
  5.        {
  6.       var table = $(‘table.ms-formtable’); // Add a row with the ID in table.prepend(“
  7.         
  8.              class=‘ms-formlabel’>
  9.                 

    class=‘ms-standardheader’>Employee Details

    ” + “

  10.              class=‘ms-formbody’>
  11.         

    “); });

  12.      

Result:

result

Introduction
In this article you will learn about the Rich TextBox validation using JQuery in SharePoint 2013.

I observed that the mandatory enhanced/rich text box of SharePoint 2013 doesn’t throw an error when we cut the content from it from the edit/new form and it allows us to save the form without any content in rich text box. The article describes the steps to remove this error.

error

Scenario

On the new/edit form we have enhanced/rich text which is a mandatory field. If we edit the rich text box and cut the content present inside it, the validation doesn’t work. The issue has been resolved.

Solution

Need to avoid the div tags and get data alone from multiline textbox field using the following script,

Step 1: Navigate to your SharePoint 2013 site.

Step 2: From this page select the Site Actions | Edit Page.

Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button”.

Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following:

  1. “text/javascript”>
  2.     $(document).ready(function()
  3.     {
  4.         var reg1 = new RegExp(
    [^, “”);
  5.         var reg2 = new RegExp(

$”, “”);

  •         var Fieldname = $(“td.ms-formlabel h3.ms-standardheader nobr:contains(‘Field Name’)”).parent().parent().parent().find(“div.ms-inputBox div.ms-rtestate-write”).html().replace(reg1, “”).replace(reg2, “”);
  •         var contenttext = $(“td.ms-formlabel h3.ms-standardheader nobr:contains(‘Field Name’)”).parent().parent().parent().find(“div.ms-inputBox div.ms-rtestate-write”).text();
  •         if (contenttext == “”)
  •         {
  •             $(“td.ms-formlabel h3.ms-standardheader nobr:contains(‘Field Name’)”).parent().parent().parent().find(“div.ms-inputBox div.ms-rtestate-write”).html(Fieldname);
  •         }
  •     });
  •