document versions - microsoftmoddemodocs.blob.core.windows.net/resources-prod/... · web...

Microsoft EPG

Modern Productivity Platform Guide

Last Updated: June 30, 2014

ContentsDocument Versions.................................................................................................................3Terms of Use...........................................................................................................................3Overview.................................................................................................................................4

What is MPP?........................................................................................................................4Who is this document for?....................................................................................................4

Building a New MPP Site..........................................................................................................5Prerequisites and Assumptions............................................................................................5Prepare the Site Environment..............................................................................................5Install the MPP Core Files.....................................................................................................6Create the MPP Site Environment........................................................................................8Adding Images to Your Site................................................................................................12Make Wise Use Of SharePoint custom list views and rules.................................................14Create Custom KPI Tiles Using Excel..................................................................................14Device Channels................................................................................................................15Custom UI / Layout.............................................................................................................15

Modifying an Existing MPP Site..............................................................................................16Prerequisites and Assumptions..........................................................................................16Changing the Look and Feel...............................................................................................16Modifying Tiles...................................................................................................................17

Appendices............................................................................................................................24Appendix 1: MPP Core Files................................................................................................24Appendix 2: Set Up Yammer-SharePoint Tile Integration...................................................25Appendix 3: MPP Tiles and Functionality............................................................................26Appendix 4: Tile Rendering................................................................................................50Appendix 5: Microsoft Corporation Technical Documentation License Agreement.............51

2

Document VersionsVersions of this Demo Guide are synchronized to the extent possible with concurrent versions of the MPP software (also known as UDFP or Universal Demo Foundation Platform).Versi

onModified Comments

1.0 June 30, 2014

Initial published version

Terms of UseUse of this guide, and use of any software, code, or related digital assets, are subject to Microsoft’s Terms and Conditions, a copy of which can be found here:http://www.microsoft.com/en-us/legal/intellectualproperty/copyright/default.aspx By using this guide and associated software, it is also assumed that you have reviewed, understood, and agreed to the Microsoft Corporation Technical Documentation License Agreement in Appendix 5.

3

http://www.microsoft.com/en-us/legal/intellectualproperty/copyright/default.aspx

OverviewWhat is MPP?The Microsoft Productivity Platform (MPP) is a solution accelerator that facilitates the development of a SharePoint site within an Office 365 environment. Some of the key components of this site platform are:

Modern UX-inspired SharePoint home page with Modern UI style (live) tiles SharePoint List and library driven content Integration between SharePoint and Yammer Dynamic data presentation with Excel ServicesNote: In this document, you will see occasional references to UDFP, which stands for Universal Demo Framework Platform. This was the project code name used during the development of this platform. As such, you may see some references to “UDFP” in some assets used by this platform (file names, images, custom list contents, etc.)

Who is this document for?This document is intended to serve as a guide for anyone seeking to leverage the MPP site platform. If you have a blank new SharePoint Online site collection and need to build a site from scratch, proceed to the section: Building a New MPP Site. If you already have access to a complete MPP site environment that was built with MPP, and need to modify the site, you can proceed to the section: Modifying an Existing MPP Site.The MPP is a solution accelerator, not a finished product. As such, a certain level of knowledge of SharePoint, Office 365, and web technologies is required to make the most of the platform. For example, you should have:

Basic knowledge of Office 365 administration, such as subscription management, security and password resets

Familiarity with SharePoint 2013 publishing sites Working knowledge of editing pages, adding web parts, and setting web part

properties. Working knowledge of Excel Power BI Basic knowledge of HTML and CSS (if interested in advanced customization of look &

feel)We also recommend the workstation you use to build or customize the site pass the following requirements:

Windows 8 or above Internet Explorer 10 or above 64-bit version of Office 2013 client applications (highly recommended if you’re

planning to use Excel Power BI workbooks with large amounts of data) SharePoint Designer 2013 application (recommended) Access to the Windows App Store (to install additional apps that may be needed for

your site).Important reminders:

This document assumes you have a copy of the latest version of the MPP core assets in a convenient location. If you have a .zip archive, unzip it before proceeding.

4

This is a comprehensive document. To assist navigating the content, we recommend you use the Navigation Pane or the Table of Contents in Word to find the content you need. In addition, the document contains linked cross-references in bold underline . Control-click the link to go to a cross-reference.

5

Building a New MPP SitePrerequisites and AssumptionsThis section assumes you have an empty SharePoint Online site collection, and want to build a site from scratch, starting with core MPP source files.

Prepare the Site EnvironmentFollow the steps in this section to prepare an existing MPP site environment for a new demo. You should log into the tenant with site collection administrator permissions.

Activate SharePoint Features1. Navigate to the site home page.2. Click Settings (gear icon at upper right of the SharePoint page) -> Site Settings.3. Under Site Collection Administration, click Site collection features.4. Find SharePoint Server Publishing Infrastructure and if it is not active, click

Activate. This may take several minutes to complete.Note: This is only available in E3 tenants on O365. The MPP environment leverages SharePoint publishing infrastructure, which allows us to brand master pages and web part pages with ease. This is a feature that needs to be enabled at both the site collection and the site level.

5. Ensure these additional features are activated as well:a. SharePoint Server Enterprise Site Collection Featuresb. SharePoint Server Standard Site Collection Featuresc. Video and Rich Media

6. Navigate back to the Site Settings page, and under Site Actions, click Manage site features.

7. Ensure these features are activated at the site level:a. SharePoint Server Enterprise Site featuresb. SharePoint Server Publishingc. SharePoint Server Standard Site featuresd. Team Collaboration Lists

8. Deactivate the following features at the site level:a. Mobile Browser View

Add/purchase subscriptions (as necessary for your site)1. Navigate to the Office 365 admin center:2. At the upper left, from the Office 365 App Launcher ( ), click Admin and in the

pull-down menu, select Office 365.3. In the left navigation, click purchase services.4. Select and add or purchase the desired services, for example:

a. CRMb. Power BIc. Project Onlined. Visio OnlineNote: If you opt for trial subscriptions for these services, please note the expiration date of such services (typically 30 days). You may be able to extend the duration of these services through a proper request. See http://www.MicrosoftOfficeDemos.com site for details.

6

http://www.google.com/

5. Assign individual users license to the subscribed services, as needed.6. Return to the site home page.

Prevision a Yammer networkIf you plan to use Yammer social networking tiles, you need to setup the Yammer API and get a Client ID. For details, see Appendix 2: Set Up Yammer-SharePoint Tile Integration.

Install the MPP Core FilesIn this section, you will upload and install the assets needed for the MPP framework. For a concise table of file names and locations, see Appendix 1: MPP Core Files.In the following sections, <SiteUrl> is the Site Collection relative URL, for example https://mysitecollection.sharepoint.com/sites/mr. This will also be referred to as the “site home page”.

Style Library1. Navigate to the Style Library in your SharePoint site (<SiteURL>/Style Library).2. Upload the following files in the top level of the StyleLibrary source folder to the

SharePoint Style Library:a. tiles.cssb. tiles-mobile.css

3. In the SharePoint Style Library, create an Images folder if one does not exist.4. Upload the files in the Images source folder to the Images folder in the SharePoint

Style Library.

List Templates1. Navigate to the site home page.2. Click Settings -> Site Settings -> List Templates (under Web Designer Galleries).3. Upload the files from the ListTemplates source folder to the SharePoint List

Templates:a. BingLocationsTemplate.stpb. ContactsWithStatus.stpc. EPG-TileList.stpd. UDFP_NewsList.stpe. StatusList.stp

Master Pages1. Navigate to the site home page.2. Click Settings -> Site Settings -> Master pages and page layouts (under Web

Designer Galleries).3. Upload the following files from the Masterpages source folder, and set the Content

Type as Design File (this should be the default):a. jquery.mousewheel.jsb. jquery-2.0.0.min.jsc. UDFP-Script.jsd. UDFP-Styles.csse. UDFP-Styles-Mobile.cssf. UDFP-PageEdit.cssg. UDFP-CenterContents.css

4. Publish a major version of the uploaded files.5. Upload the TileTemplate.js file and enter the following settings:

7

https://www.yammer.com/client_applications

a. Set the Content Type to JavaScript Display Template.b. Set the Target Control Type to View.c. Set the Standalone dropdown to Override.d. Set the Target Scope to /.e. Click Save and check in/publish a major version of the file (via the dropdown).

6. Upload the UDFP-Master.html filea. Make sure the Content Type is set to Html Master Page (this should be the

default).b. Save and publish a major version of the file.c. You should see an auto-generated file, UDFP-Master.master, alongside this

file. This is the actual master page file that will be used by SharePoint.7. Upload the UDFP-Mobile.html file.

a. Make sure the Content Type is set to Html Master Page.b. Save and publish a major version of the file.c. You should see an auto-generated file, UDFP-Mobile.master, alongside this

file.8. Upload the UDFP-Article.html and UDFP-Article-Center.html files.

a. Make sure the Content Type is set to Html Page Layout.b. Save and publish a major version of the file.c. You should see an auto-generated .aspx page for each HTML file uploaded.

The .aspx files are the actual layout pages that will be used by SharePoint.

8

Create the MPP Site EnvironmentNow that the core MPP files are installed, you can begin to set up a site home page with tiles. You will follow this general workflow:

The following diagram of a sample MPP site’s “Tile Page” shows some of the tile types that are available, and nomenclature that you will encounter as you advance through the workflow. For a complete description of tile types and functionality, see Appendix 3: MPP Tiles and Functionality.

Set the Master Page

1. Navigate to the home page of your site collection.2. Click Settings -> Site Settings -> Master page (under Look and Feel).3. Under Site Master Page select UDFP-Master.4. Leave the system master page set to the default (on O365, seattle).

9

Set the Site Master Page

Create a Tile Page (aka Home Page)

Create a Tile List

Populate the Tile List

Add Tile List to the Tile Page as Web Part

Create the Tile PageThis may also be referred to as your “site home page”.

1. Navigate to the home page of your site collection.2. Click Settings -> Site Contents -> Pages.3. In the Ribbon, select Files.4. Click the New Document dropdown and select Article Page.

If Article Page is missing from the list:a. Click Settings -> Site Settings -> Page layouts and site templates

(under Look and Feel).b. In the Page Layouts section, select (Article Page) UDFP-Article.c. Click Add.d. Click OK.

5. Give the page a Title, for example DemoHomeTest.6. Optionally, add a Description.7. Under Page Layout, select (Article Page) UDFP-Article.8. Click Create.9. In the Pages library, check in and publish the new page as a major version.

Tile Types and FunctionalityThere are about 15 different tile types available in the current release of MPP. Note that each tile type has a unique specification for provisioning. See Appendix 3: MPP Tiles and Functionality for a complete description of the tile types, their functionalities, and parameters. In the following sections, you will create a simple example of a link tile on a new web part page. Working through this exercise will acquaint you with the basic steps involved in adding tiles to an MPP site.

Create a Tile ListHaving created a tile page, you will now create a simple tile list and populate the page with an item (tile) in the list. The tiles list is also referred to as a “tile group”, because all the tiles in this list will appear as a group on your web part page.In this example, you will create a tile that links to the Bing search page.

1. If not already there, navigate to the page you just created (for example, DemoHomeTest).

2. Click Settings -> Site contents and click add an app.

10

3. From the list, select UDFP Tile List (Note, it may be not be on the first page.)

4. Give the list a name, for example Info.5. Click Create.

Populate the Tile List1. Back in the Site Contents page, click the new list (Info) to open it.2. In the list view, in the Ribbon, click Items, and then click new item.

Note: there are a number of fields that you can set. In this example, we will only set a few of the available fields.

a. Title: Bingb. URL: http://www.bing.comc. Tile Size: Larged. Tile Type: SimpleLink

3. Click Save.

Set Up the Tile PageTo add the Bing tile to the web part page, you will add the tile list as a list view web part onto the page.

1. Navigate to the web part page you created previously (for example, DemoHomeTest).

2. Edit the Page.3. In Zone 1, click Add a Web Part.

4. In the Web Parts list, in the Apps category, select the name of the list you created in the previous section (for example, Info).

11

http://www.yammer.com/

5. Edit the Web Part Properties.6. In the Web Part properties pane, expand the Miscellaneous section and paste the

following into the JS Link field:~site/_catalogs/masterpage/TileTemplate.js

7. Click OK to close the web part editor and to save the web part.8. At the upper right, click the Save icon.

9. In the Ribbon, click Publish and then click Publish -> Publish to publish a major version of the page. Optionally, add version comments and then click Continue.

10. You should now see a large blue tile in the “Info” tile group named “Bing”. When clicked, it should navigate to the Bing search page (try it and see).

Add More Tiles to the Original Tiles GroupAdding more tiles to the tile group is easy. Each tile is an item (row) in the Tiles list. You can add as many tiles as desired, giving them different names and selecting the desired

12

functionalities from the Tile Type options. Note that each tile type has a unique specification for provisioning. See Appendix 3: MPP Tiles and Functionality for a complete description of the various tile types currently supported.Note: as more tiles are added to the group, you will need to pay attention to how the tiles are sized, ordered, and oriented. For details, see .To add more tiles to the original tiles group (using the example tile group Info):

1. Click Settings -> Site Contents.2. Click the tile list, e.g. Info.3. Add a new item to the list as shown in the above section Populate the Tile List.4. Select the tile type and set the parameters for the tile as desired.5. Save the item.

Modify Tiles in a Tile GroupTo change existing tile properties:

1. From the web part page, right-click the tile group heading, select Open in new tab, and navigate to the new tab.

2. Edit the item corresponding to the tile you wish to modify and save the changes. Note that you can edit the list in the “Quick Edit” mode if desired; to do so, next to new item, click edit this list. Make your edits (press ENTER after making a text edit) and then click Stop editing this list to return to the list view.

3. If you edited the item individually, click Save to save the new settings.

Add a New Tile GroupTo add a new tile group to the same page, follow the steps in the section Create a Tile List, give the list a different name, and then add it to the page using the steps in the section Set Up the Tile Page. You can add the list to the same web part zone, or to a different one.

Create a New Tiles PageIf you want to add a different web part page in the same site collection, but with other tile groups and tiles, you can add new tiles pages by repeating the above sections, starting at the section Create the Tile Page.

Adding Images to Your SiteImages are an easy and effective way to enhance and customize an MPP site. As with a typical SharePoint site, many parts of the MPP site support images. In most cases, you need to upload images to a library in SharePoint first before using them elsewhere in the site. A small number of images and icons are already shipped with MPP in the /Style Library/Images/ folder. You can choose to add images to this location, or to the Publishing Images library (<SiteURL>/PublishingImages/).

13

For optimal image appearance, it is best to crop or resize the image dimensions to the appropriate size before uploading them to SharePoint.Image Location

Target Render Size

Notes

Tile Icon (large size)

24 pixel square Appears at the bottom of the tile

Tile Icon (medium size)

48 pixel square Appears at the center of the tile

SharePoint Site Icon

64 pixel height (max) by 180 pixel width (min)

Appears on the top-left corner of all SharePoint pages

News List Tile (large size only)

125 pixel height by 250 pixel width

Images are actually added to another SharePoint list that the tile's URL attribute points to.

Promoted Links Tile (wide size)

120 pixel height by 250 pixel width

Images are actually added to another SharePoint list (of type Promoted Links) that the tile's URL attribute points to.

Promoted Links Tile (medium size)

120 pixel square

Page background image (recommended size) 1920 pixel width by 1200 pixel height

Appears as a background image on the tiles page. Stretches to fill the height and width of the browser viewport. Modify the style sheet file, Tiles.css, to specify the background image by adding the following snippet of CSS code:#s4-workspace { background-image: url("FullImageURL.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center;}Replace “FullImageUrl.jpg” with the actual URL of the background image file.

