Practical Guide to SharePoint 2013 Article 12

Article 12

SharePoint Branding

In this Article :

• Change SharePoint look and feel
• Use themes
• Add new features using custom development

You have seen how SharePoint works in the online environment in the previous Article . Now, let’s explore how you can brand SharePoint and create custom branded website for your online public website.  To begin, you first need to design a site in the program of your choice, for example, Photoshop is popular program to design websites. You can also use Microsoft Expression Web to layout the site in HTML. Design the site and then convert it into HTML. SharePoint 2013 has made it easy to publish custom sites. An HTML site comprises of the html, css and javascript. SharePoint 2013 takes the HTML you create and automatically generates the master page. This is the most powerful tool introduced in SharePoint 2013. You can further customize the master page after it has been generated by SharePoint. SharePoint allows creating responsive designs and you can target multiple devices. SharePoint lets you target a different design for different devices. There is a new feature called Device Channels. You can design sites for multiple browsers. In this Article , we will focus only on the desktop version of the site but targeting other platforms is easy. For this exercise, I have created an HTML site that you can download from the book’s website. Once you have downloaded the HTML site, you can start following the steps below to create a master page and a custom look and feel for your site.

1. Login to your SharePoint Online site. Go to the public website and then go to Site Actions and select Site Settings. Click on Design Manager. Design Manager lets you change the look and feel of your site and your site does not look like a SharePoint site. Once you have created a custom design, you can use Design Manager to convert it into a master page. It is a new feature introduced in SharePoint 2013.  It makes it easier to create a fully customized, pixel perfect design. It is available in publishing sites because developing custom sites is something that is part of the publishing feature. It is available in both SharePoint Server 2013 and Office 365. It is the tools that you can use to manage all aspects of a custom design. The easiest way to upload and work on design files is to map a drive on your computer to the Master page Gallery of your site. This way you can work on the files directly on your local computer.  
2. Before we start working on the design, first we have to map a local folder. Add your public website URL to trusted sites in your browser. Go to Tools > Internet Options > Security > Trusted Sites and then click Sites button. Copy URL to the text box and click Add. Click Close and then Ok.
3. If you are logged into your site, log out and then login again and make sure you check Keep me signed in check box.
4. Click on Design Manager in Site Settings. Click Upload Design Files.

Figure 12-1: Upload Design Files

Copy the link given on this screen. Make sure you highlight the URL by dragging the pointer over the link from start to end and then copy it, either by selecting Copy from the context menu or using Ctrl-C. Do not copy the shortcut from the context menu. You have to map your local folder to this online location. The steps below are for a Windows 7 machine. Steps for other operating systems may be slightly different. Open Computer by clicking the Start button and then clicking Computer. Click Map network drive.

Figure 12-2: Map network drive

5.  In the Drive list, click a drive letter. Choose any available letter.

6.  In the Folder box, paste the URL you copied above. You can also type the path manually.

7.  Select the Reconnect at logon check box. Also, check the Connect using different credentials.

8.  Click Finish. Enter your username (email) and password and check Remember my credentials check box and click Ok. This will create your mapped folder. If you get an error message, make sure you have copied the correct URL in the trusted sites in the browser. If everything seems ok but you are still denied access, then there is one option to overcome the hurdle but this is not recommended. In Internet Explorer, go to Tools > Internet Options > Security > Trusted Sites and then click Custom level… button at the bottom. At the bottom, in Reset custom settings, from the drop down, select Low and click OK. Click Ok again to close the options. Close all browser windows and open a new browser window and login to your public website and then repeat the mapping process described above and you should be able to map the folder this time.

9.  Now copy your HTML site folder to the mapped folder. Your HTML site should have following folder structure:

Figure 12-3: HTML site folder structure

For this exercise, you can download the HTML site from the download section of this book’s website. Unzip the folder to your local hard drive. It will have a site folder called Social. The folder structure of this site is shown in the above figure. Copy the whole folder (Social) to the mapped drive. You may have already noticed that the mapped network drive points to the master page gallery of your site. It has other out-of-the-box master pages also. Our new master page will reside in the Social folder on the server. We only need the index file to create the master page. Other pages will be created directly on the new site.

