Tag: CEWP

Hi friends, in this short SharePoint 2013 tutorial we are going to learn how to create “Add New Item” button and add it in a web part. Actually its very easy to get a link of new item page and using basic HTML code we can add a link of new item anywhere. But if you want an exact same New Item button to add in a web part you can follow this tutorial.

In this example, we are going to Add a New Item button of Employee Details List to a Home Page of Main Site.

Add New Item Button in a Web Part

1. Open a list in a Chrome web browser
2. Open Chrome DevTools (Shortcut: F12) or Right-click anywhere and Select Inspect Element.
3. Click on Cursor symbol representing select an element to Inspect it.
4. Now move your cursor on New Item button
5. Copy the Element HTML code
6. Add a Content Editor Web Part to a page where you want to Add New Item Button
7. Paste the New Item Button code into Web Part
8. Click on Stop Editing, that’s it!
   

Note: When you add Web Part you may see the title of Web Part which is sometimes not needed. See Below screenshot.

To Remove this text we have to change Web Part properties. So click on Edit Web Part and select Chrome type as None under Appearance.

Click on OK to save the changes. See below screenshots.

If you like this article, please share it with your friends and like our facebook page for future updates. Subscribe to our newsletter to get notifications about our updates via email. If you have any queries, feel free to ask in the comments section below. Have a nice day!

Hi friends, today we are going to learn: How to hide column fields in SharePoint 2013. There are two methods by which we can hide a column field from new item form. One method is by using SharePoint OTB (out of the box) settings and other is by using CEWP (Content Editor Web Part). We can also hide fields in Display item and Edit Item forms. Let us see these methods one by one.

In this example, I have Employee Details list and having columns as shown in below screenshot. Here we are going to hide a column named Country.

1) Using OTB settings for hiding column fields

a) Go to list settings

b) Go to Advanced settings and allow management of content type as Yes and click on OK.

c) Now click on Content type which you have created or predefined. In my case it is Item, so click on Item.

d) Now click in column name which you want to hide from newitem.aspx.

e) Now select the “Hidden” option and click on OK.

That’s it. Now you can see Country field is hidden from newitem.aspx page. See the screenshot below.

2) Using CEWP to hide column fields in SharePoint 2013

Now we will see how to hide column fields using CEWP (Content Editor Web Part). I hope you are aware of adding CEWP into a SharePoint page. You can refer to this article on adding CEWP.

Before proceeding further make sure that we are using javascript for making these changes. So you need to upload jquery.min.js and sputility.min.js files in your document library. I have used the Shared Documents library for these files. You can read this article for your reference on how to upload and get the links to those files.

Copy the following script into CEWP and change the red colored links with your own one. You can use this script to hide fields in DispForm.aspx and EditForm.aspx also.

<script src="/examplesite/Shared%20Documents/jquery.min.js"></script> 
<script src="/examplesite/Shared%20Documents/sputility.min.js"></script> 
<script>
$(document).ready(function(){
{
 SPUtility.GetSPField('Country').Hide();
};
});
</script>

If you like this article, please share it with your friends and like our facebook page for future updates. Subscribe to our newsletter to get notifications about our updates via email. If you have any queries, feel free to ask in the comments section below. Have a nice day!

In the previous tutorial, we have learned How to Create List and Libraries in SharePoint 2013. Today we are going to learn how to Show/Hide fields based on Drop down selection in SharePoint 2013, which is also implemented in Nintex Form with Rules. This is useful when we need to show or hide some fields depend on the selection of another field (column).

How to Show/Hide Column Fields Based on Other Fields

In this tutorial we are going to hide ‘State’ and ‘City’ fields when the user selects ‘Other’ in Country field with Content Editor Web part i.e. CEWP. Here Country field is drop-down. This method is also applicable to other field types. Let’s see how to hide one field based on another field.

Step 1: Create a new list and insert all the fields in it.

Step 2: Open the new item form and click on Edit Page option as shown in the screenshot.

 

Step 3: Click on Add a Web Part > Media and Content >Content Editor > Add.

Step 4: Click on Edit Source

Step 5: Download jquery.min and sputility.min and upload it to your Document library.

Step 6: Paste this code in that Edit source section.

<script src="/sites/abc/Style%20Library/jquery.min.js"></script>
<script src="/sites/abc/Style%20Library/sputility.min.js"></script>
<script>
 $(document).ready(function(){
 var country = SPUtility.GetSPField('Country');
 var HideOrShowOthersField=function(){
 var countryValue = country.GetValue();
 if(countryValue=='Other')
 {
 SPUtility.GetSPField('State').Hide();
 SPUtility.GetSPField('City').Hide();
 }
 else
 {
 SPUtility.GetSPField('State').Show();
 SPUtility.GetSPField('City').Show();
 }
 };
 HideOrShowOthersField();
 $(country.Dropdown).on('change',HideOrShowOthersField);
 });
</script>

Step 7: Replace Red colored link with uploaded links. See below screenshots. Do it for both JQuery and SPUtility.min.js)

Step 8: Click on stop editing

Here is the result. Now you can see When we choose Other in Country field State and City is hidden. When we choose India in Country State and Country fields Appear.

If you like this article, please share it with your friends and like our Facebook page for future updates. Subscribe to our newsletter to get notifications about our updates via email. If you have any queries, feel free to ask in the comments section below. Have a nice day!