Wednesday, May 28, 2014

Concealing a Area in New Form/Edit Form/Display Form in SharePoint 2013 Using JavaScript+

This content describes how to cover up an area in SharePoint 2013 in  Newspaperman/Editorship/Disproportional using JavaScript.



 Prerequisites
The following are the prerequisites:
  1. Ensure you have access to the Office 365 online/SharePoint site.
  2. Ensure you have Prototype.js and SPUtility.js files.
Procedure
The following is the procedure to be followed:
  1. Create a List and name it “MyList”.
  2. Create a field called “Test” as a single line of text in MyList and click on OK.
    Create a field
  3. Now go to NewForm.aspx by navigating to the following URL.

    https://YourSiteCollection/_layouts/15/start.aspx#/Lists/MyList/Newform.aspx
     
  4. Click on Settings and then Edit page

    Edit page
  5. Click on Add a Webpart and add Content Editor Webpart.
  6. Now add a reference to Prototype.js and SPUtility.js file.

    <script type="text/javascript" src="/sites/Devsite/SPUtility.js"></script>
    <script type="text/javascript" src="/sites/Devsite/Prototype.js"></script>
     
  7. Now we shall see how to hide the field in a list.Add the following lines of code to the content editor webpart.

    <script type="text/javascript">
    function display()
    {
    SPUtility.GetSPField('Test').Hide();
    }
    _spBodyOnLoadFunctionNames.push("display");
    </script> 
     
  8. GetSPField is a method in the SPUtility.js file that gets us the field object. Pass your field that you want to hide. In our example it is “Test” field.
  9. Now click on the Stop Editing button in the ribbon.
  10. That's it!!! Now let's test the results.
Testing
  1. Click on New item.

    New item
  2. Now you will not be able to see the URL Test field.

    see url Test field
  3. Similarly if you want to hide a field in EditForm.aspx/DisplayForm.aspx then use the same procedure.

No comments:

Post a Comment