You need to be careful about one thing. The index page HTML should be XML compliant and should not have any missing tags or typos otherwise the conversion of HTML to master page may fail or you may get errors and warnings. In the Status column, you will see Warnings and Errors. Please note, even if apparently there is nothing wrong with the html file, you must validate it before trying to convert it. If you open it directly in the browser, it will work absolutely fine but Design Manager checks your page even for the tiniest of issues and reports errors if there are issues in the page, for example, if a starting or ending tag is missing, or a page directive is missing at the top, and so on. If you do get errors during conversion, click on Warnings and Errors link to view the issues. Fix the issues reported here and then try to convert the file again. Best way to fix all issues is to use an XML validator and then fix the issues before uploading the HTML file to the server. There are many free XML validators available online. Many sites let you check your pages free of cost online.

10.  Now that we have copied our HTML site to the master page gallery on the server, we are ready to convert the index file to the master page. Go to Site Actions > Site Settings. Click on Design Manager link. Click Edit Master Page link on the left.

11.  Click Convert an HTML file to a SharePoint master page link.

12.  Locate Social folder and click it. Select index file (index365.html) and click Insert button. Click Publish button when you are prompted. It won’t make any difference if you chose to not publish it yet. Within few seconds, the new html file will appear alongside other html files. A master page with the same name will also be created in the same folder. SharePoint modifies the HTML file and add various snippets. The ASP.NET master page contains all the required SharePoint controls. Design Manager is intelligent enough to ignore the ASP.NET code in the HTML page. Once the master page has been created, you should never edit it directly. If you need to make changes, make them in the HTML file. HTML file is linked to the master page. Any changes made in the HTML file automatically reflect in the master page. If you want to use the master page directly, first you have to disassociate the HTML file from the master page. To disassociate the HTML file, go to Site Actions > Site Settings and click Design Manager and then click Edit Master Pages. Click on ellipsis after the index365 file and again click ellipsis to open the menu and select Edit Properties.

Figure 12-4: Disassociate HTML file from Master page

Click Save button to save the changes.

13.  If you want to see how your site looks with this new design, apply the new master page to the site. First publish the master page. Go to Site Actions > Site Settings and click on Design Manager link. Click Edit Master Pages on the left side. Click ellipsis next to the index page to open the context menu.

Figure 12-5: Publish master page

Again click ellipsis to open the menu and select Publish a Major Version. Enter some comments in the Comments box, for example, the version number or date and click Ok.

14.  Go to Site Actions > Site Settings and click Master Page. In Site Master Page section, from the Default drop down, select the new master page (social/index365).  In Any Mobile Device drop down, select the new master page. Do the same in the System Master Page section. Make sure second option is selected and from All Channels drop down, select new master page. Expand Alternate CSS URL section and make sure third option is selected and then click Browse… button to locate main.css file in the Social/CSS folder. Click Ok to save the settings. If the css file is not published, you will be prompted to publish it first. Click OK to publish it. Once all the changes have been made, It is important to publish all files otherwise they won’t show up on the site. For now, you will see the files because you are in Edit mode but it is important to publish all files before making the site live. To publish, go to Social folder in Master Page Gallery and publish all files in all folders. For now, you can continue editing the site without publishing the files.

15.  Preview the home page in browser. You should be able to see the site. There is a JQuery slider under the top menu. The search box is messed up. Menu links are slightly misaligned. This is how the page looks at this time:

Figure 12-6: Home page using the new master page

Now the master page has been created and the home page is up and running. Now in the next section we will edit the master page and add/edit page elements. We will also create the remaining site pages.

Completing the Design

So now you have a master page, next task is to clean it up. As mentioned earlier there are two ways to edit the master page. One is to disassociate it from the HTML page and then edit, the other is to edit the HTML page and that will automatically update the master page. You will choose the second option, that is, to edit the HTML page. You can edit it in SharePoint Designer or any other text editor. For example, for simple tasks I use Notepad++. You can also use Notepad if you want but obviously using SharePoint Designer is a better option since it gives you multiple views to edit the page. You get a code view, and a design view. So open the master page in the editor of your choice. To open it in SharePoint Designer, open SharePoint Designer and browse to the mapped network drive and click Open. Then from the Social folder, right-click index365.html file and select Check Out and then again open the context menu and select Edit in Advanced Mode.

 

