.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
Sharon Maxwell

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

SharePoint 2013: Different JQuery Operations On SharePoint List Form-Part-1

Posted By:Sagar Pardeshi       Posted Date: April 05, 2016    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

In this article you will learn about different JQuery operations on SharePoint List Form.
 

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. <script language="javascript" src="/JS/jquery-1.9.0.min.js" type="text/javascript"></script>  
    2. <script language="javascript" type="text/javascript">  
    3.     $(document).ready(function() {  
    4.         $('nobr:contains("Complete")').closest('tr').hide();  
    5.         $('nobr:contains("Manager")').closest('tr').hide();  
    6.     });  
    7. </script>  
    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. <scripttype="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">  
    2.     </script>  
    3.     <scriptsrc="/SiteAssets/Script/sputility.min.js">  
    4.         </script>  
    5.         <script>  
    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.   
    12.                 // create a function to show or hide City based on Country's value  
    13.                 var showOrHideField = function()   
    14.                 {  
    15.                     var countryFieldValue = countryField.GetValue();  
    16.                     // Hide the City field if the selected value is Other  
    17.                     if (countryFieldValue === 'Other')   
    18.                     {  
    19.                         SPUtility.HideSPField('City');  
    20.                     } else {  
    21.                         SPUtility.ShowSPField('City');  
    22.                     }  
    23.                 };  
    24.                 // run at startup (for edit form)  
    25.                 showOrHideField();  
    26.                 // make sure if the user changes the value we handle it  
    27.                 $(countryField.Dropdown).on('change', showOrHideField);  
    28.             });  
    29.         </script>  
    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. <scriptlanguage="javascript"src="/JSLibrary/jquery-1.9.0.min.js"type="text/javascript"></script>  
    2. <scriptlanguage="javascript"type="text/javascript">  
    3. $(document).ready(function ()   
    4.                     
    5. {  
    6.     ConvertTextboxToLable('Title');  
    7.     ConvertTextareaToLable('Description');  
    8. });  
    9.   
    10. //Convert Multiline Text Area to Lable  
    11. function ConvertTextareaToLable(colName)  
    12. {  
    13.     var txtHTML = $("textarea[Title='" + colName + "']").html();  
    14.     var tdColumn = $("textarea[Title='" + colName + "']").closest('td');  
    15.     var tdColumnHTML = $(tdColumn).html();  
    16.   
    17.     $(tdColumn).html("<div style='display:none'>'" + tdColumnHTML + "'</div>");  
    18.     $(tdColumn).append(txtHTML);  
    19. }  
    20.   
    21. //Convert Single Line Textbox to Lable  
    22. function ConvertTextboxToLable(colName)   
    23. {  
    24.     var txtHTML = $("input[type=text][Title='" + colName + "']").val();  
    25.     var tdColumn = $("input[type=text][Title='" + colName +  
    26.     "']").closest('td');  
    27.     var tdColumnHTML = $(tdColumn).html();  
    28.   
    29.     $(tdColumn).html("<div style='display:none'>'" + tdColumnHTML +  
    30.     "'</div>");  
    31.     $(tdColumn).append(txtHTML);  
    32. }  
    33. </script>  
    Result
    edit


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend