Config Guide. Gimmal Smart Tiles (SharePoint-Hosted) Software Release 4.4.0

Transcription

1 Config Guide Gimmal Smart Tiles (SharePoint-Hosted) Software Release November 2014

2 Title: Gimmal Smart Tiles (SharePoint-Hosted) Configuration Guide Copyright 2014 Gimmal, All Rights Reserved. Gimmal is a registered trademark of Gimmal Group. Microsoft and SharePoint are registered trademarks of Microsoft. Gimmal LLC believes the information in this publication is accurate as of its publication date. The information in this publication is provided as is and is subject to change without notice. Gimmal LLC makes no representations or warranties of any kind with respect to the information contained in this publication, and specifically disclaims any implied warranties of merchantability or fitness for a particular purpose. Use, copying, and distribution of any Gimmal software described in this publication requires an applicable software license. For the most up-to-date listing of Gimmal product names and information, visit All other trademarks used herein are the property of their respective owners. Document Revision History Publication Date Document Version # Description 11/ Initial Guide. If you have questions or comments about this publication, you can TechnicalPublications@Gimmal.com. Be sure to identify the guide, version number, section, and page number to which you are referring. Your comments are welcomed and appreciated. Gimmal Smart Tiles (SH) Configuration Guide

3 Table of Contents Introduction... 1 APPEARANCE... 1 Add the Smart Tiles App to a Host Site... 2 Configure and Manage Smart Tiles... 3 ACCESS SMART TILES APP SITE FROM THE HOST SITE... 3 MANAGE SMART TILES... 4 Create a Smart Tile... 4 Modify a Smart Tile... 6 Delete a Smart Tile... 9 Configure Dialog Launch Behavior... 9 MANAGE TILE ART Specify a Repository Image for a Tile ADD SMART TILES TO A PAGE CONFIGURE THE SMART TILES APP PART Specify a Custom List CLEAR APP EVENTS VIEW APP WEB WEB PROPERTIES VIEW HOST WEB WEB PROPERTIES VIEW ROOT WEB WEB PROPERTIES Remove the Smart Tiles App Gimmal Smart Tiles (SH) Configuration Guide i

4 Table of Figures Figure 1-1 Smart Tile Display Example... 1 Figure 3-1 Site Contents... 3 Figure 3-2 Smart Tiles App Site... 4 Figure 3-3 Smart Tiles List Page... 4 Figure 3-4 Smart Tiles Dialog Box... 5 Figure 3-5 Smart Tiles List Page... 6 Figure 3-6 Edit Smart Tiles Dialog Box... 7 Figure 3-7 Smart Tiles List Page... 8 Figure 3-8 Dialog Launch Behavior... 9 Figure 3-9 Edit a Page Figure 3-10 Web Part List Figure 3-11 Script Editor Figure 3-12 Dialog Launch Behavior Script Figure 3-13 Smart Tiles App Site Figure 3-14 Tile Art List Page Figure 3-15 Add a Document Dialog Box Figure 3-16 Edit Tile Art Page Figure 3-17 Tile Art List Page Figure 3-18 Image URL Figure 3-19 Image Url Field Figure 3-20 Smart Tiles List Page Figure 3-21 Edit a Page Figure 3-22 Insert Tab Figure 3-23 Smart Tiles Parts List Figure 3-24 Edit a Page Figure 3-25 Smart Tiles Editing Pane Figure 3-26 Display Configuration Options Figure 3-27 Edit a Page Figure 3-28 Smart Tiles Editing Pane Figure 3-29 Field Mapping Options Figure 4-1 Remove App Gimmal Smart Tiles (SH) Configuration Guide ii