.

To read more about SharePoint Branding/to buy book, please visit following Amazon page:

Buy “A Practical Guide to SharePoint 2013” on Amazon.com

Search Engine Optimization (SEO) in SharePoint Server 2013

If you're a website owner, you know how important it is that users can easily find your website by using Internet search engines such as Bing or Google. The higher your website is shown in the search results list, the more likely it is that users will click on it. Just think of your own behavior when looking at search results. When was the last time you clicked to view the second page of search results?

Read more>>

Migrating or Piloting: A Tool to Get Started in SharePoint 2013 and Office 365

Metalogix announced Content Matrix Migration Express today. With it, SharePoint admins can choose to migrate smaller projects or departmental implementations to SharePoint 2013 or Office 365. The new product is available as a free offering for 25GB along with additional small and departmental editions priced and able to be purchased online from Metalogix.

Read more>>

Practical Guide to SharePoint 2013 now on goodreads.com

My new book 'A Practical Guide to SharePoint 2013' is not available on goodreads.com. If you have already the book, please review it on goodreads.com. It's free. Your review will help others in deciding whether they want to buy this book or not. If you haven't read it yet, get a copy and read it now. Book is now available on google play, kindle and Amazon. You can buy digital copy at a nominal price. Here are the links:

GoodReads.com

PracticalGuidetoSharePoint.com

Amazon.com

Amazon Kindle

Google Play

Understanding how search results are displayed in SharePoint Server 2013

This is a blog post in the series "How to change the way search results are displayed in SharePoint Server 2013 and SharePoint Online."

For an overview of the blog post in this series, go to How to change the way search results are displayed in SharePoint Server 2013.

Read more>>

applying new master page breaks sharepoint apps - is not allowed because the reference is outside of the app web

Here is the solution to this problem:

http://mctalex.blogspot.com.au/2013/07/powershell-fix-for-app-master-problem.html

Blast from the Past

I was just searching Net for something and found my previous book listed on websites of major stores and sites. This brings back good memories, the joy of publishing a book and being recognized. Writing and publishing a book is a long time consuming process but the joy it brings at the end cannot be described in words. Book writing process can be broken down into phases:

1. Idea
2. Research
3. Writing manuscript
4. Deciding whether to go with a traditional publisher or self publish!
4. In case of traditional publisher: Reviewing and editing the book several times before it is ready for publishing --- In case of self-publishing: Reviewing and editing the book 3X more than the traditional approach, getting the book proof-read, bringing in a technical reviewer, designing book cover, composing, layout, release
5. Marketing: Whether you chose the traditional publisher or self-published, you need to take care of the marketing yourself. Traditional publishers don't do it for you.

SharePoint 2007 Tips, Tricks and Techniques on iTunes:

SharePoint 2007 Tips, Tricks and Techniques on SEARS:

SharePoint 2007 Tips, Tricks and Techniques on Barnes & Noble:

JSON-Patch Using .NET

A JSON Patch document is a JSON (RFC4627) document that represents an array of objects. Each object represents a single operation to be applied to the target JSON document. Read more about JSON Patch on the IETF (Internet Engineering Task Force) web site:

http://tools.ietf.org/html/rfc6902

Implementing cURL API calls in .NET was not a straight forward procedure up till now. In the absence of native support in .NET, developers were forced to use third-party libraries but Microsoft has added new objects in .NET Framework 4.5 that allow you to make calls inside .NET without having to use third-party libraries. Especially when it comes to using JSON Patch operations, the third-party libraries are still not ready for use in .NET projects that require JSON Patch operations as these libraries do not support patch operations. Popular .NET REST Clients are as following:

Hammock - Development discontinued!
RestSharp
Ramone