Using Image RenditionsAn alternate way to upload pre-cropped/pre-sized images to SharePoint is to leverage SharePoint's image renditions features. This feature is available in a SharePoint site automatically whenever the Publishing Features are turned on. It allows you to upload a single high resolution image to a SharePoint image library, and in return retrieve an array of pre-sized and pre-cropped iterations (or renditions) of the image.Four pre-defined image rendition sizes are configured out-of-the-box with SharePoint. You can add or modify the entries by going to Site Settings -> Look and Feel -> Image Renditions.The following exercise shows how you can add your own image rendition size and use it. In this example, we add a square format image rendition of 48 pixel dimension.

14

1. Go to the Image Renditions settings page (Site Settings -> Look and Feel -> Image Renditions).

2. In the Image Renditions list page, click Add new item.3. Fill out the form fields as follows and save.

Name: Medium IconWidth: 48Height: 48

4. The newly entered item will appear at the bottom of the list. Note the ID value associated with the item.

5. To use the rendition, add the RenditionID query string to the image URL. For example, type the following URL in the browser where the <SiteURL> and <ImageName.jpg> are replaced with actual values:https://<SiteURL>/PublishingImages/<ImageName.jpg>?RenditionID=5.This will return an image of 48 pixel square, regardless of the original dimensions of the image file.

6. Insert the URL path, including the query string portion “?RenditionID=5”, to the Icon Image property of the MPP tile list.

Make Wise Use Of SharePoint custom list views and rules.Use of SharePoint custom list views can be an efficient way to enforce different views of the same list or library. For example, the Contacts List Tile can display different views of one central contacts list, but tailored to the role or permissions of the logged on user.A simple example would be to add a rule to the default view that excludes “Myself” from the view. Then, the logged on user would not see their own name in the tile. A variation or addition to that would be to create views for specific roles (e.g. Supervisor, , VP, Maintenance Operator). The views would use rules to include only individuals appropriate for the logged on users peer group or direct reports. To enable this, the central contacts list can contain a “role” column on which the view rules can filter the individuals displayed on a tile. Such use of custom views and rules is much more efficient than using multiple copies of the same list.

Create Custom KPI Tiles Using ExcelUsing SharePoint’s built-in Excel Services REST API, selective contents of an Excel workbook in a document library can be exposed as an HTML object or an image. In other words, you can dynamically generate images from a range of cells in an Excel workbook. Images thus produced can be used in a variety of ways and be exposed through an MPP tile. A common use of this feature is to create a rotating carousel of KPI tiles using contents from an Excel workbook and adding images to a Promoted Links.

15

The general workflow is as follows:

Device ChannelsThe standard MPP has two devices channels: the default channel and the Mobile channel. Devices using mobile browsers will automatically use the Mobile channel which directs to a new master page that stacks the various MPP web parts vertically instead of horizontally. The mobile channel can be forced to load even in a desktop browser, by adding the DeviceChannel=mobile URL parameter:http://sharepoint.url.aspx?DeviceChannel=mobile

Custom UI / LayoutThe MPP contains a Custom Master Page, Layout Pages and CSS to act as a starting point for building MPP sites.The Master Page and Page Layouts are created as HTML files using the Design Manager features of the Publishing Site. If the site is not a Publishing Site, then the Publishing features will need to be turned on, as explained in the section Error: Reference source not found.

16

Create and format an Excel workbook with KPIs.Add Named Range for each KPI

Save workbook to a SharePoint library

Access the Named Range of the workbook via Excel REST API and return as Image

Build out a SharePoint Promoted Links list using the Excel REST API image URSs as background images

Add a PromotedLinks tile type to a Tile List that points to the Promoted Links list

Modifying an Existing MPP SitePrerequisites and AssumptionsThis section of the document assumes that you have site collection administrator permissions on a pre-provisioned site environment that was built using the core MPP assets.

Changing the Look and FeelSite LogoTo change the site logo:

1. Navigate to the site where you wish to change the logo.2. Upload the desired logo image file to a convenient library. For example, use the Site

Assets library.

3. Click Settings -> Site Settings -> Title, description, and logo (under Look and Feel).

4. Enter a title that you wish to appear with the logo.5. Optionally, add a description for the site.6. In the Insert Logo section, click FROM SHAREPOINT.7. Enter the relative path to the image file, for example:

/sites/mr/SiteAssets/Fabrikam-Icon-64.png8. Optionally, enter a description for the image.

9. Click OK to save the settings.

17

Page Background, Layout, Colors, and FontsYou can easily change the look of your site, including background, layout, colors, and fonts.

1. Navigate to the site home page.2. Click Settings -> Site Settings -> Change the look (under Look and Feel).3. Select a basic design you wish to use for your site.4. To change the background, click Change and browse your computer or SharePoint

site for the image you want to use.Note: before using an image as a page background, see important details in the section Adding Images to Your Site .

5. To remove the background image, click Remove.6. To change the colors used in the design, click the color menu, scroll through the

available color schemes, and select the one you wish to use.7. To change the layout of the site, choose from the available site layouts. (The site

layouts that are listed are based upon the available master pages for your site.)8. To change the font size and type, select a font set from the available options.9. Click Try it out to get a preview of your site with its new look.10. If you like the look, click Yes, keep it. This takes you to the Site Settings page where

you can modify the title and logo or configure additional settings.11. If you don’t like the theme, click No, not quite there and repeat steps 3 through 10.

Modifying TilesYou can easily modify existing tiles attributes, content, layout, and functionality. To do so first navigate to the MPP web part page. In this example, we will show how to modify some tiles in a tile group called Social. Your site will have different tiles and tile groups, but the general procedures will apply.

Tile AttributesTile sizeBefore changing tile sizes, review for details on size and appearance of tiles within a tile group.To change the tile size:

1. Navigate to the web part page.2. Right-click the tile group name (Social in this case), and select Open in new tab.3. In the tile group list, click edit this list to open it in Quick Edit mode. Alternatively,

you can select the item you wish to change and edit it individually.

18

4. In the Tile Size column, click the cell that corresponds to the tile you wish to change. In this example, we will change the Bing tile from Medium to Wide.

5. In the drop-down for the Bing tile, select Wide.

6. Click Stop editing this list (or click Save if you edited the item individually).7. Navigate back to the home page and refresh the page.8. You will see the updated Bing tile.

Tile Layout OrderThe layout of tiles within a tile group defined by the column “Sort Order” from left to right, top to bottom. The tile with the lowest Sort order is displayed at the top left and the highest Sort order is displayed at the bottom right. For details, see .Suppose we wish to change the Social tiles so that the Bing tile appears at the very top, followed by the Message from CEO, and finally the Social tile. To make those changes:

1. Right-click the tile group name (Social in this case), and select Open in new tab.2. In the tile group list, click edit this list to open it in Quick Edit mode. Alternatively,

you can select the item you wish to change and edit it individually.3. Note the existing Sort order.

19

4. In the same way as for the Tile Size, edit the Sort order column so that the Bing tile is 5; leave the Message from the CEO at 10, and leave the Social tile at 40.Note: you will be editing the number using free text; there are no pull-down menus in this column. To start editing, double click in a cell, change the number, and press ENTER.

5. Click Stop editing this list (or save your changes if you edited the item individually).

6. Navigate back to the home page and refresh the page.7. You will see the updated tile layout.

In this section, you changed the layout of tiles in a specific tile group. You can also define the layout of the tile groups on the home page. For details, see the section Localization.

Background and Foreground ColorThe background and foreground tile colors are defined in the tile specification by 6-digit hexadecimal numbers. For a reference article, see http://en.wikipedia.org/wiki/Web_colors and the references contained therein.The background color defines the tile field, while the foreground color defines the font and icon.Some possible tile colors are shown in the screen shot below. White is hex FFFFFF and black is hex 000000.

20

http://www.MicrosoftOfficeDemos.com/

These sample color codes are summarized in the following table:

21

To change the foreground or background tile colors:1. Right-click the tile group name (for example, Social), and select Open in new tab.2. In the tile group list, click edit this list to open it in Quick Edit mode. Alternatively,

