Archive for August 24, 2013

Edit existing master page in SharePoint 2013

In SharePoint 2013 we can edit existing master page to hide top links and change logo. But before doing that we need to copy the existing master page and edit it. Following are the steps to edit the master page to change the logo and hide the top navigation links.

Download the master page (Seattle.master) from SharePoint site master page gallery.

Open it in any editor like SharePoint designer or Visual studio or note pad.

To remove the text “SharePoint” on the top left, check for the code below,

runat=”server” />


Delete or comment the code to remove “SharePoint” text.

To hide newsfeed, SkyDrive and Sites, Check for


Delete or comment the above code to remove or hide NewFeed, SkyDrive, Sites.

To hide Share, Follow and Sync check for


Delete or comment the above code.

To change the logo


Change the LogoImageUrl to the logo that we want to display in the site. The image url should be logo image.

Once done with the changes upload the master page in the master page gallery as “ASP NET Master Page” as content type. Publish the master page as a major version. Once done, set the master page as primary master page of the site.

Create or customize a content type

Content types enable site users to quickly create specialized kinds of content by using the New Item or New Document command in a list or library. Content types provide site owners a way to make sure that that content is consistent across sites. Site owners can pre-configure specific details about the content when they set up content types for a site, list, or library. To learn general information about the benefits of content types, seeIntroduction to content types and content type publishing.

IMPORTANT    To create site content types for a site, you must have Full Control for that site. To create site content types for the top-level site in a site collection, you must be a site collection administrator.

To create a site content type, follow these steps:

  1. Go to the site for which you want to create a site content type.
  2. Select the Options button Options button and then select Site Settings.
  3. Under Web Designer Galleries, choose Site content types.
    The Gallery shows all the existing site content types, grouped in categories. The one that you choose becomes the parent of your new content type. The new content type inherits the attributes of its parent.

    TIP    Note the name of the parent group, you will need it later.

Screenshot of the Site Contents Types page in the Web Designer Gallery of SharePoint 2013. This shows Parent status clearly

  1. Click Create to open the New Site Content Type page.

Screenshot of the Create dialog for a new Site Content Type in SharePoint 2013

  1. In the Name and Description section, type a name and a description for the new site content type.
  2. In the Select parent content type from list, select the name of the group that the parent content type belongs to.
  3. In the Parent Content Type list, select the name of the parent content type on which you want your own content type to be based.
  4. In the Group section, choose whether to store this new site content type inside an existing group or a new group.
  5. Click OK.

The Site Content Type Information page for your new content type appears. This page contains links to other pages where you can further customize the new site content type.

Top of Page TOP OF PAGE

In this article


Rename a content type

You can rename a site content type by changing its name in the gallery. To rename a site content type, follow these steps.

  1. Go to the home page of the site that contains the content type that you want to rename.
  2. Select the Options Settings button button, and then choose Site Settings.
  3. In the Web Designer Galleries group, select Site Content Types.
  4. On the Site Contents Types page, click the name of the content type that you want to change.
  5. On the Site Content Type Information page, under Settings, click Name, description, and group.
  6. In the Name text box of the Name and description section, change the name of the content type.
  7. When you finish, click OK.

Top of Page TOP OF PAGE

Associate a Word, Excel, or PowerPoint template with a content type

To make sure that documents are consistent, you can associate a Word, Excel, or PowerPoint template with a content type.

For example, you might want employees to use a standard Excel template when they create a weekly timesheet. If you associate the template with a Timesheet content type, every time someone uses the Timesheet content type, the correct template is automatically loaded in the worksheet.

You can make it even easier for users by adding the Timesheet content type to a library. Then, users can open the correct timesheet just by clicking Timesheet on the New Documents menu. To learn how to do this, see Add a content type to a list or library.

To associate a template with a content type, follow these steps.

  1. Go to the site for which you want to change a site content type.
  2. Select the Options button Options button and then select Site Settings.
  3. Under Web Designer Galleries, choose Site content types.
  4. Click the name of the content type that you want to change by associating a Word, Excel, or PowerPoint template.

NOTE   If names of the content types are not hyperlinks, it means that this site inherits its site content types from another site. To change the content type, you must move to that site.

  1. Under Settings, click Advanced settings.
  2. Enter the location of the template. If the template is stored on your site, click Enter the URL of an existing document template, and then type the URL for the template that you want to use.If the document template is stored on your local computer, click Upload a new document template, and then click Browse. In theChoose File dialog box, locate the file that you want to use, select it, and then click Open.
  3. In the Update Sites and Lists section, under Update all content types inheriting from this type?, click Yes if you want to update all content types that inherit from this content type with the document template.
  4. Click OK.

Top of Page TOP OF PAGE

Configure a content type to always display the Document Information Panel

The Document Information Panel is available for Word, Excel, and PowerPoint in Microsoft Office 2010 and in later versions. The Document Information Panel displays a form on documents of these types, and users can view or change metadata information in the panel. If the document is saved to SharePoint, they save the information directly from the Office program they use to edit the document.

The Document Information Panel displays text boxes in a form to collect metadata from users.