Hammock has been the most popular Rest client but it has been discontinued. RestSharp is another popular library but it does not support JSON Patch operations. Ramone is the most recent addition in the list of .NET libraries and although it claims to support JSON Patch operations, there is no practical example available. I personally tried to implement JSON Patch using this library but did not succeed. I am sure I could have made it work by spending some more time on it but that was not my intention. The goal was to find a library that worked out of the box for implementing JSON Patch. Finally, I had to write my own code using new HTTP web objects introduced by the Microsoft. HttpWebRequest class provides an HTTP-specific implementation of the WebRequest class. The HttpWebRequest class provides support for the properties and methods defined in WebRequest and for additional properties and methods that enable the user to interact directly with servers using HTTP. WebRequest class makes a request to a Uniform Resource Identifier (URI). WebRequest is the abstract base class for the .NET framework's request/response model for accessing data from the Internet. Requests are sent from an application to a particular URI, such as a web page on a server. You can read more about these objects on MSDN (See links inline). Below is an implementation of JSON Patch operations in .NET using HttpWebRequest and HttpWebResponse objects.

Following code reads information from remote server using HttpWebRequest and HttpWebResponse:

HttpWebRequest request = (HttpWebRequest)WebRequest.Create("https://api.server.com/2.0/files");

request.Method = "GET";

request.ContentType = "application/json-patch";

request.Headers.Add("Authorization", "Bearer " + strAccessToken); //replace strAccessToken with AccessToken

HttpWebResponse resp = (HttpWebResponse)request.GetResponse();

Encoding enc = System.Text.Encoding.GetEncoding(1252);

StreamReader respStream = new StreamReader(resp.GetResponseStream(), enc);

string response = respStream.ReadToEnd();

respStream.Close();

resp.Close();

Note: The URL used above is imaginary but the code has been tested and found to work perfectly. It reads information from remote endpoint. Endpoint returns JSON document.

Following code writes information to the remote server:

HttpWebRequest request = (HttpWebRequest)WebRequest.Create("https://api.server.com/2.0/files");

request.Method = "PUT";

request.ContentType = "application/json-patch+json";

request.Headers.Add("Authorization", "Bearer " + strAccessToken); //replace strAccessToken with actual token

string body = @"[{""op"": ""add"", ""path"": ""/FirstName"", ""value"": ""billy""}, {""op"": ""add"", ""path"": ""/LastName"", ""value"": ""bowden""}]";

ASCIIEncoding encoding = new ASCIIEncoding();

byte[] byte1 = encoding.GetBytes(body);

request.ContentLength = byte1.Length;

Stream newStream = request.GetRequestStream();

newStream.Write(byte1, 0, byte1.Length);

HttpWebResponse resp = (HttpWebResponse)request.GetResponse();

Encoding enc = System.Text.Encoding.GetEncoding(1252);

StreamReader respStream = new StreamReader(resp.GetResponseStream(), enc);

string response = respStream.ReadToEnd();

newStream.Close();

respStream.Close();

resp.Close();

This codes write metadata to the remote file and returns the operation status. I have used PUT method. Content type used is "application/json-patch=json". Operation has been added in the body. To learn more about what to pass in the body and how, read RFC document on json patch operations.

First parameter is the operation name (represented by "op" and value is "add"). Second parameter is path (represented by "path"). Path value must start with a leading slash "/". Third parameter is the "value" (represented by "value") and this parameter contains the actual value that you want applied to the remote object.

Hope you will find this information useful. Since RFC6902 is a new standard, there are very few blogs on this topic. If you have questions, feel free to get in touch with me.

JSON-Patch Operations

JSON-Patch Operations

JSON Patch defines a JSON document structure for expressing a sequence of operations to apply to a Javascript Object Notation. (JSON) document. It is suitable for use with the HTTP PATCH method. Media type to be used to identify patch documents is "application/json-patch+json". You can read more about JSON-Patch on IETF (Internet Engineering Task Force) website.

http://tools.ietf.org/html/rfc6902

A Practical Guide to SharePoint 2013

Click book image above to go to Amazon.com book page!

My new book "A Practical Guide to SharePoint 2013" is now available on Amazon. 

