Custom Page Layout – hide fields from display

This is done in the HTML file of the page layout. With the Snippets, we can add in a piece of codes to make some fields only appear in the Edit mode.

Access Snippets

  1. Go to Design Manager
  2. Click 6. Edit Page Layouts
  3. Click on the name of the layout that you want to edit. This takes you to the Preview Page of the layout.
  4. You will find Snippets from the top right corner
    previewpage.JPG

Get the HTML Snippet

  1. Click on Snippets. Here you can find available controls that can be added to the page layout.
  2. Click Edit Mode Panel in the Design tab.
  3. Click Show Only in Edit Mode – this gives you a piece of code to hide fields from display
  4. As the page refreshes, both Preview and HTML Snippet boxes are updated.
  5. Click Copy to Clipboard
    htmlsnippet.JPG

Modify the HTML page

In this example, I’m going to hide the News Type and Active fields.

You can download the HTML page, edit it in an HTML editor, then upload to the Page Layouts library. Alternatively, you can edit the file in SharePoint Designer.
Note: you will need publishing features activated in both site collection and top site level to be able to see the Page Layouts folder. Find out how to activate the features

  1. Look for the syntax <!–MS:<asp:ContentPlaceHolder id=”PlaceHolderMain” runat=”server”>–>. Below this line, we have all the fields that are included in this page layout, eg Title, Article Date etc.
    placeholdermain.JPG
  2. Once I located the snippet of the fields I want to hide, I paste in the HTML snippet before the starting
    editmodesnippets.JPG
  3. Then replace the syntax
You should replace this div with content that renders based on your Edit Mode Panel Properties.

with the News Type and Active Snippets below it. So the end product looks like below
editmodefinish.JPG4. Save your changes and refresh the Preview Page. Here, the News Type and Active fields are gone.
hidepreview.JPG

Noticed the duplicated page titles? Here is how to get rid of it.

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s