you can select the item you wish to change and edit it individually.3. To change the background color, locate the Background Color column and double

click in the cell corresponding to the tile you wish to change. In this example, we will change the background color of the Bing tile from light blue to orange.

4. Edit the hexadecimal number to the desired value and press ENTER.5. Repeat steps 3 and 4 for any other tiles in which you wish to change the background

color.6. To change the foreground color for a tile, repeat steps 3 and 4, in the Foreground

Color column (you may have to scroll right to see this column).8. When you are done making edits, click Stop editing this list (or save your changes

if you edited the items individually).9. Navigate back to the home page and refresh the page.10. You will see the updated tile color(s).

URLThe URL column is generally used to define the location to open when the tile body or title is clicked. For some tile types, this field is optional. For details, see the definitions in Appendix3: MPP Tiles and Functionality.

Tile Link BehaviorThe columns Title link action and Item link action define how the destination URL, list, image, etc. are displayed when either the title or body of the tile is clicked. You can change these settings to suit the needs of your site. For details, see Appendix 3: MPP Tiles and Functionality.

22

LocalizationYou can customize the site for different locations by editing the tile names, links, icons, and other tile properties to use different language character sets. The tile group name (which appears as the title of the tile list in the UI) can also be edited to use different languages.

Tile Group Layout on Home PageThe layout of tiles within a tile group was covered in section Tile Layout Order. You can also customize the overall layout of the tile groups on the home page. The tile groups reside as web parts in zones on the home page. You can see how the zones and web parts are organized by editing the page. For example, here is the home page for a demo, opened for editing.

Notice that the page has four Web Part zones. Within each zone there are one or more tile groups. Each tile group is a Web Part that can be customized as to size, location, and appearance by editing the Web Part.

Note: It is not required to use all four zones. You can choose to use only one, two, or three zones, and adjust the layout options for the tile groups accordingly.

For example, below is the Web Part “Industry News” open for editing. The layout and appearance options are accessible under the respective areas in the editor.Some trial and error is to be expected when making changes to the tile group layout options. In general, keeping the default options will be a good starting point.You should have working familiarity with Web Parts and the Web Part editor before changing these settings.

23

Appearance optionsIn the appearance section, you can specify whether the web part (tile group) should have fixed height and width, or to automatically fill the zone. You can also define the chrome state for the web part.

Layout optionsIn the Layout section, you can define in which zone the web part resides, as well as its relative position (Zone index) in the zone.

24

AppendicesAppendix 1: MPP Core FilesThe table below lists the core components of the MPP. These files should be located in the target location specified in the SharePoint site. <SiteUrl> is the Site Collection relative URL.Note: a number of core MPP files use the original “UDFP” (Universal Demo Framework Platform) nomenclature in their file names.

Path/File Name Description Target LocationListTemplates/BingLocationsTemplate.stp

List definition for the Bing Maps tile List Template Gallery

(<SiteURL>/_catalogs/lt)ListTemplates/ContactsWithStatus.stp

List definition for the People tile

ListTemplates/EPG-TileList.stp List definition used to create the tile list

ListTemplates/UDFP_NewsList.stp

List definition for the News List tile

Masterpages/jquery.mousewheel.js

A jQuery plugin. Adds cross-browser support for handling the mousewheel events.

Master page gallery (<SiteURL>/_catalogs/masterpage)Masterpages/jquery-

2.0.0.min.jsjQuery minified file

Masterpages/TileTemplate.js JavaScript-based display template that renders the tiles

Masterpages/UDFP-Article.html, Masterpages/UDFP-Article-Center.html

Publishing layout pages

Masterpages/UDFP-CenterContents.css

Style sheet used by UDFP-Article-Center layout page to center tiles on the page.

Masterpages/UDFP-PageEdit.css

Styles loaded during page edit mode only

Masterpages/UDFP-Master.html

This is the Master Page

Masterpages/UDFP-Mobile.html This is the Master Page for the Mobile Device Channel

Masterpages/UDFP-Script.js This is the script file for the Master Page. Any scripts that aren’t part of rendering tiles are placed here.

Masterpages/UDFP-Styles.css CSS styles file for the UDFP Master Page and Layout Page

Masterpages/UDFP-Styles-Mobile.css

CSS style overrides file for the Mobile Device Channel

MS_Logo.png The default site logo Images library (<SiteURL>/PublishingImages)

Pages/SetBingMapApi.aspxStyleLibrary/Images This folder contains a starter set of

images and icons that you can use throughout the MPP site

Subfolder under Style Library (<SiteURL>/Style Library)

StyleLibrary/tiles.css This is the CSS file for the tiles Style Library (<SiteURL>/Style Library)

25

Appendix 2: Set Up Yammer-SharePoint Tile IntegrationFollow these steps to set up Yammer as the Social network and to prepare the site for adding Yammer tiles.

1. At tenant admin level, if necessary, switch social settings from newsfeed to Yammer.a. Inspect the Office 365 App Launcher; it should show Yammer as the

default social setting.

b. If the setting does NOT show Yammer, switch the Enterprise Social Collaboration settings:

i. From the Office 365 App Launcher ( ), click Admin and in the pull-down menu, select SharePoint.

ii. In the left navigation, click settings.iii. In the Enterprise Social Collaboration area, select the Use

Yammer.com service radio button.iv. Click OK. Note that it may take some time for the switch to take effect.v. Return to the SharePoint page.

2. Register the Yammer App and obtain the Client ID:a. Navigate to http://www.yammer.com. b. Log in as a user from the network you wish to connect to.c. Navigate to https://www.yammer.com/client_applications. d. Click Register New App.e. Enter anything you wish for Application Name, Organization, and Support

E-mail. f. In the Website field, enter the root URL for the SharePoint site.g. Accept the Terms and click Continue.h. Note/copy the Client ID on this page. You’ll need it later.i. Click Basic Info. Copy the URL of the SharePoint site into Redirect URI and

JavaScript Origins.i. Remove any trailing “/”. For example, http://www.google.com/ should

become http://www.google.com. ii. If your Yammer tile will be placed on a subsite, use the subsite URL.

j. Click Save.3. Now we’re ready to add Yammer tiles to the site. Make sure to include the Client ID

you noted previously as part of the ExtParameters as outlined in Appendix 5, .4. Add sample content to the Yammer network. For a realistic demo, you may wish to

log into Yammer as several different “real” demo users (not Administrator) and create some interactive posts, announcements, calendar items, etc.

26

http://www.bing.com/

https://mysitecollection.sharepoint.com/sites/mr

http://en.wikipedia.org/wiki/Web_colors

http://www.google.com/

Appendix 3: MPP Tiles and FunctionalityTile UIThe functional core of the platform is a set of components that render tiles onto a SharePoint page, based on data in a custom SharePoint list. All of the code is written in JavaScript, using the JavaScript Display Template functionality in SharePoint 2013, to render a custom view of the Tile List.

General FunctionalityEach tile displays a UI specific to the data it handles. Tiles also have a link functionality that will open a page/item, based on settings in the Tile definition.

ExtParametersMany of the tiles support an extra parameters property (ExtParameters) that allow for a comma separated list of additional parameters to be passed (spaces should be avoided after the comma). Frequently, these are parameters that are required only if some other combination of parameters are selected. For example, if the tile supports AutoRefresh, if that parameter is set to Yes, the tile will automatically refresh itself without a page reload. By default, this will happen every 30min.An optional RefreshTime parameter can be used in the ExtParamers to set how many seconds the tile will wait before refreshing:

RefreshTime=10Likewise, if the tile supports opening new links in a dialog window, the dialog size can be optionally configured in pixels.

DialogWidth=200,DialogHeight=100A tile supporting all three optional parameters could have the following setting in ExtParameters:

RefreshTime=10,DialogWidth=200,DialogHeight=100

Tile List DefinitionThe EPG-TileList contains many custom columns that are used to define what type of tile to display. In general, the columns are used in the same way across different tile types. Some tiles do behave differently, however. Please refer to the section for each tile to find a listing of all fields and their functions. Tile List Definition:

List Columns DescriptionTitle The title to be displayed on the TileIcon Image The URL to the image that will be used as the Tiles icon.Foreground Color The foreground color to use for the Tile (text color).Background Color The background color for the Tile, written in HEX format.Tile Size The size of the Tile to draw: Large, Medium, or Wide (no Small size).URL The URL to navigate to when the Tile is clicked.Sort Order The order to draw the tiles in.Tile Type The type of tile to draw (see below).List Name For tiles that use SharePoint list data, the name of the SharePoint List.

27

List Columns DescriptionView Name For tiles that use SharePoint list data, the name of the List View to use when

getting list data.ExtParameters Any extra parameters that a tile may need. These are different for each tile

type.TitleLinkAction The type of navigation to perform when the Title is clickedItemLinkAction The type of navigation to perform when an Item is clickedAutoRefresh Determines whether or not the tile will automatically refresh itself without a

page reload. By default, this will happen every 30min if set to Yes. An optional parameter, RefreshTime, can be passed in through ExtParameters to set the time in seconds.

Subsite The relative URL to the subsite that contains the List defined above, e.g. \sites\hr.

IsHidden Indicates if this item should be displayed in the tile view (web part) page. Default is “No”. Setting to “Yes” will not render the associated tile.

Tile SizeThere are 3 sizes the tiles can be drawn at: Large, Medium, and Wide. These sizes behave the same as in the Windows 8 UI. The Small size from Windows 8 is excluded from this project.Values:

Large: 250x250 pixels Medium: 120x120 pixels Wide: 250x120 pixels

Link ActionThe Link Action fields will control what behavior to use when a link is clicked, as either the Title of a Tile, or an Item. Values:

In page navigationo Opens the link in the current page

New tabo Opens the page in a new tag

Dialogo Shows the item in a modal dialog

28

Tile TypesWithin the Platform, each type of Tile will have its own rendering logic. The type of Tile to draw is selected in the Tile List using the “Tile Type” column.The current tile types are:

Simple Link New List Item Generic List Items Document Library Task List Task Alert Calendar News List Promoted Links Iframe Contacts List Asset Library Bing Map Yammer (three types) SharePoint KPI RSS Feed

To navigate quickly to the tile you want, enable the Navigation pane in this document, and click the associated link.

Simple Link TileA Simple Link Tile displays the just the Title and Icon with the selected Background Color. When the tile is clicked, it will navigate the browser to the URL defined in the Tile List. Optional: you can use the List Name and View Name fields to specify a List/View to navigate to instead of the URL.

Used Columns:Column DataTitle The displayed TitleIcon Image The displayed IconBackground Color The background color for the TileTile Size The size tile to drawURL The URL to navigate to when the tile is clickedTile Type “SimpleLink”List Name Override the URL field, navigate to this listView Name If set, will navigate to this view of the listTitleLinkAction The type of navigation to perform when the Tile is clicked

29

Column DataItemLinkAction N/AAutoRefresh N/AExtParameters Any extra parameters that a tile may need. These are different for

each tile type.The following ExtParameters are valid for this tile:

DialogWidth=[Width in Pixels] DialogHeight=[Height in Pixels]

30

New List Item TileThis tile type will open the New Item form for a SharePoint List or Document Library. The tile will open whatever the default new item form page is, in a dialog box on the page. If the URL property is set, the tile will instead open that URL in the dialog box. This is useful, if for instance, you have a document library that holds InfoPath documents and you want to show the InfoPath form in the dialog.Note: You always have to fill in the “List Name” field with the Display Name of the List you are adding the item too. Only filling in the URL field will cause the Tile to not work properly.The UI of this tile is the same as SimpleLink.

Column DataTitle The displayed TitleIcon Image The displayed IconBackground Color The background color for the TileTile Size The size tile to drawURL (Optional) The URL to the New Item form to useTile Type “NewListItem”List Name The name of SharePoint ListTitleLinkAction The type of navigation to perform when the Tile is clickedItemLinkAction N/AAutoRefresh N/AExtParameters Any extra parameters that a tile may need. These are different for

each tile type.The following ExtParameters are valid for this tile:

DialogWidth=[Width in Pixels] DialogHeight=[Height in Pixels]

31

Generic List Items TileThis tile type will display list items, by Title only. Clicking on a list item will open the default view form for the list item type in a SharePoint Dialog. Clicking on the Title of the Tile will navigate to the URL specified. If the URL field is blank, it will default to the List.

Column DataTitle The displayed TitleIcon Image The displayed IconBackground Color The background color for the TileTile Size The size tile to drawURL The URL to navigate to when the tile is clickedTile Type “GenericList”List Name The name of SharePoint ListView Name The name of the SharePoint List View to display items from. Leaving

this blank will use the default view.TitleLinkAction The type of navigation to perform when the Title is clickedItemLinkAction The type of navigation to perform when an Item is clickedAutoRefresh Determines whether or not the tile will automatically refresh itself

without a page reload. By default, this will happen every 30min if set to Yes. An optional parameter, RefreshTime, can be passed in through ExtParameters to set the time in seconds.

ExtParameters Any extra parameters that a tile may need. These are different for each tile type.

The following ExtParameters are valid for this tile: DialogWidth=[Width in Pixels] DialogHeight=[Height in Pixels] RefreshTime=[seconds]

32

Document Library TileThis tile type will display items in a document library, by Title only. Clicking on a document will open it in the Office Web App for the document type. Clicking on the Title of the Tile will navigate to the URL specified. If the URL field is blank, it will default to the Document Library. Note that that because this tile specifically sends all content to the Office Web Apps, this tile only supports Office documents (docx, xlsx, pptx). It is recommended that the view used in conjunction with this tile explicitly only returns these types of documents.

Column DataTitle The displayed TitleIcon Image The displayed IconBackground Color The background color for the TileTile Size The size tile to drawURL The URL to navigate to when the Title is clickedTile Type “DocumentLib”List Name The name of SharePoint Document LibraryView Name The name of the SharePoint List View to display items from. Leaving

this blank will use the default view.TitleLinkAction The type of navigation to perform when the Title is clickedItemLinkAction The type of navigation to perform when an Item is clickedAutoRefresh Determines whether or not the tile will automatically refresh itself




33

Task List TileThis tile type will display items from a SharePoint Task List. A View can be used to control which items are shown (such as “My Tasks”). The tile will show the Title at the top, as a link to the URL value. If the URL field is blank, it will default to the Task List. Tasks are shown with a status flag, the Task Title and the Due Date. Clicking on a Task will open the Default View Form for that item in a SharePoint Dialog. It is recommended that the view used filters out completed tasks to limit the amount of tasks shown in the tile.The color of the status flag is determined using these rules:

1. If the Task is Not Completed and past the Due Date, it will show red.2. If the Task is Not Completed and the Due Date is today, it will show yellow.3. Otherwise the Task is shown as green (either completed or not due today).

Column DataTitle The displayed TitleIcon Image The displayed IconBackground Color The background color for the TileTile Size The size tile to drawURL The URL to navigate to when the tile is clickedTile Type “TaskList”List Name The name of SharePoint Task ListView Name The name of the SharePoint List View to display items from. Leaving

this blank will use the default view.ExtParameters Used for changing the display, details below.TitleLinkAction The type of navigation to perform when the Title is clickedItemLinkAction The type of navigation to perform when an Item is clickedAutoRefresh Determines whether or not the tile will automatically refresh itself


The following ExtParameters are valid for this tile: DialogWidth=[Width in Pixels] DialogHeight=[Height in Pixels] RefreshTime=[seconds] DisplayMode=alert

34

Task AlertThe TaskList Tile has a secondary view called “Task Alert.” Instead of listing the Tasks, it shows a rollup count of how many are in each status color (using the same logic as the Task List tile). Clicking on the Tile will navigate to the URL specified. If the URL field is blank, it will default to the Task List.

The columns are filled out the same as for a regular “TaskList” tile, but the following values are added to the “ExtParameters” field as a list of comma-separated key-value pairs – with no spaces.Key Value DescriptionDisplayMode alert Tells the tile to display as an alertRefreshTime Value in