I am happy to share this news with my blog readers. I hope you will find the information presented in the book useful. I have tried the keep it simple yet it contains elaborate information on topics that I am sure will interest you. Since SharePoint has been on the market for a long time, it has become part of almost every office. Number of end users has grown tremendously over the past few years. Writing a book for the whole community is not an easy job therefore I have included content that will be of interest to everyone. There are chapters for administrators, especially the initial chapters are about installing and configuring SharePoint. If you are an end user of course you don't worry about infrastructure, or users, or other related issues. You can install SharePoint on a single machine and play with the features but in real world scenario, installing and maintaining SharePoint installations is not easy. There is lot of planning involved. You have to make all parts of the infrastructure work, for example, users are stored in Active Directory, site URLs are configured in Active Directory Domain Name services, sites are hosted in IIS, content is saved in SQL Server, and so on. If you cannot configure Active Directory, how will you make SharePoint work in your organization! If you don't know how to setup permissions in SQL Server, several SharePoint features will not work unless you setup correct permissions in SQL (For example, for FBA, Extranet, BCS, etc).

Out of the box Search is easy to use but in real world scenario, you will be tasked with setting up custom search therefore it is important that you learn how to setup and configure search in SharePoint 2013.

Microsoft has been working hard in promoting their cloud solutions recently. You may have heard about Office 365, SharePoint Online, etc but have you used SharePoint Online before! Would you like to setup a public facing website in the cloud? Would you like to have this public facing website a unique blend of style and professionalism (which in technical terms is called branding)? This book has it all. I am not trying to boast about the book and the content that it has but telling you what it contains and what not may help you in deciding whether you need this book on your desk or not. Here are some of the topics discussed in the book:

SharePoint Deployments - Configure Active Directory, SQL Server, IIS Roles!
SharePoint Cloud - Setup SharePoint in the cloud
Office 365 Development – Create your first SharePoint app in the cloud
SharePoint Modern Apps - Modern, state of the art applications using HTML5 and SharePoint 2013
Extranets
Business Processes - Leverage Business Connectivity Services to build Line of Business applications
Web Parts Development – Understand and learn to develop web parts
Electronic Forms - Learn to program web-enabled electronic forms using InfoPath
Public Websites - Design a branded public website using SharePoint Online/Office 365
SharePoint 2013 Search – Learn Search configuration, customization, Managed Metadata
SharePoint 2013 Branding – Learn how to brand sites to look elegant, classy and professional

 It is just my humble attempt to contribute something meaningful to the SharePoint community. I have been doing this since 2006. I have written hundreds of articles on SharePoint, several books and ebooks and I do all this because I love SharePoint and I love SharePoint community and for this very reason that this community has given so much to me, I have dedicated this book to the SharePoint community. I hope you will benefit from it in one way or the other.

Sample chapters are available on the book's website:

http://practicalguidetosharepoint.com

You can also download code for the book chapters from the website.

Snow in Frederick MD

SharePoint 2013 - A Practical Tool For Information Management (Part 2)

Part  1

Metadata Navigation and Filtering

Metadata navigation and filtering can be enabled in lists and libraries. Using metadata navigation makes it easier for users to find content in large lists and libraries. Users can easily filter and find content by using a navigation tree. It is separate from the search functionality that is available in the list. When setting up metadata navigation, you can determine which columsn from the library appear in the tree, and you can also specify key filters.

1.  To enable metadata navigation, first you have to activate Metadata Navigation and Filtering feature in site features. Once you have activated this feature, you will see an additional setting in the list settings. Go to list settings, under General Settings, you will see Metadata navigation settings. Click this link.

           

Figure 15-17: Metadata Navigation Settings

Add ItemType, the new column you created, from Available Hierarchy Fields to Selected Hierarchy Fields. You can also add filter fields that you want to appear in the tree navigation.

2.  This is how navigation tree looks:

           

Figure 15-18: Metadata navigation and filtering

Click on any term in the tree to filter the results, you will only see items related to that term. The tree displays a hierarchy of managed terms. This lets users create dynamic displays of content. Users can refine this more by using the key filters. You may have noticed another option on the settings page that lets you create index. By default, SharePoint performs automatic index creation. Indexes are created automatically for the fields that you add to the navigation tree.  You can disable automatic indexing and configure the indexes manually. If a user loads a view that exceeds the threshold, then metadata navigation and filtering creates a modified version of the original user query called a fallback query. The fallback query runs against a portion of the list instead of the complete list. As a result, it displays a partial set of the items requested.