For example, suppose that you have a Sales Proposal content type that has a column for the company that the proposal addresses. When you display the Document Information Panel, users can enter the name of the company directly from the document while they edit it. If the company name has already been entered, the use can view the information or update it. When the document is saved to the server, this property is automatically updated in the Company column for the library.

To configure settings for the Document Information Panel for a content type, follow these steps.

  1. Go to the site for which you want to change a site content type.
  2. Select the Options button Options button and then select Site Settings.
  3. Under Web Designer Galleries, choose Site content types.
  4. Click the name of the site content type that you want to change.

NOTE   If names of the content type that appear are not hyperlinks, then it means that this site inherits its site content types from another site. The site content type must be updated on that site.

  1. Under Settings, click Document Information Panel settings.
  2. In the Document Information Panel Template section, do one of the following:
    • To use a default template that displays the properties (columns) that were defined for the content type, clickUse the default template for Microsoft Office applications.
    • To use an existing custom template, click Use existing custom template (URL, UNC, or URN), and then type the path of the location of the template.
    • To upload an existing custom template (XSN), click Upload an existing custom template (XSN) to use, and then click Browse to locate the template that you want to use.
    • To create a custom panel in InfoPath, click Create a new custom template.

NOTE   If you select this option, InfoPath starts and displays the default template, which you can customize to create a custom panel.

  1. In the Show Always section, specify whether you want this Document Information Panel to display automatically when documents of this content type are first opened or saved.
  2. Click OK.

How to pass parameters between your App parts?

With SharePoint web parts developers had an option to make them communicate with each other using standardized set of interfaces called connection interfaces that allowed Web Parts to exchange information with each other at run time. (Creating a Connectable Web Part)

In the new SharePoint App model, web parts are replaced with app parts. The problem is they don’t have an equivalent to Web Part Connections. So how can you pass parameters from one part to another? 

To answer this you have to consider several things:

  • App parts are basically small applications that are presented in your SharePoint site through iframes
  • each app is running in a separate domain and so are their app parts. Because of this any direct manipulation through some javascript code is out of the question because it would mean cross-domain scripting and all you would get is an “access denied” message

Thankfully there is a solution for this that is provided through HTML5 and the postMessage method.
This method provides a way for communicating between browsing contents in HTML documents.

To demonstrate this I will use Napa tools with my SharePoint Online to create two App parts, one to send a message and the other one to receive it.

Although theoretically you can achieve app parts to communicate directly with one another I found it a much better choice to add additional code to the page where my app parts are located (using script editor for example) and make the communication go through there.
                      
So first lets send a message from one of our app parts.

Using Napa tools I will create a new App (I named it SenderApp). Add this following JavaScript function to its ClientWebPart.aspx page.

1
2
3
4
5
6
7
8
function sayHello()
  {
   var appMsg = {
      'msg':'Hello from sender app part'    
  };
   
  window.parent.postMessage(appMsg, "*");
  }
1
 
1
 

In this function we have created an object appMsg that contains only a variable called msg with some text. Similarly you can define your own  app object that you wish to share with other apps or SharePoint. As we know our app part will run in an iframe on our SharePoint site so we can use  window.parent.postMessage to post that object to the SharePoint page on which we have placed our app part. 

To execute my function I added a button to my app part that calls it on click.

1
<button id="bttPost" onclick="sayHello()">Say Hellobutton>

This is the end result for my SenderApp part:

Now for the app part that will receive this message. Again using Napa tools I have created another app (I called itReceiverApp). In this app we will add a listener that will wait for a message that will come from other sources using this following script.

1
2
3
4
5
6
7
window.addEventListener("message", receiveMessageInApp, false);
function receiveMessageInApp(event)
{  
divMsg=document.getElementById('divMessages');
divMsg.innerHTML= divMsg.innerHTML+event.data+'
';
}

So to catch the message from our app part we will use window.addEventListener that looks out for incoming messages and calls receiveMessageInApp function when it picks one up. It would be a good practice to send some additional information in your post message object, so you can check which part (if more of them sends messages) posted a message. Also you can use event.origin to see that.
receiveMessageInApp method is used to display the data we will receive through messages.
This is how my part looks in the end:

Now you can package both of your apps, deploy them to your SharePoint site and add the app parts to a page. On the same page add a script editor. In that editor we will catch the message sent from our sender app part, process the message and forward it to our receiver app. Here is how my page looks like after I add all the parts:

Add the following script to your script editor to process messages from the sender app and forward them to your receiver part.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

So in my script editor I am first listening for a message to arrive and then I am searching in my page for the second iframe element (or the second app part) and forwarding data of that message to its window(you will probably want to check for the id or something else that defines the iframe of the app part to which you wish to send your data to). If everything is correct, when you press Say Hello button, you should see that the message was processed in the ReceiverApp part.

From this simple example we see how we can achieve communication between app parts using postMessage
So one app part sends a message to the parent page, the page receives the message and sends it of to another app part if needed.

The only limitation is it will not work on older browsers since this is a HTML5 feature but other then that this is a very effective way to achieve app parts communication.