Home » SharePoint Designer 2013 » Adding Web Page Components with SharePoint Designer 2013

Adding Web Page Components with SharePoint Designer 2013

SharePoint Designer 2013 neither includes Design, nor Split Views. Removing these features has created obstacles for organizations committed to SharePoint Designer, 2010, but with little interest in creating web page components with HTML, ASP or SharePoint tags. We don’t think the situation is catastrophic. Here’s why:

In our video tutorial for SharePoint Designer 2010, Create and Manage SharePoint Components using SharePoint Designer 2010, we demonstrate how to set up a team sub site in SharePoint 2010, how to create a contacts list for this sub site, and, finally, how to use the “Data View” option under the “Insert” tab with SharePoint Designer 2010 to add this contact list to the site page for our team site.

Each of these steps can be accomplished with SharePoint Designer 2013. In our video we demonstrate how to add the Contacts List to the header section of the “Team Resources” web page in our example. With SharePoint Designer 2013, most of the action prompts are entirely visual. When we clicked on the button to add a “Web Part Page” to our sub site, we were served with a set of options, in purely graphic form, as to the layout we wanted for the page. We selected an option that provided us with a 2 column layout for the page and header, body and footer zones for the second column. So we had the header we needed to continue to follow on the example depicted in our video.

Once we had our layout option set, we chose to edit the page in “Normal Mode,” which provides the user with a code view of all of the key structural components of the page in a yellow highlighter color. These components cannot be edited when the Normal Mode is selected, which protects the page from inadvertent errors.

We set our cursor on the first line available in the safe zone of the page, clicked the “Data View” button for the ribbon and added the list we built following the example in the SharePoint Designer 2010 tutorial. Once the list was safely added to the page we selected “Design” under the “List View Tools” and selected the “Default” Layout with complete success. The finished page, including the list we had added, conformed completely with the list produced in the example presented in our video tutorial for SharePoint Designer 2010.

Ira Michael Blonder

© Rehmani Consulting, Inc. & Ira Michael Blonder, 2013 All Rights Reserved