3.  In list settings, there is another option called Enterprise Metadata and Keywords Settings under Permissions and Management. If enabled, it lets users enter their own keywords. All keywords are stored in keywords set. Go to list settings, and click on this link. Check Add an Enterprise Keywords column to the list and enable keyword synchronization. Now go back to the list and add a new item. You will see two fields, one the custom metadata column and another for keywords. If term set is closed, users cannot add their own terms but they can still add keywords using the keywords field and it helps them collaborate and share information with each other because this information then appears in search results when someone performs a search using these keywords.

Metadata Management in SharePoint Online

1.  Now, you will enable metadata management in SharePoint Online. Log on to SharePoint Online. Go to Site collection features and activate feature SharePoint Server Standard Site Collection features.

           

Figure 15-19: SharePoint Server Standard Site Collection features

2.  Go to Manage site features and activate SharePoint Server Publishing feature.

           

Figure 15-20: SharePoint Server Publishing

3.  After activating the feature, you will see a link called Navigation in Site Settings.

Figure 15-21: Navigation

4.  Click this link to go to Navigation Settings. In Global Navigation, select Managed Navigation option.

Figure 15-22: Managed Navigation

5.  In Current Navigation, select Managed Navigation (the second option).

6.  In Managed Navigation: Term Set section, click Create Term Set button. This will add a new term set. You will see message “Successfully created term set ‘xyz’. If your site name is ABC Inc., the term set group will be called as ABC Inc. Team Site Navigation. You can create more term sets if you want by clicking the Create Term Set button. All term sets will appear under the same group.

7.   Under the Create Term Set button, there will be a link Term Store Managemen Tool. Click it to open the tool and add terms.

8.  Under Site Collection – Your site URL link, you will see your new term set. Open its menu and select Create Term. Enter term and hit Enter. Add as many terms as you like. Remember, you can group managers and contributors in the settings on the right side. You can also enter root URLs of site collections that will have read only access to the contents of term sets in this group in the Site Collection Access.

           

Figure 15-23: Add new terms

9.  After you have added term, click on the term. It will open term’s settings on the right side. You can change the default label of the term. You can also add other labels for the term. You can enable or disable tagging for this term by checking/unchecking Available for Tagging option.

10.  You can enter children terms as well. For example, select a term and then add terms under it. You can create a hierarchy of terms.

           

                       

Figure: 15-24: Terms hierarchy

11.  Click on the term set again. On the right side, you will see general properties of the term set. There are several other tabs that you can use to definre more properties for the term set. Select INTENDED USE tab. You can choose the option of showing or hiding this term set on this page. You can also choose if you want to use this term set for site navigation. You can define custom sort for your terms by going to CUSTOM SORT tab. Go to TERM-DRIVEN PAGES tab.

           

Figure 15-25: Term-drive pages

Target Page Settings allow you to change target page for terms in this term set. You can specify the page that loads when you navigate to the friendly URL for a term in this term set. Catalog Item Page settings allow you to define pages used to render catalog data. The terms in this term set can be used as catalog categories. You can specify the page that’s loaded when you navigate to a catalog item under a category in this term set. 

CUSTOM PROPERTIES tab lets you define custom properties to store additional data about a term set. If you select a term and then go to CUSTOM PROPERTIES tab, you will see Shared Properties and Local Properties. Shared Properties are available on all reused or pinned instances of this term anywhere in the term store. Local Properties are only available for this term in this term set.

12.  Go to main site and add a custom list or use an existing list to test metadata terms that you added in the term set. You can use default Documents library in the main site to test the metadata terms. Go to Documents library. Click LIBRARY tab. Click Create Column button in the ribbon. Enter My Terms in the Column name. Select Managed Metadata as the column type. In Term Set Settings, select the term set you created above. Click OK.

13.  Add a new document in the library. Go to document properties and select Edit Properties. On Edit Properties page, you will see metadata column My Terms. Start typing something in the field, you will see the terms related to the word being entered in the suggestions. Select terms and click Save.

           

Figure 15-26: Custom terms

.

To read more about SharePoint Search/to buy book, please visit following Amazon page:

Buy “A Practical Guide to SharePoint 2013” on Amazon.com