5 Preface Gimmal delivers market-leading content governance and compliant records solutions built on Microsoft SharePoint. Gimmal solutions drive user adoption and simplify information access by making information lifecycle content management simple and transparent. This methodology ensures consistent, enterprise-wide compliance and proactive litigation readiness while lowering costs. Who Should Use This Guide SharePoint administrators are the intended audience for this document. Administrators are considered to be SharePoint power users who are familiar with the enterprise s content management and retention policies. Read this manual carefully so that you generally understand the Gimmal Smart Tiles deployment and configuration before adding it to a site or making any changes to SharePoint. This manual covers the following topics: 1. Provides an understanding of Smart Tiles 2. How to add the app to a host site 3. How to configure and manage the app and app part 4. How to remove the app from a host site Before You Begin Before deploying the app, you must configure the SharePoint 2013 server for app deployment, create an App Catalog, and configure SharePoint for apps. Make sure to complete the following: 1. Configure an App Catalog in the SharePoint farm. (For more information on configuring an App Catalog, visit 2. Ensure that the user performing the deployment has the correct permissions to add an app to the App Catalog. To add Smart Tiles to a site, you must use an account that has the following permissions: Manage web site and Create subsites. 3. The app installation package, SmartTiles.app, must be accessible from the machine where this deployment is performed. Gimmal Smart Tiles (SH) Configuration Guide Preface

6 Important! To deploy the app, upload the.app file into the App Catalog. Alternatively, refer to Gimmal s App Installer User Guide for instructions. Deploy the app before using the instructions in this manual to configure it. System Prerequisites The Smart Tiles app requires the following software: SharePoint Server 2013 (Standard or Enterprise Edition with Service Pack 1) or Office 365 Internet Explorer 10 (IE10) (at a minimum) Gimmal Smart Tiles (SH) Configuration Guide Preface

7 Introduction The Smart Tiles app is an enhanced version of SharePoint s Promoted Links (tile app part). The Smart Tiles app provides the ability to render a list of links as Windows 8-style tiles with descriptive text in mouse-over activated animation. The Smart Tiles app differs from SharePoint s Promoted Links in that it enables you to do the following: Apply an image background to a tile Choose from various sizes for the tile Make some tiles more visible than others Store multiple groups of links in the same source list and only display tiles for a specific group This manual provides configuration information and procedures for the Smart Tiles app. Important! This manual uses the terms app web and app site interchangeably. Appearance By default, Smart Tiles display on the page as an app part. When using mouse-over animation, the tile s description appears. Clicking on the tile opens the URL you specify for the tile during configuration. Figure 1-1 Smart Tile Display Example Gimmal Smart Tiles (SH) Configuration Guide 1

8 Add the Smart Tiles App to a Host Site Ensure that you successfully deploy the app to the SharePoint App Catalog before continuing with this section. (Refer to Before You Begin for more information.) Important! Use a non-system account with appropriate permissions to perform these steps. Performing these steps when logged in with a system account may produce undesired results. Follow these steps to add the Smart Tiles app to a host site: 1. Navigate to the site and add the user (the user to deploy Smart Tiles) as a Site Collection Administrator. 2. Select Settings ( ) > Site Contents to display the Site Contents page. 3. Select from the top of the page. A Smart Tiles tile displays under Apps you can add. 4. Click the Smart Tiles tile. A window displays Do you trust Smart Tiles? 5. Click Trust It. The app deploys on the host site. Gimmal Smart Tiles (SH) Configuration Guide 2

9 Configure and Manage Smart Tiles This chapter provides information about configuring and managing Smart Tiles. After you deploy Smart Tiles, the app site presents several options, which you can access by clicking on the corresponding tile. Additionally, there are several other configurable options for Smart Tiles. This section provides instructions for the following: Access Smart Tiles app site from the host site Manage Smart Tiles (Create, modify, or delete a tile) Configure Dialog launch behavior Manage tile art Specify a repository image for a tile Add Smart Tiles to a page Configure Smart Tiles app part Specify a custom list to manage Smart Tiles Clear app events View app web, host web, or root web properties Access Smart Tiles App Site from the Host Site Follow these steps to access the Smart Tiles app site from the host site: 1. Navigate to the host site. 2. Select Site Contents from the Settings menu. The Site Contents window displays. Figure 3-1 Site Contents 3. Click Smart Tiles under Lists, Libraries, and other Apps. The Smart Tiles app site displays. Gimmal Smart Tiles (SH) Configuration Guide 3

10 Figure 3-2 Smart Tiles App Site Manage Smart Tiles The Manage Smart Tiles tile on the app site enables you to configure a new Smart Tile or modify or delete an existing one. The following sections provide procedures for working with Smart Tiles. Create a Smart Tile Follow these steps to create a Smart Tile: 1. Navigate to the Smart Tiles app site. 2. Click Manage Smart Tiles. The Smart Tiles List page displays. Figure 3-3 Smart Tiles List Page 3. Click new item. The Smart Tiles dialog box displays. Gimmal Smart Tiles (SH) Configuration Guide 4

11 Figure 3-4 Smart Tiles Dialog Box 4. Complete the fields in the dialog box: a. Title Required. Type the tile display name; always visible to the user. b. Description Required. Type the tile description; visible on mouse-over. (Refer to the note that follows the Size field description.) c. Image Url Type the full URL and description for the tile image. When blank, the color you specify for the tile displays instead, and the URL description is ignored. (To store an image in a repository and specify it as a tile image, refer to Manage Tile Art and Specify a Repository Image for a Tile. ) d. Link Url Required. Type the full URL for the tile target when clicked; the URL description is ignored. e. Size Required. Click and select the tile s size. Important! The description text displays only if the tile s height x width is greater than 1. Also, if the description text does not fit within the specified tile size, the description truncates. Gimmal Smart Tiles (SH) Configuration Guide 5

12 f. Color Required. Click and select the tile s color; applies only when no image is present. g. Highlight Select to provide the app part the option of increasing the tile size. Important! In addition to the tile s Highlight field, there are two Highlight-related properties on the app part that affect how a highlighted tile displays. Refer to steps 4c and 4d in Configure the Smart Tiles App Part for more information about highlighting a tile. h. Category Required. Type a category name for the tile. To put additional tiles in the same category, be sure to type the category name exactly the same for all tiles. i. Launch Behavior Required. Click and select how the tile s target location opens; choices are In current window, New tab, or Dialog. (The Dialog launch behavior displays the target URL in a dialog when the user clicks the tile. Refer to Configure Dialog Launch Behavior for additional information.). 5. Click Save. The Smart Tiles list page displays with the tile attributes listed in the columns. Figure 3-5 Smart Tiles List Page Modify a Smart Tile Follow these steps to modify a Smart Tile: 1. Navigate to the Smart Tiles app site. 2. Click Manage Smart Tiles. The Smart Tiles List page displays. 3. Click the ellipsis ( ) corresponding to the tile you want to modify. A menu displays. 4. Click Edit Item. The dialog box for the tile displays. Gimmal Smart Tiles (SH) Configuration Guide 6

13 Figure 3-6 Edit Smart Tiles Dialog Box 5. Modify the information, as needed: a. Title Required. Type the tile display name; always visible to the user. b. Description Required. Type the tile description; visible on mouse-over. (Refer to the note that follows the Size field description.) c. Image Url Type the full URL and description for the tile background image. When blank, the color you specify for the tile displays instead, and the URL description is ignored. (To store an image in a repository and specify it as a tile image, refer to Manage Tile Art and Specify a Repository Image for a Tile. ) d. Link Url Required. Type the full URL for the tile target when clicked; the URL description is ignored. e. Size Required. Click and select the tile s size. Important! The description text displays only if the tile s height x width is greater than 1. Also, if the description text does not fit within the specified tile size, the description truncates. f. Color Required. Click and select the tile s color; applies only when no image is present. Gimmal Smart Tiles (SH) Configuration Guide 7

14 g. Highlight Select to provide the app part the option of increasing the tile size. Important! In addition to the tile s Highlight field, there are two Highlight-related properties on the app part that affect how a highlighted tile displays. Refer to steps 4c and 4d in Configure the Smart Tiles App Part for more information about highlighting a tile. h. Category Required. Type a category name for the tile. To put additional tiles in the same category, be sure to type the category name exactly the same for all tiles. i. Launch Behavior Required. Click and select how the tile s target location opens; choices are In current window, New tab, or Dialog. (The Dialog launch behavior displays the target URL in a dialog when the user clicks the tile. Refer to Configure Dialog Launch Behavior for additional information.) 6. Click Save. The Smart Tiles list page displays with the edits you made. Figure 3-7 Smart Tiles List Page Gimmal Smart Tiles (SH) Configuration Guide 8

15 Delete a Smart Tile Follow these steps to delete a Smart Tile: 1. Navigate to the Smart Tiles app site. 2. Click Manage Smart Tiles. 3. Click the ellipsis ( ) corresponding to the tile you want to delete. A menu displays. 4. Click Delete Item. 5. Confirm the deletion by clicking OK. Configure Dialog Launch Behavior You can configure a Smart Tile to launch in the current browser tab, in a new browser, or in a dialog. If you configure a tile with the Dialog launch behavior, the corresponding site page displays in a dialog window when the user clicks the tile. Figure 3-8 Dialog Launch Behavior Important! Do not use the open in dialog behavior to link non-secure sites (HTTP) from a secure SharePoint site (HTTPS). If Internet Explorer is configured to disallow mixed content (the default setting), the content in the dialog does not load and Internet Explorer displays the warning message Only secure content is displayed with a Show all content button. If you click Show all content, the insecure content loads in the main window instead of inside the dialog. Gimmal Smart Tiles (SH) Configuration Guide 9

16 Follow these steps if you specify the Dialog launch behavior for a tile: 1. Navigate to the desired page. Figure 3-9 Edit a Page 2. Click Edit from the Page ribbon menu. 3. Click the Insert tab, then click Web Part. Figure 3-10 Web Part List 4. Select Media and Content from the Categories list. 5. Select Script Editor web part from the Parts list. 6. Click Add. The Script Editor web part displays on the page. 7. In the drop-down on the upper right corner of the Script Editor web part, click Edit Web Part. The Script Editor displays. Figure 3-11 Script Editor Gimmal Smart Tiles (SH) Configuration Guide 10

17 8. Click Edit Snippet. A dialog box displays. Figure 3-12 Dialog Launch Behavior Script 9. Add the following script in the dialog box. Important! Ensure that you enter the script exactly as shown below. Copying and pasting the script from this document into SharePoint may introduce character conversion anomalies. <script equals "text/javascript"> AttachEvent("message", function (e) { var $rg = RegExp(/(<\s*[Mm]essage\s+[Ss]ender[Ii]d\s*=\s*([\dAaBbCcDdEdFf]{8})( \d{1,3})\s*>[oo]pen[dd]ialog\s*\(\s*(\s*(\d*)\s*([^,\)]*)\s*,\s*(\d*) \s*([^,\)\s\d]*))?\s*\)\s*<\/\s*[mm]essage\s*>)/); var $r = $rg.exec(e.data); if ($r == null) return; var $s = $r[3]; if (typeof (spappiframesenderinfo) == 'undefined' $s >= spappiframesenderinfo.length) return; var $o = { title: $r[6], url: $r[8], allowmaximize: true, showmaximized: true, autosize: true }; OpenPopUpPageWithDialogOptions($o); }); </script> 10. Click Insert. Gimmal Smart Tiles (SH) Configuration Guide 11

