gimmal localization

Config Guide

Gimmal Smart Tiles (SharePoint-Hosted)

Software Release 4.4.0

November 2014

Gimmal Smart Tiles (SH) Configuration Guide

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 www.gimmal.com. All other trademarks used herein are the property of their

respective owners.

Document Revision History

Publication Date Document Version # Description

11/2014 1.0 Initial Guide.

If you have questions or comments about this publication, you can email

[email protected]. Be sure to identify the guide, version number, section, and

page number to which you are referring. Your comments are welcomed and appreciated.

http://www.gimmal.com/

mailto:[email protected]

Gimmal Smart Tiles (SH) Configuration Guide i

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 ................................................................................................................................................................................. 12

Specify a Repository Image for a Tile ........................................................................................................................................................... 14

ADD SMART TILES TO A PAGE .............................................................................................................................................................. 17

CONFIGURE THE SMART TILES APP PART ............................................................................................................................................ 18

Specify a Custom List.......................................................................................................................................................................................... 20

CLEAR APP EVENTS ................................................................................................................................................................................ 23

VIEW APP WEB – WEB PROPERTIES .................................................................................................................................................... 23

VIEW HOST WEB – WEB PROPERTIES ................................................................................................................................................. 23

VIEW ROOT WEB – WEB PROPERTIES ................................................................................................................................................. 23

Remove the Smart Tiles App .......................................................................................... 24

Gimmal Smart Tiles (SH) Configuration Guide ii

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-6 Edit Smart Tiles Dialog Box ......................................................................................................................... 7


Figure 3-8 Dialog Launch Behavior ................................................................................................................................ 9

Figure 3-9 Edit a Page ....................................................................................................................................................... 10

Figure 3-10 Web Part List ................................................................................................................................................ 10

Figure 3-11 Script Editor .................................................................................................................................................. 10

Figure 3-12 Dialog Launch Behavior Script............................................................................................................... 11

Figure 3-13 Smart Tiles App Site .................................................................................................................................. 12

Figure 3-14 Tile Art List Page ......................................................................................................................................... 12

Figure 3-15 Add a Document Dialog Box.................................................................................................................. 13

Figure 3-16 Edit Tile Art Page ........................................................................................................................................ 13

Figure 3-17 Tile Art List Page ......................................................................................................................................... 14

Figure 3-18 Image URL ..................................................................................................................................................... 15

Figure 3-19 Image Url Field ............................................................................................................................................ 16

Figure 3-20 Smart Tiles List Page.................................................................................................................................. 16

Figure 3-21 Edit a Page .................................................................................................................................................... 17

Figure 3-22 Insert Tab ....................................................................................................................................................... 17

Figure 3-23 Smart Tiles Parts List.................................................................................................................................. 17


Figure 3-25 Smart Tiles Editing Pane .......................................................................................................................... 18

Figure 3-26 Display Configuration Options .............................................................................................................. 19


Figure 3-28 Smart Tiles Editing Pane .......................................................................................................................... 21

Figure 3-29 Field Mapping Options............................................................................................................................. 22

Figure 4-1 Remove App ................................................................................................................................................... 24

Gimmal Smart Tiles (SH) Configuration Guide Preface

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 http://msdn.microsoft.com/en-

us/library/office/fp123530(v=office.15).aspx.)

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

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 1

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


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.


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.


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.


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.


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.


Modify a Smart Tile

Follow these steps to modify a Smart Tile:


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.


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.


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.



Delete a Smart Tile

Follow these steps to delete a Smart Tile:


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.


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


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.

10. Click Insert.

<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>


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.


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.


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.


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.


Figure 3-19 Image Url Field

7. Navigate to the Image Url field and paste the URL that you copied in step 3.

8. 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.



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:



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


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:



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


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.)


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:



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.


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.


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.


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.


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 localization

Documents