seconds(Optional) Sets the refresh interval in seconds. The Alert will get the counts from the Task List again and update each time this interval is reached.

Example: DisplayMode=alert,RefreshTime=30

35

Calendar TileThis tile type will display calendar list items. Clicking on a list item will open the default view form for the list item type. Clicking on the Title of the Tile will navigate to the URL specified. If the URL field is blank, it will default to the Calendar List. Each calendar item is displayed with an arrow icon, the date or time for the item, and the Title.

Column DataTitle The displayed TitleIcon Image The displayed IconBackground Color The background color for the TileTile Size The size tile to drawURL The URL to navigate to when the tile is clickedTile Type “Calendar”List Name The name of SharePoint ListView Name The name of the SharePoint List View to display items from. Leaving this blank

will use the default view.TitleLinkAction The type of navigation to perform when the Title is clickedItemLinkAction The type of navigation to perform when an Item is clickedAutoRefresh Determines whether or not the tile will automatically refresh itself without a

page reload. By default, this will happen every 30min if set to Yes. An optional parameter, RefreshTime, can be passed in through ExtParameters to set the time in seconds.


The following ExtParameters are valid for this tile: DialogWidth=[Width in Pixels] DialogHeight=[Height in Pixels] RefreshTime=[seconds] DateDisplay=Date or DateDisplay=Time. The “Date” option shows just the date

value of the event start (in mm/dd format). The “Time” option shows the time value of event start (in hh:mm format).

36

News List TileThis tile type will show items from an MPP News List. Items will be displayed one at a time on the Tile, and slide to the next item after a fixed interval.Clicking on the displayed item will navigate to it in the list or to the Custom Page for the news if URL is defined. The Image will be displayed on the top half of the Tile, with the Title and Body of the item displayed below.

Column DataTitle N/AIcon Image N/ABackground Color The background color for the TileTile Size The size tile to draw (large only)URL Custom page to navigate to, instead of individual itemsTile Type “NewsList”List Name The name of the List in SharePointView Name The name of the SharePoint List View to display items from. Leaving

this blank will use the default view.ExtParameters N/ATitleLinkAction N/AItemLinkAction The type of navigation to perform when an Item is clickedAutoRefresh Determines whether or not the tile will automatically refresh itself




37

Link List TileThis tile shows links from a SharePoint Links List. The UI is the same as the Generic List tile. Clicking on a link will navigate to it. Clicking on the Title of the Tile will navigate to the URL specified. If the URL field is blank, it will default to the Link List. Important Note: The view used must include the “URL” list column in addition to the “URL (with edit menu)” column.Column DataTitle The displayed TitleIcon Image The displayed IconBackground Color The background color for the TileTile Size The size tile to drawURL The URL to navigate to when the Title is clickedTile Type “LinkList”List Name The name of the List in SharePointView Name The name of the SharePoint List View to display items from. Leaving

this blank will use the default view.ExtParameters N/ATitleLinkAction The type of navigation to perform when the Title is clickedItemLinkAction The type of navigation to perform when an Item is clickedAutoRefresh Determines whether or not the tile will automatically refresh itself




38

Promoted Links TileThis tile shows items from a SharePoint Promoted Links List. The UI shows the background image filling the tile, with the Title of the List Item at the bottom. The Title field of the Tile is not shown. Only one promoted link is shown at a time. After a period of time, the shown tile slides to the left, out of view, and the next one in the list slides in from the right.The tile will navigate to the URL specified from the item in the Promoted Links List, instead of the one defined in the Tile List Item. The click behavior will also follow the behavior defined in the Promoted Links List (in page navigation, new tab, dialog). If dialog is selected, optional parameters can be entered in the ExtParameters field to control the size of the dialog.Column DataTitle N/AIcon Image N/ABackground Color The background color for the TileTile Size The size tile to drawURL N/ATile Type “PromotedLinks”List Name The name of the Promoted Links List in SharePointView Name The name of the SharePoint List View to display items from. Leaving

this blank will use the default view.ExtParameters DialogWidth=[width in pixels]

DialogHeight=[height in pixels]TitleLinkAction N/AItemLinkAction N/A (Note: by design, the ItemLinkAction value in the promoted links

list is used)AutoRefresh Determines whether or not the tile will automatically refresh itself




39

IFrame TileAn IFrame tile shows the contents of the URL field in an iFrame. The contents of the iFrame take up the entire display of the Tile. Many of the tile properties, including the Title, have no effect on the display of this Tile. Also, there’s no click behavior unless it is defined in the contents of the IFrame. Hence, any hyperlinks within the iFrame tiles must be marked up within the contents.Column DataTitle N/AIcon Image N/ABackground Color N/ATile Size The size tile to drawURL The URL to content to display in the iFrameTile Type “Iframe”List Name N/AView Name N/AExtParameters N/ATitleLinkAction N/AItemLinkAction N/AAutoRefresh N/AExtParameters N/A

40

Contacts List TileThis tile type will show items from a Custom SharePoint Contacts List, “Contacts with Lync Status”. Lync Status will be displayed, as well as the Contact’s Name. A column in the Custom Contacts List will contain settings for changing the status of the contact, so that you can demonstrate the functionality without needing to log into Lync for every contact. Clicking on the Title of the Tile will navigate to the URL specified. If the URL field is blank, it will default to the Contacts List. Column DataTitle The displayed TitleIcon Image The displayed IconBackground Color The background color for the TileTile Size The size tile to drawURL The URL to navigate to when the tile is clickedTile Type “People”List Name The name of the Contacts List in SharePointView Name The name of the SharePoint List View to display items from.

Leaving this blank will use the default view.ExtParameters TBDTitleLinkAction The type of navigation to perform when the Title is clickedItemLinkAction N/AAutoRefresh Determines whether or not the tile will automatically refresh

itself without a page reload. By default, this will happen every 30min if set to Yes. An optional parameter, RefreshTime, can be passed in through ExtParameters to set the time in seconds.



The Contacts List contain a dropdown column (LyncPresence) that allows the demo user to select the status to display for contacts.Status Options:

Available (green) Busy (red) Away (yellow) Auto (shows actual Lync status)

41

Asset Library TileThis tile type will show Images and Videos from an Asset Library. The thumbnail for the image or video will take up the display of the Tile, with the title for the item appearing at the bottom. One item will be shown at a time. After a period of time, the display will slide to the next item (like in the Promoted Links tile). Clicking on an item will show the display form for it using the value of ItemLinkAction. For images, this will be the full size picture. For videos, this will include the video player, as well as information about the video.Note that this tile was only tested with video and image files. It is not recommended to have any other types of assets (such as audio files) returned in the view used by this tile.Column DataTitle N/AIcon Image N/ABackground Color The background color for the Tile (shown behind the item title)Tile Size The size tile to drawURL N/ATile Type “AssetLibrary”List Name The name of the Asset ListView Name The name of the SharePoint List View to display items from. Leaving

this blank will use the default view.ExtParameters TBDTitleLinkAction N/AItemLinkAction The type of navigation to perform when an Item is clickedAutoRefresh Determines whether or not the tile will automatically refresh itself




42