18 11. Click Save to save the page. When the user selects the tile, it displays the corresponding site page in a dialog window. Manage Tile Art A Smart Tile can display with an image as a background. You specify this image in the Image Url field when configuring the tile. (Refer to step 4c in Create a Smart Tile. ) The Manage Tile Art tile enables you to add and store these background images in a repository for easy access. To use an image in the repository as a tile background, refer to Specify a Repository Image for a Tile. Figure 3-13 Smart Tiles App Site Follow these steps to add an image to the repository: 1. Click the Manage Tile Art tile. The Tile Art list page displays. Figure 3-14 Tile Art List Page 2. Click new item, drag the file to the page, or search for the file to store it in this list. Gimmal Smart Tiles (SH) Configuration Guide 12

19 a. If you select new item, the Add a document dialog box displays. Figure 3-15 Add a Document Dialog Box b. Click Browse to select an image file to store in the repository. c. Click OK. The Edit page appears for the image file. Figure 3-16 Edit Tile Art Page d. Complete the fields as needed only the Name field is required. e. Click Save. The image appears on the Tile Art list page. Gimmal Smart Tiles (SH) Configuration Guide 13

20 Figure 3-17 Tile Art List Page Specify a Repository Image for a Tile After you add an image to the repository, you can use it as a background image for a tile. To do this, you must enter the image s URL in the Image Url field when configuring the tile. (Refer to step 4c in Create a Smart Tile. ) Follow these steps to specify an image from the repository for a tile: 1. Click the Manage Tile Art tile on the app site. 2. Hover over the image on the Tile Art List page and click the ellipsis ( ) that appears in the bottom right corner of the image. A pop-up displays with the URL for the image in the field. Gimmal Smart Tiles (SH) Configuration Guide 14

21 Figure 3-18 Image URL 3. Click in the field to highlight the entire image URL, then right click and select Copy. 4. Navigate to the app site and click Manage Smart Tiles. 5. Click the ellipsis ( ) corresponding to the tile that is to use this image. A menu displays. 6. Click Edit Item. The dialog box for the tile displays. Gimmal Smart Tiles (SH) Configuration Guide 15

22 Figure 3-19 Image Url Field 7. Navigate to the Image Url field and paste the URL that you copied in step Type a description of the image if desired. 9. Click Save. The image appears as a thumbnail on the Smart Tiles List page and displays as the tile s background image in the app part. Figure 3-20 Smart Tiles List Page Gimmal Smart Tiles (SH) Configuration Guide 16

23 Add Smart Tiles to a Page After configuring a Smart Tile, you can add it to a page. Important! You must have permission to add a web part to the desired page. Follow these steps to add a Smart Tile to a page: 1. Navigate to the desired page. Figure 3-21 Edit a Page 2. Click Edit in the Page menu ribbon. Figure 3-22 Insert Tab 3. Click the Insert tab, then click App Part in the ribbon. The Parts list displays. Figure 3-23 Smart Tiles Parts List Gimmal Smart Tiles (SH) Configuration Guide 17

24 4. Select Smart Tiles from the Parts list. 5. Click Add. The tile displays on the page. 6. Click Save to save the changes to the page. Configure the Smart Tiles App Part In addition to configuring individual Smart Tiles, you can configure several options in the Smart Tiles app part. Important! By default, the values in the Field Mapping section correspond to the columns in the Smart Tiles list. (This list is created when you add the Smart Tiles app to a site.) Do not change these values unless you want to display Smart Tiles from a list you created. If you want to display tiles from your custom list, use the procedure in the next section, Specify a Custom List. Follow these steps to configure the Smart Tiles app part: 1. Navigate to the desired page. Figure 3-24 Edit a Page 2. Click Edit in the Page ribbon menu. The app part becomes editable. 3. In the drop-down on the upper right corner of the app part, click Edit Web Part. The Smart Tiles editing pane displays. Figure 3-25 Smart Tiles Editing Pane Gimmal Smart Tiles (SH) Configuration Guide 18