Bing Map TileThis Tile will show a Bing Map with Pins on locations specified in a Bing Maps Locations list. A List Definition containing a GeoLocation column is included in the MPP Package. The entire display of the Tile will show the map. Clicking on the Map will take the user to the URL defined in the Tile settings. Clicking and dragging on the map will move (pan) the map within the tile. If the URL field is blank, it will navigate to the list.Note that the Bing Maps Locations list requires the longitude and latitude of a location (and not the address). You can look up the latitude/longitude of an address by searching for it in the Bing Maps web site (http://www.bing.com/maps).

Note, in the above picture, the coordinates are displayed as (latitude, longitude).Column DataTitle N/AIcon Image N/ABackground Color N/ATile Size The size tile to drawURL The URL to navigate to when the tile is clickedTile Type “BingMap”List Name The name of the Locations ListView Name The name of the SharePoint List View to display items from. Leaving

this blank will use the default view.ExtParameters Any extra parameters that a tile may need. These are different for

each tile type.TitleLinkAction The type of navigation to perform when the Tile is clickedItemLinkAction N/AAutoRefresh Determines whether or not the tile will automatically refresh itself



43

http://www.bing.com/maps

Set Up the Bing Maps viewIf your demo will use a list containing geolocations, and you wish to display the list in a Bing Map view, follow these steps to set the credentials and API keys:

1. Create and provision the custom list you will use for your demo, ensuring it contains a column of the Geolocation type.

2. Navigate to Site Contents, and click the list to open it.3. Confirm the list opens with a map and pushpins to various locations. If you see a

“credentials invalid” message on the map, follow these steps:a. Browse to the Pages library of your demo. For example,

/sites/<DemoSiteCollection>/Pages/Forms/Allitems.aspx. b. Open the page SetBingMapsAPI.aspx.c. Opening the page should set the appropriate credentials and API keys.d. When done, navigate back to the custom list and confirm that the map loads

without a credentials message.4. Close the Site Contents page and return to the demo home page.

44

Yammer TilesThe Yammer Tile/Tiles will hook up to the Yammer API and display information about posts. Use of the Yammer tiles will require the creation of a Yammer App to get a ClientID that the tiles will use to connect to the API.For steps to obtain a ClientID and initialize the Yammer tiles in a demo, see the sections Initial Yammer Network Setup and Yammer Tile Setup.Yammer AnnouncementsThe Announcements Tile will show items from a Specific Group in Yammer that are marked as Announcements. Clicking on the Title of the Tile will navigate to the Yammer Group. Clicking on an announcement will navigate to that item in Yammer.Column DataTitle The displayed titleIcon Image N/ABackground Color The background color for the tile (Yammer color is 0A99D1)Tile Size The size tile to draw. Wide and Large are supportedURL N/ATile Type “YammerAnnouncements”List Name N/AView Name N/AExtParameters Any extra parameters that a tile may need. These are different for

each tile type.TitleLinkAction The type of navigation to perform when the title is clickedItemLinkAction The type of navigation to perform when an item is clickedAutoRefresh Determines whether or not the tile will automatically refresh itself


The following ExtParameters are valid for this tile: AppId=[The ClientID generated by the Yammer App] RefreshTime=[seconds – values under 30 may result in abnormal behavior]

45

Yammer Hash TagThe Hash Tag Tile will display the count of items posted to Yammer with a specific Hash Tag. The Tile will show the Title at the bottom, the icon in the center, and the count at the top right (like the Task Alerts tile). It will have refresh functionality, so the count can be kept up to date. Clicking on the tile will navigate to that Hash Tag in Yammer.Column DataTitle N/AIcon Image The displayed IconBackground Color The background color for the tile (Yammer color is 0A99D1)Tile Size The size tile to draw.URL N/ATile Type “YammerHashTag”List Name N/AView Name N/AExtParameters Any extra parameters that a tile may need. These are different for

each tile type.TitleLinkAction The type of navigation to perform when the tile is clickedItemLinkAction N/AAutoRefresh Determines whether or not the tile will automatically refresh itself


The following ExtParameters are valid for this tile: AppId=[The ClientID generated by the Yammer App] Tag=[The hashtag to display – omit the “#” from this value] RefreshTime=[seconds – values under 30 may result in abnormal behavior]

46

Yammer RepliesThe Replies Tile will show the number of topics in my conversation's filter. The UI display will be the same as the Hash Tag Tile. Clicking on the tile will navigate to the user’s conversations in Yammer.Column DataTitle The displayed title – this will display in the bottom left cornerIcon Image The displayed IconBackground Color The background color for the tile (Yammer color is 0A99D1)Tile Size The size tile to draw.URL N/ATile Type “YammerReplies”List Name N/AView Name N/AExtParameters Any extra parameters that a tile may need. These are different for

each tile type.TitleLinkAction The type of navigation to perform when the tile is clicked.ItemLinkAction N/AAutoRefresh Determines whether or not the tile will automatically refresh itself


The following ExtParameters are valid for this tile: AppId=[The ClientID generated by the Yammer App] RefreshTime=[seconds – values under 30 may result in abnormal behavior]

47

Initial Yammer Network SetupTo ensure the Yammer network will correctly populate feeds during a demo, complete the following steps.

1. Log in to the SharePoint tenant with the administrator credentials (see above).2. From the Office 365 App Launcher ( ), tap Yammer. 3. If you see a welcome screen, ensure the “Don’t show this message again” box is

checked, and then tap Take me to Yammer.4. In the address bar of the Log in or Sign in dialog, note the Yammer network being

used, for example:https://www.yammer.com/<YammerNetwork>.onmicrosoft.com/dialog/....

5. In the Yammer Log in dialog, enter the same administrator credentials. 6. Tap Log In.

NOTE: A yellow “Do you want Internet Explorer to remember this password” message may briefly display and then go away. This is known behavior. NOTE: You may still see a Log in to Yammer prompt on Yammer app feeds on demo pages. If you log in to Yammer once, and if you have completed the Yammer tile Setup (below), you should be able to tap the link and the feed will populate.

Yammer Tile SetupIn the following steps, you will obtain a Yammer AppId and add it to the Yammer tile settings to display the data.

1. If not already logged into Yammer, log in to the demo’s Yammer tenant with administrator credentials.URL: https://yammer.com/<tenant>.onmicrosoft.com

2. Navigate to the Yammer App page at: https://www.yammer.com/client_applications. (Note, there is an underscore after “client” and before “applications”.)

3. In left navigation, tap Register New App.4. Enter any information you wish for Application Name, Organization, and Support

e-mail. For example:a. Application Name YammerApp010b. Organization Contosoc. Support e-mail GarthF@<tenant>.onmicrosoft.com

5. In Website text box, enter your tenant’s root URL: https://<tenant>.sharepoint.com.

6. NOTE: Do not include a trailing “/” and do not include site collection name.7. Accept the Yammer API Terms of Service and tap Continue.8. In left navigation, tap Basic Info.9. Under Installation Information, enter the tenant’s root URL

https://<tenant>.sharepoint.com you used for Website into Redirect URI and JavaScript Origins.

10. Tap Save.11. In left navigation, tap the name you gave the App (listed above Basic Info).12. Copy the Client ID string under Keys and tokens.13. Open the SharePoint tenant and browse to the tile definition list(s) with the

Yammer tiles, for example:/sites/cg/Lists/Social%20and%20Communication

48

mailto:GarthF@%3Ctenant%3E.onmicrosoft.com

https://www.yammer.com/client_applications

https://yammer.com/%3Ctenant%3E.onmicrosoft.com

14. For each Yammer tile, edit the Yammer list item, and in the ExtParameters field, replace the string after the AppID = with the copied ClientID.

SharePoint KPI TileThe KPI Tile will show items from a SharePoint KPI List. The display for the Tile will mimic the Generic List Tile, but with the KPI Indicator shown on the right of each item. While this tile connects to the SharePoint KPI List, you can’t create this type of list directly. In order to create the list, the Reporting feature will need to be turned on, and a Report Library created. The Report Library allows KPI Lists to be created inside it.Column DataTitle The Title to Display at the top of the TileIcon Image The Icon to display in the bottom left of the TileBackground Color The background color for the tileTile Size The size tile to drawURL The URL to navigate to when the Title is clicked (will default to the

KPI list)Tile Type “KpiList”List Name The name of the KPI listView Name The list view to use. If left blank, the default view will be shown.TitleLinkAction The type of navigation to perform when the Title is clickedItemLinkAction The type of navigation to perform when an Item is clickedAutoRefresh Determines whether or not the tile will automatically refresh itself




49

RSS Feed Tile

The RSS Feed tile displays ATOM-based RSS newsfeeds from the web. The URL property of the item indicates the RSS feed source. Title of the first 4 items in the feed are displayed along with a direct URL to the content. The number of feed items to display can be controlled by specifying an optional ExtParameter value: NumberOfEntries.Column DataTitle The text to display at the top of the tile. Hyperlinks to the RSS feed

source page.Icon Image N/ABackground Color The background color for the tileTile Size The size tile to draw. Only large and wide tile sizes will display the

RSS feed items.URL The URL of the RSS feed source. Also the URL to navigate to when

the tile title is clicked.Tile Type “RSSFeed”List Name N/AView Name N/ATitleLinkAction N/AItemLinkAction The type of navigation to perform when an Item is clicked. Only

supports New Tab and Same Window.AutoRefresh Determines whether or not the tile will automatically refresh itself


ExtParameters Any extra parameters that a tile may need.The following ExtParameters are valid for this tile:

DialogWidth=[Width in Pixels] DialogHeight=[Height in Pixels] RefreshTime=[seconds] NumberOfEntries=[number of feed items to display from the source]

50

Appendix 4: Tile RenderingWithin a tile group, the tiles are rendered to the following dimensions, per tile size property defined in the Tile List:

Medium: 120 pixel (square) Wide: 120 pixel (height) by 250 pixel (width) Large: 250 pixel (square)

The white spacing between the tiles is 10 pixel.On the Tile Page, they are laid out in the ascending order specified in the Sort Order property of each tile. The illustration below shows the rendering order for a group of tiles of various sizes whose sort order properties are as indicated by the numbers.

51

520 pixel

250 pixel250 pixel

11(Wide)

10(Large)

9(Medium)

8(Medium)

7(Medium)

6(Medium)

5(Medium)

4(Medium)

3(Wide)

2(Medium)

1(Medium)

Appendix 5: Microsoft Corporation Technical Documentation License AgreementMicrosoft Corporation Technical Documentation License Agreement (Standard)READ THIS! THIS IS A LEGAL AGREEMENT BETWEEN MICROSOFT CORPORATION ("MICROSOFT") AND THE RECIPIENT OF THESE MATERIALS, WHETHER AN INDIVIDUAL OR AN ENTITY ("YOU"). IF YOU HAVE ACCESSED THIS AGREEMENT IN THE PROCESS OF DOWNLOADING MATERIALS ("MATERIALS") FROM A MICROSOFT WEB SITE, BY CLICKING "I ACCEPT", DOWNLOADING, USING OR PROVIDING FEEDBACK ON THE MATERIALS, YOU AGREE TO THESE TERMS. IF THIS AGREEMENT IS ATTACHED TO MATERIALS, BY ACCESSING, USING OR PROVIDING FEEDBACK ON THE ATTACHED MATERIALS, YOU AGREE TO THESE TERMS.1. For good and valuable consideration, the receipt and sufficiency of which are acknowledged, You and Microsoft agree as follows:(a) If You are an authorized representative of the corporation or other entity designated below ("Company"), and such Company has executed a Microsoft Corporation Non-Disclosure Agreement that is not limited to a specific subject matter or event ("Microsoft NDA"), You represent that You have authority to act on behalf of Company and agree that the Confidential Information, as defined in the Microsoft NDA, is subject to the terms and conditions of the Microsoft NDA and that Company will treat the Confidential Information accordingly;(b) If You are an individual, and have executed a Microsoft NDA, You agree that the Confidential Information, as defined in the Microsoft NDA, is subject to the terms and conditions of the Microsoft NDA and that You will treat the Confidential Information accordingly; or(c)If a Microsoft NDA has not been executed, You (if You are an individual), or Company (if You are an authorized representative of Company), as applicable, agrees: (a) to refrain from disclosing or distributing the Confidential Information to any third party for five (5) years from the date of disclosure of the Confidential Information by Microsoft to Company/You; (b) to refrain from reproducing or summarizing the Confidential Information; and (c) to take reasonable security precautions, at least as great as the precautions it takes to protect its own confidential information, but no less than reasonable care, to keep confidential the Confidential Information. You/Company, however, may disclose Confidential Information in accordance with a judicial or other governmental order, provided You/Company either (i) gives Microsoft reasonable notice prior to such disclosure and to allow Microsoft a reasonable opportunity to seek a protective order or equivalent, or (ii) obtains written assurance from the applicable judicial or governmental entity that it will afford the Confidential Information the highest level of protection afforded under applicable law or regulation. Confidential Information shall not include any information, however designated, that: (i) is or subsequently becomes publicly available without Your/Company’s breach of any obligation owed to Microsoft; (ii) became known to You/Company prior to Microsoft’s disclosure of such information to You/Company pursuant to the terms of this Agreement; (iii) became known to You/Company from a source other than Microsoft other than by the breach of an obligation of confidentiality owed to Microsoft; or (iv) is independently developed by You/Company. For purposes of this paragraph, "Confidential Information" means nonpublic information that Microsoft designates as being confidential or which, under the circumstances surrounding disclosure ought to be treated as confidential by Recipient. "Confidential Information" includes, without limitation, information in tangible or intangible form relating to and/or including released or unreleased Microsoft software or hardware products, the marketing or promotion of any Microsoft product, Microsoft's business policies or practices, and information received from others that Microsoft is obligated to treat as confidential.2. You may review these Materials only (a) as a reference to assist You in planning and designing Your product, service or technology ("Product") to interface with a Microsoft Product as described in these Materials; and (b) to provide feedback on these Materials to Microsoft. All other rights are retained by Microsoft; this agreement does not give You rights under any Microsoft patents. You may not (i) duplicate any part of these Materials, (ii) remove this agreement or any notices from these Materials, or (iii) give any part of these Materials, or assign or otherwise provide Your rights under this agreement, to anyone else.3. These Materials may contain preliminary information or inaccuracies, and may not correctly represent any associated Microsoft Product as commercially released. All Materials are provided entirely "AS IS." To the extent permitted by law, MICROSOFT MAKES NO WARRANTY OF ANY KIND, DISCLAIMS ALL EXPRESS, IMPLIED AND STATUTORY WARRANTIES, AND ASSUMES NO LIABILITY TO YOU FOR ANY DAMAGES OF ANY TYPE IN CONNECTION WITH THESE MATERIALS OR ANY INTELLECTUAL PROPERTY IN THEM.4. If You are an entity and (a) merge into another entity or (b) a controlling ownership interest in You changes, Your right to use these Materials automatically terminates and You must destroy them.5. You have no obligation to give Microsoft any suggestions, comments or other feedback ("Feedback") relating to these Materials. However, any Feedback you voluntarily provide may be used in Microsoft Products and related specifications or other documentation (collectively, "Microsoft Offerings") which in turn may be relied upon by other third parties to develop their own Products. Accordingly, if You do give Microsoft Feedback on any version of these Materials or the Microsoft Offerings to which they apply, You agree: (a) Microsoft may freely use, reproduce, license, distribute, and otherwise commercialize Your Feedback in any Microsoft Offering; (b) You also grant third parties, without charge, only those patent rights necessary to enable other Products to use or interface with any specific parts of a Microsoft Product that incorporate Your Feedback; and (c) You will not give Microsoft any Feedback (i) that You have reason to believe is subject to any patent, copyright or other intellectual property claim or right of

52

any third party; or (ii) subject to license terms which seek to require any Microsoft Offering incorporating or derived from such Feedback, or other Microsoft intellectual property, to be licensed to or otherwise shared with any third party.6. Microsoft has no obligation to maintain confidentiality of any Microsoft Offering, but otherwise the confidentiality of Your Feedback, including Your identity as the source of such Feedback, is governed by Your NDA.7. This agreement is governed by the laws of the State of Washington. Any dispute involving it must be brought in the federal or state superior courts located in King County, Washington, and You waive any defenses allowing the dispute to be litigated elsewhere. If there is litigation, the losing party must pay the other party’s reasonable attorneys’ fees, costs and other expenses. If any part of this agreement is unenforceable, it will be considered modified to the extent necessary to make it enforceable, and the remainder shall continue in effect. This agreement is the entire agreement between You and Microsoft concerning these Materials; it may be changed only by a written document signed by both You and Microsoft.

53

document versions - microsoftmoddemodocs.blob.core.windows.net/resources-prod/... · web...

Documents