25 4. Click Display Configuration and complete the fields: Figure 3-26 Display Configuration Options a. Category Select a category of tiles to display. Only Smart Tiles whose category values match the specified category display. If this field is blank, no tiles display; if you enter All, all tiles display regardless of their category value. b. Default Launch Behavior Select a launch behavior. This launch behavior is used if you do not specify a launch behavior in Launch Behavior Mapping in the Field Mapping section, or if the underlying tile does not have a launch behavior value specified. c. Highlighted Links Promote If checked, all tiles configured as highlighted display at the size specified by Highlighted Links Size (below). If de-selected, the tile s Highlight property is not used. (Refer to step 4g in Create a Smart Tile. ) d. Highlighted Links Size Select display size for highlighted tiles. e. Number of Rows Type the number of rows to use to lay out the Smart Tiles. (Number should be 0 or greater.) Gimmal Smart Tiles (SH) Configuration Guide 19

26 f. Number of Tiles to Display Type a limit for the number of tiles to display in the web part, if desired. (Number should be 0 or greater. 0 = All tiles display.) g. Scroll Speed Select the speed for the tiles to move when using the scrolling arrows. (Fast or Slow) h. Tile Layout Specify order in which tiles display; choices are Tile Size (displays tiles largest to smallest) or Tile Order (displays tiles in the order in which they were created). i. Wrap Tiles Specify if tiles are wrapped (similar to text wrap within a spreadsheet) rather than scrolled. 5. Click OK. Specify a Custom List You can use a custom list to specify the columns that appear on the app part by completing the fields in the Field Mapping and Source Configuration sections. Important! By default, the values in the Field Mapping section correspond to the columns in the Smart Tiles list. (This list is created when you add the Smart Tiles app to a site.) Do not change these values unless you want to display Smart Tiles from a list you created. If you want to display tiles from your custom list, use the procedure in this section. (You also must specify a source for the custom list in the Source Configuration section.) Incorrect column names in this section result in an app part display error. Follow these steps to configure the Smart Tiles app part using a custom list: 1. Navigate to the desired page. Figure 3-27 Edit a Page 2. Select Edit from the Page ribbon menu. The app part becomes editable. 3. In the drop-down on the upper right corner of the app part, click Edit Web Part. The Smart Tiles editing pane displays. Gimmal Smart Tiles (SH) Configuration Guide 20

27 Figure 3-28 Smart Tiles Editing Pane 4. Click Field Mapping and type entries in the fields. Important! At a minimum, you must complete the Image Url Mapping, Link Url Mapping, Size, and Title fields in the app part s Field Mapping section (i.e., the list must have a corresponding field for each of these fields). The tile items in the underlying list do not have to have a value for each of these fields, but if they do not, undesired results may occur. Gimmal Smart Tiles (SH) Configuration Guide 21

28 Figure 3-29 Field Mapping Options a. Category Mapping The name of the column that contains the category value. b. Color Mapping The name of the column that contains the Smart Tile color. The column referenced must contain only HTML color names, or corresponding hex values. c. Description Mapping The name of the column that contains the Smart Tile description. d. Highlight Mapping The name of the column that contains the Highlight value. The column referenced must be a Yes or No column. e. Image Url Mapping The name of the column that contains the image URL to use for the tile. f. Launch Behavior Mapping The name of the column that contains the launch behavior value. The column referenced must contain one of the following values: In current window, New tab, or Dialog. g. Link Url Mapping Required. The name of the column that contains the URL for the tile target when clicked. The column referenced must be a hyperlink column. Gimmal Smart Tiles (SH) Configuration Guide 22

29 h. Size Mapping Required. The name of the column that contains the tile size. The column referenced must contain one of the following values: 1x1, 1x2, 2x2, 2x4, 4x4, or 4x8. (Format is height x width.) i. Title Mapping Required. The name of the column that contains the title value. 5. Click Apply. 6. Click Source Configuration and complete the fields: a. List Display Name Required. The text name of the list that contains the tiles and their data. b. List Host Web Url Required. URL of the parent web of the list specified in the List Display Name field. The list s parent web may only be the host web (where the app is installed), or it may be the app web itself. You can use the app web token (~appweburl), or the host web token (~hostweburl) in place of the actual URL. 7. Click OK. Clear App Events Click the Clear App Events tile to immediately clear the Smart Tiles event log. View App Web Web Properties Click the App Web Web Properties tile to view the web properties for the Smart Tiles app site. SharePoint creates an app web any time you add an app from the App Catalog to a site. This is a byproduct of the SharePoint app model. View Host Web Web Properties Click the Host Web Web Properties tile to view the web properties for the Smart Tiles host web. You added the app to the host web. This can be the root web or a sub-web. View Root Web Web Properties Click the Root Web Web Properties tile to view the web properties of the host site s root web. If you added the app in the root web, then the properties displayed for the host web and the root web are identical. Gimmal Smart Tiles (SH) Configuration Guide 23

30 Remove the Smart Tiles App You may need to remove Smart Tiles from the host site, according to your organization s needs. Follow these steps to remove the Smart Tiles app from the host site: 1. Navigate to the host site. 2. Select Settings ( ) > Site Contents to display the Site Contents page. 3. Hover over the Smart Tiles tile and click the ellipsis ( ). A pop-up displays. Figure 4-1 Remove App 4. Click the ellipsis on the pop-up, and then click Remove. The app no longer displays on the site and is not usable. Gimmal Smart Tiles (SH) Configuration Guide 24