user guide - beyondintranet.com · their organizations have to visit frequently. with this...

Beyond Technologies LLC User Guide

Copyright © Beyond Intranet 2017. All Rights Reserved

METRO TILES (SHAREPOINT ADD-IN)

User Guide

June 2019

Version 2.8



Notice

Beyond Technologies LLC.

This is a controlled document. Unauthorized access, copying, replication or usage for a purpose other than for which it is intended, are prohibited.

All trademarks that appear in the document have been used for identification purposes only and belong to their respective companies.

BEYOND TECHNOLOGIES LLC

INDIANA

Suite 305, 8N 3rd Street, Lafayette, IN 47901

Website: www.beyondintranet.com

Email: [email protected]

mailto:[email protected]



About this Document

Purpose

This guide has been written to help you understand and use the Metro Tiles add-in. It presents the functional capabilities and operational details of Metro Tiles and contains the procedures that you should know for performing your business tasks using the add-in.

Intended Audience

This guide is intended for all the users of the add-in on SharePoint who are seeking to create, manage and update custom tiles and link them with their respective website links to provide super quick access.

Products Supported

➢ SharePoint 2013+ ➢ SharePoint Online



Contents

1 Introduction ........................................................................................................ 0

1.1 Features of Metro Tiles add-In ................................................................................................ 0

1.2 User Roles and Access Rights ................................................................................................ 1

1.2.1 User Roles ..................................................................................................................................... 1

1.2.2 Access Rights ................................................................................................................................ 1

1.3 Versions Comparison .............................................................................................................. 2

2 Getting Started ................................................................................................... 3

2.1 Installation of the Metro Tiles add-in ....................................................................................... 3

2.2 Configuring Metro Tiles on your SharePoint Site .................................................................... 5

3 Metro Tiles Home page ..................................................................................... 7

4 Configuration settings ...................................................................................... 8

4.1 Configuration Page ................................................................................................................. 8

4.2 All Tiles .................................................................................................................................... 9

4.2.1 To Add a New Tile ......................................................................................................................... 9

4.2.2 To Delete or remove any existing tile ......................................................................................... 10

4.2.3 To edit any existing tile ............................................................................................................... 10

4.3 Settings on Tile Configurations page or Add New Tile ......................................................... 11

4.4 Tile appearance settings ....................................................................................................... 13

4.4.1 Add or change tile title ............................................................................................................... 13

4.4.2 Add or change Image link or URL ............................................................................................... 14

4.4.3. Organize display of the image .................................................................................................... 15

4.4.4. Modify or set tile size ................................................................................................................. 16

4.4.5. Modify or set tile color ............................................................................................................... 17

4.4.6. Modify or set sliding direction of the tile ................................................................................... 18

4.4.7. Modify or set tile font color ....................................................................................................... 20

4.4.8. Modify or set tile font size. ......................................................................................................... 21

4.4.9. Modify or set tile font family. ..................................................................................................... 22

4.5 Tile Content Settings ................................................................................................................... 23

4.5.1 Content on Tile (Right aligned) ........................................................................................................ 23

4.5.2 Content on the slide ........................................................................................................................ 24

4.5.3 Slide Content color ..................................................................................................................... 25

4.5.4 Slide Content Font color ............................................................................................................. 26

4.5.5 Slide content font size ................................................................................................................ 27



4.5.6 Icon Image name ........................................................................................................................ 28

4.5.7 Tile URL ....................................................................................................................................... 29

4.5.8 Set Font Family ........................................................................................................................... 29

4.6 Group settings ....................................................................................................................... 30

4.6.1 Setting Tile group ....................................................................................................................... 30

4.6.2 Web-part Settings- Custom properties ...................................................................................... 31

4.6.3 Setting Tile order ........................................................................................................................ 32

4.6.4 Restricting tile accessibility to specific user ............................................................................... 34

4.6.5 Opening web link in same or new tab on clicking ...................................................................... 35

5. Frequently Asked Questions (FAQs) ............................................................. 36

6. Suggested Samples of Metro Tiles ................................................................ 38

Sample 1 ........................................................................................................................................... 38

Sample 2 ........................................................................................................................................... 38

Sample 3 ........................................................................................................................................... 39

Sample 4 ........................................................................................................................................... 40

Sample 5 ........................................................................................................................................... 40



Table of Figures

Figure 1: Installation process- Metro Tiles ............................................................................................................. 3 Figure 2: Site Contents page ................................................................................................................................... 4 Figure 3: SharePoint Store ...................................................................................................................................... 4 Figure 4: Buy app .................................................................................................................................................... 5 Figure 5: Metro Tiles view on SharePoint site ........................................................................................................ 6 Figure 6: Metro Tiles Home page .......................................................................................................................... 7 Figure 7: User permissions ..................................................................................................................................... 8 Figure 8: Tiles List view ........................................................................................................................................... 9 Figure 9: Add new tile ........................................................................................................................................... 10 Figure 10: Edit/ Delete tile .................................................................................................................................... 10 Figure 11: Save Button .......................................................................................................................................... 10 Figure 12: Add new Tile or configure new tile ...................................................................................................... 11 Figure 13: Tile Configuration page ........................................................................................................................ 12 Figure 14: Tile appearance Settings ...................................................................................................................... 13 Figure 15: Add Tile name ...................................................................................................................................... 13 Figure 16: Add an Image to the tile ...................................................................................................................... 14 Figure 17: Fit Image size ....................................................................................................................................... 15 Figure 18: Original image Vs Stretched image ...................................................................................................... 15 Figure 19: Set Tile size .......................................................................................................................................... 16 Figure 20: Small size tile ....................................................................................................................................... 16 Figure 21: Medium size tile .................................................................................................................................. 16 Figure 22: Wide size Tile ....................................................................................................................................... 16 Figure 23: Large size tile ....................................................................................................................................... 17 Figure 24: Set Tile color ........................................................................................................................................ 18 Figure 25: Set Slide direction ................................................................................................................................ 19 Figure 26: Set Tile font color ................................................................................................................................. 20 Figure 27: Set Font size ......................................................................................................................................... 21 Figure 28: Font size - preview ............................................................................................................................... 21 Figure 29: Tile Content settings ............................................................................................................................ 23 Figure 30: Enter tile right content ....................................................................................................................... 23 Figure 31: Tile content - preview .......................................................................................................................... 24 Figure 32: Tile Slide Content ................................................................................................................................. 24 Figure 33: Slide content- preview ......................................................................................................................... 24 Figure 34: Tile Slide color ...................................................................................................................................... 25 Figure 35: Slide color - preview ............................................................................................................................ 25 Figure 36: Slide content Font color ....................................................................................................................... 26 Figure 37: Slide content font color - preview ....................................................................................................... 26 Figure 38: Slide font size ....................................................................................................................................... 27 Figure 39: Slide Font size- preview ....................................................................................................................... 27 Figure 40: Tile Icon image ..................................................................................................................................... 28 Figure 41: Tile Icon Image - Preview ..................................................................................................................... 28 Figure 42: Tile Link ................................................................................................................................................ 29 Figure 43: Set Font Family .................................................................................................................................... 29 Figure 43: Group Settings ..................................................................................................................................... 30 Figure 44: Tile group settings ............................................................................................................................... 30 Figure 45: Edit option ........................................................................................................................................... 31 Figure 46: Edit Web part ....................................................................................................................................... 31 Figure 47: Custom properties ............................................................................................................................... 31 Figure 48: Tile order ............................................................................................................................................. 32 Figure 49: Drag and Drop activation message ...................................................................................................... 33 Figure 50: Access right to view Tiles ..................................................................................................................... 34 Figure 51: Open link in new tab ............................................................................................................................ 35



1 Introduction

Welcome to Metro Tiles SharePoint Add-In provided by Beyond Intranet.

“Tiles” or “Promoted Links” have become a popular demand on SharePoint these days. We see a lot of customers creating these pretty colorful and clickable tiles with attractive slide and hover animations on their sites to give each page a nice and modern appearance. Our Metro Tiles add-in is meant to provide a quick and easy solution for such requirement of the customers. It gives users a super quick access to their desirable website links.

Metro Tiles has a specially designed interface by which users can easily create, manage and update custom tiles on their intranet pages and link each tile with their favorite website links or where SharePoint users in their organizations have to visit frequently. With this extremely easy yet amazing add-in, you can create tiles on your SharePoint page within minutes and that too with the color, size, style and images of your choice.

This user guide gives you a detailed information about how you can use the Metro Tiles user as well configuration section of this add-in.

Let’s get started!

1.1 Features of Metro Tiles Add-In

The Metro Tiles add-in is facilitated with following interesting features:

• Create tiles on your SharePoint page within minutes.

• Arrange all your useful links on one page in desirable order.

• Super quick access to website links.

• Easy to adjust sizes, colors, text, styles and image of your choice, through easy configuration interface.

• Change text and images quickly.

• Aesthetically appealing and looks organized.

• Slide and Carousel tile to help say more with pictures.

• Drag and drop tiles to quickly change their placement.

• Grouping of tiles for better management.



1.2 User Roles and Access Rights

Metro Tiles is useful for SharePoint end users to give them super quick access to frequently visited website links. The platform is facilitated to be used by everyone and anyone within an organizational hierarchy in any company.

User roles and access rights can be defined as per the user level in hierarchy and can be differentiated for management, administrator and employees. Here, we have discussed the most commonly used roles and access rights which are needed by any typical organization.

1.2.1 User Roles

The two most common user types for the Metro Tiles are as follows:

1) Administrator 2) Users

1.2.2 Access Rights

1) Administrator a) Click on the tiles to open websites or links. b) Create new tiles and add them to links. c) Reorder tiles to change placement. d) Modify tile size, color, content, image, style of appearance. e) Set slide directions or carousal tile to enhance images. f) Set link opening to same or different window. g) Change zoom settings. h) Set tile groups. i) Delete tiles.

2) Users

a) Click on the tiles to open websites or links.



1.3 Versions Comparison

Metro tiles Version Comparison

Version Free Plus

Tiles limit

Max 12 tiles on 1 site or 20 tiles on 3 collective sites Unlimited

Tiles Types All types All types

Pre- defined set of tiles Only unfiltered tab Pre-filtered Social, google apps, custom

Tile click links Only Open in new

tab Selection - same or new tab

Grouping of Tiles X ✓

ordering of Tiles X ✓

Drag and drop feature X ✓

Support ** limited to FAQ ✓

Feature enhancement X Continuous

configurations page experience Native SharePoint Customized metro style

Option to customize X Design and functional level

Future Upgrades X ✓

Version Upgrade notification ✓ ✓

**Support would be scoped to Installation and Configuration Level.

In this document we have described the Plus version.



2 Getting Started

Access to Metro Tiles is limited to authorized users. To use it, you must first log on to Microsoft account using your user ID and password. On logging in, it allows you to either view and click any tiles or make configuration changes for which you need to have access rights.

2.1 Installation of the Metro Tiles add-in

Before you start to understand the functional aspects of the Metro Tiles Add-In, let us understand the steps for installing it from the Office 365 SharePoint store as follows:

1. Login to your office 365 SharePoint user or use URL mentioned below:

https://<domainname>.sharepoint.com/<sites/sitecollection>

2. Go to “Site contents” from the quick launch or go to the gear icon and click on “Site

contents” tab available in the dropdown.

Figure 1: Installation process- Metro Tiles

3. In the ‘Site contents’ click on ‘New’ and ‘App’. Or if you are using Classic SharePoint then Go to “add an app”.



Figure 2: Site Contents page

4. Go to SharePoint store.

Figure 3: SharePoint Store

5. Search for “Metro Tiles Plus” version of the app on the store.



Figure 4: Buy app

6. Click on the app to open up its purchasing page.

7. Sign in to your Microsoft account using either personal mail or Skype credentials. This will

not accept O365 account as it is working on windows live site.

8. Once signed in, you can make payment, Install the add-in on your SharePoint and start using

it.

2.2 Configuring Metro Tiles on your SharePoint Site

The SharePoint page which displays the Metro Tiles gives you access to following features:

1. Go to Edit the Web page/ app part in the SharePoint

2. Go to Configurations section of the Metro Tiles add-in

3. Sharing the website/ link with more people

4. Follow add-in or website

5. Navigate to SharePoint Settings

6. Metro Tiles web part



Figure 5: Metro Tiles view on SharePoint site

2

5 3

1

4

6



3 Metro Tiles Home page

Metro Tiles home page is a beautifully laid page of different tiles which provide user ability to quickly navigate to various sections of add-in like:

• Configuration settings

• Add new Tile

• All Tiles

• User manual

• Buy Now

• Contact us

• Beyond Intranet

1. Configuration tile: This tile allow user to give user permissions on the add-in. Only those users whose names are added in the user permission list can access Configurations tile and Add New Tile.

2. Add New tile: User can add a new tile by clicking on this tile and also set up tile configuration.

3. All Tiles: To check, add, edit, delete and manage all tiles on your add-in- navigate to All tiles on the

homepage.

4. User manual- if user is stuck on any function or step in process of setting up tiles- you can easily access this User Guide from this tile.

5. Buy Now: To upgrade from free version to Plus version- user can click on Buy now button and go to

shopping cart to purchase Plus version with premium features.

6. Contact us: In case of any question or help- user can navigate to Contact us tile and ask for help.

7. Beyond Internet: This tile navigates user to Beyond Intranet website where all the product and solution range is available for SharePoint users.

Figure 6: Metro Tiles Home page



4 Configuration settings To access the configurations page and make changes in the default settings – it is important that user should have authority to do so. By default, people with contribution access on a site are allowed to make changes in settings in the Metro Tiles as well. User can give access to any person from this tile so that person is eligible to add/ edit or delete any tile.

4.1 Configuration Page

For navigating to configuration page of Metro Tiles, following are the steps:

1. Go to SharePoint Quick launch bar (Refer Figure 6) 2. Click on “Metro Tiles Plus” 3. You can also navigate to Metro Tiles page using the Site Contents page as well. 4. Go to the homepage of the Metro Tiles add-in and click on Configuration settings tile to navigate to

user permissions. 5. Enter user name to give access rights to the desired person. 6. Click on save to save changes.

Figure 7: User permissions



4.2 All Tiles

Tiles list gives you a summarized list of all the tiles on your page with all the required details like Tile name, Tile type, Tile size, URL, keywords, tile order and so on..

Functions which can be controlled from the tiles list page are:

1. Add new tile 2. Delete existing tile 3. Edit existing tile

Figure 8: Tiles List view

4.2.1 To Add a New Tile

To add any new tile to any group, follow these simple steps:

1. Click on the “Add New Tile” button located on top left corner of the Tile list window. 2. This navigates to a new page of Tile configuration. Refer Figure 12 for Tile configuration. We will

explain more details about the features on this page later in the guide.



Figure 9: Add new tile

4.2.2 To Delete or remove any existing tile

To delete any tile from the group, follow these simple steps:

1. On the tile list page- you will find two keys just before each Tile title. One of them is for deleting any tile and the other one helps to edit any tile. Refer Figure 11.

2. Click on the Delete Tile key to delete any tile from the group and list. 3. A confirmation dialog box will appear asking you to confirm before finally deleting a tile.

Click on “Delete tile” if you are sure to remove it from the list, else click “do not delete” button to retain Tile.

Figure 10: Edit/ Delete tile

4.2.3 To edit any existing tile

To make changes in the tile color, font, type, style, content, image, text, group and so on- user need to edit the tile first. This can be done from the tile List page. Follow the undermentioned steps to edit any tile from group:

1. Click on the pencil/ edit button located before each tile title on the list page. 2. This will navigate you to the Configuration list page. (Refer figure 13). 3. Make required changes in the tile. 4. Click on the save button on the right hand side of the Tile configuration mast- head. (refer

figure 12)

Figure 11: Save Button



4.3 Settings on Tile Configurations page or Add New Tile

Metro Tiles - Tile Configuration page consists of different sections for controlling various kind of settings. User can navigate to Add new tile from the home page of the add-in by clicking on Add new tile.

Figure 12: Add new Tile or configure new tile

Each section further is divided into labels which are as follows:

a) Tile appearance settings b) Tile Content settings c) Group settings d) Tile Preview

In this user guide we will understand in detail as what are the labels function and how they work.



Figure 13: Tile Configuration page



4.4 Tile appearance settings

Tile appearance settings allows user to do various functions like adding or changing tile name, color, size, font, image URL and appearance style and making tile title bold, italic and underlined.

Let us understand how each function works separately now.

Figure 14: Tile appearance Settings

4.4.1 Add or change tile title

To add or change any tile name, we have to follow the steps as mentioned here:

1) Click on Configuration icon of the add-in and add or edit desired tile. 2) Click on the “Enter the Title” tab on the “Tile appearance settings” section. 3) Enter “new tile name”. 4) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 15: Add Tile name



4.4.2 Add or change Image link or URL

To change image on the tile, the user has to give the proper image URL from where the tile has to pick up the image. Let us check out steps to the process:

1) Click on Configuration icon of the add-in and add or edit desired tile. 2) Open the image in a separate browser tab and copy its URL. 3) Click on “Image URL” tab and paste the URL to give path to the desired image. 4) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings. 5) You can also have your image coming from any common web URL or on your SharePoint

library.

Figure 16: Add an Image to the tile



4.4.3. Organize display of the image

To organize the image in the tile, you can either select the settings of image from the drop down selection: Fit image (stretch) or Original image size. Let us check out steps to the process:

1) Click on Configuration icon of the add-in and add or edit desired tile. 2) Click on “Fit image” tab and select “Original size image” or “Stretch” from the drop down. 3) Click on the save button on the right hand side of the Tile configuration mast- head to save new

settings.

Figure 17: Fit Image size

Figure 18: Original image Vs Stretched image



4.4.4. Modify or set tile size

There are Five options for setting up tile size. These are custom, small, medium, wide and large. User can set each tile size as per their requirement by selecting the size from the available drop down. To set custom size for the tile, user will need to enter to the tile height and width and it will show up in the preview.

Figure 19: Set Tile size

Figure 20: Small size tile

Figure 21: Medium size tile

Figure 22: Wide size Tile



Figure 23: Large size tile

4.4.5. Modify or set tile color

To modify or set a new tile color, user need to adjust hue, saturation and lightness meters in this tab. Steps to be followed to do the process are:

1) Go to “Tile appearance settings” section on the “configuration page” 2) Select the “Type of tile” dropdown to “ICON” type. 3) Click on the “Tile color” option 4) A color picker control* appears that lets a user specify a color, either by using a visual color

picker interface or by entering the color into a text field in "#rrggbb" hexadecimal format. 5) Click on the Tick mark (✓) to confirm or (x) to discard the color settings. 6) Check the preview of the tile available on the configuration page. 7) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

*The color picker’s presentation may vary substantially from one browser and/or platform to another — it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window.



Figure 24: Set Tile color

4.4.6. Modify or set sliding direction of the tile

User can modify and set a tile sliding direction in the “Type of tile” option.

Let us see what steps to follow to complete this process:

1) Go to “Tile appearance settings” section on the “configuration page” 2) Select the “Type of tile”. Dropdown appears with ten different options for setting slide

directions to up, down, right or left. You can also set tile type to None or Icon, as per your requirement.

3) Check the preview of the tile available on the configuration page. 4) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.



Figure 25: Set Slide direction



4.4.7. Modify or set tile font color

User can modify or set any tile font color from more than 50 different color options.

Steps to set the tile font color are as follows:

1) Go to “Tile appearance settings” section on the “configuration page”. 2) Click on “Tile font color” option to open the dropdown menu. 3) Select Font color from the In-built font color list with a choice of more than 50 attractive

colors. 4) Check the preview of the tile available on the configuration page. 5) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 26: Set Tile font color



4.4.8. Modify or set tile font size.

User can modify or set each tile font pixels from 1 to 30 as per the requirement. Steps to set the tile font color are as follows:

1) Go to “Tile appearance settings” section on the “configuration page”. 2) Click on “Tile pixels” option to open the dropdown menu. 3) Select an font size from the list from 1 to 30 number. 4) Check the preview of the tile available on the configuration page. 5) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 27: Set Font size

Figure 28: Font size - preview



4.4.9. Modify or set tile font family.

User can modify or set each tile font family from the inbuilt list of font family available here. . Steps to set the tile font family are as follows:

1) Go to “Tile appearance settings” section on the “configuration page”. 2) Click on “Tile font family” option to open the dropdown menu. 3) Select any font family from the list. 4) You can also check on Bold, Italic or underline option if you want to change your text

accordingly on the tile. 5) Check the preview of the tile available on the configuration page. 6) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

7)



4.5 Tile Content Settings

User can control the content on tile and slide both from this section of configuration menu. Slide color, content, color, size, and navigation to the web page – all can be decided from this setting section.

Let us understand how!

Figure 29: Tile Content settings

4.5.1 Content on Tile (Right aligned)

User can add content of their choice on any tile with the help of this tab in the section. Steps to set the tile content are as follows:

1) Go to “Tile content settings” section on the “configuration page”. 2) Click on ‘Enter tile right content” tab. 3) Enter desired content. 4) Check the preview of the tile available on the configuration page. 5) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Color and size of the content added here will be decided by the selections you have made in the “Tile appearance settings” sections.

Figure 30: Enter tile right content



Figure 31: Tile content - preview

4.5.2 Content on the slide

If you have set sliding directions on the tile by default, then sliding appearance will be observed when you hover your cursor on it. From this section of “Tile Content settings” user can set content to be displayed over the Tile slide.

Steps to set the slide content are as follows:

1) Go to “Tile content settings” section on the “configuration page”. 2) Click on “Enter Slide content” tab. 3) Enter desired content. 4) Check the preview of the tile available on the configuration page. 5) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 32: Tile Slide Content

Figure 33: Slide content- preview



4.5.3 Slide Content color

User can select Slide color from this option in the “Tile Content settings”.

Steps to the process are as follows:

1) Go to “Tile content settings” section on the “configuration page”. 2) Click on “Slide color” drop down”. 3) Select the desired color from the dropdown with more than 50 color options. 4) Check the preview of the tile available on the configuration page. 5) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 34: Tile Slide color

Figure 35: Slide color - preview



4.5.4 Slide Content Font color

User can select Slide Font color from this option in the “Tile Content settings”.


1) Go to “Tile content settings” section on the “configuration page”. 2) Click on “Slide content Font color” drop down. 3) Select the desired color from the dropdown with more than 50 color options. 4) Check the preview of the tile available on the configuration page. 5) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 36: Slide content Font color

Figure 37: Slide content font color - preview



4.5.5 Slide content font size

User can select Slide Font size from this option in the “Tile Content settings”.


1) Go to “Tile content settings” section on the “configuration page”. 2) Click on “Slide Font size” drop down. 3) Select the desired size from the dropdown from either “small” or “large” font. 4) Check the preview of the tile available on the configuration page. 5) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 38: Slide font size

Figure 39: Slide Font size- preview



4.5.6 Icon Image name

If you wish to add any Icon image on the tile rather than website image, then you can select any icon from an In-built list of more than 500 icons available in the dropdown.


1) Go to “Tile appearance settings” section on the “configuration page”. 2) Select “Icon” option in Tile type. 3) Next, Go to “Tile Content settings” section on the “configuration page”. 4) Click on the “Icon Name” dropdown 5) Select the desired icon image from the list available. 6) Check the preview of the tile available on the configuration page. 7) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 40: Tile Icon image

Figure 41: Tile Icon Image - Preview



4.5.7 Tile URL

Clicking on the tile navigates the user to the web link which is entered in this tab. It is important to enter the web link in this tab. Let us understand how this can be done with the steps mentioned below:

1) Go to “Tile content settings” section on the “configuration page”. 2) Click on “Tile link” tab. 3) Enter the complete URL where the user should be navigated after clicking on the tile. 4) Check the preview of the tile available on the configuration page. 5) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 42: Tile Link

4.5.8 Set Font Family Right tile font family and slide Font family can be set up from the drop down menus appearing on the font

family tabs of each field.

1) Go to “Tile content settings” section on the “configuration page”. 2) Click on “Right Tile font family” tab. 3) Select the font family from the drop down list 4) Check on bold, italics or underline box, if you wish to apply any of these to your text. 5) Check the preview of the tile available on the configuration page. 6) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 43: Set Font Family



4.6 Group settings

In the Group settings section, user can categorize tiles into various groups such as Social, Finance, Human Resources and so on. This is useful when user has to group the tiles under different headings or sections so they could be located easily. Apart from grouping, tile order, tile access and tile opening in same or new tab in any browser is also controlled from this section. Let us learn how each of these functions can be done.

Figure 44: Group Settings

4.6.1 Setting Tile group

Grouping of all tiles is required so that it becomes easy for users to locate them quickly. This also looks more organized when there are number of tiles. Groups can be social, financial, commercial, lifestyle and so on depending on the type of web site they navigate to. For example- Facebook, Twitter, Skype and so on can be grouped under social group while Amazon, e-bay, Snap deal and so on can be grouped under e-commerce tiles. For intranet, you can have groups based on function. For Example- Tile links to various documents like Leave Policy, Maternity Leave, Travel Policy can be placed under HR Policies.

It is mandatory to assign group to each tile. User can do the process from the Tile group section of group settings.

Let us understand how user can do this process:

1) Go to “Group settings” section on the “configuration page”. 2) Click on “Keyword/ grouping” tab. 3) Enter the group name into which the tile has to be placed. 4) Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 45: Tile group settings



4.6.2 Web-part Settings- Custom properties

This section is important when a user wants to filter the set of tiles from the backend or move the placement of the group on the web page. Let us understand how we can make changes in our custom properties:

1) Go to the SharePoint page with the Metro Tiles web-part (add in) and click on “Edit” button on the top right hand side corner of your page.

Figure 46: Edit option

2) Mouse over the checkbox at the top corner of the web-part which the user intents to make changes.

Figure 47: Edit Web part

3) Click on “Edit web part.” 4) You can now see the Web-part edit Toolbar for Metro Tiles add-in. (Refer figure 47) 5) Here you can make changes in appearance, layout, advanced settings to the various groups

and tiles as these are SharePoint supported properties. 6) You can find “Custom properties” settings at the end of this list. Here you have to “enter the

keyword/ group name that matches the corresponding entry” in the configurations to filter out that group.

7) Click on Apply and Ok before you leave the page to save your changes.

Figure 48: Custom properties



4.6.3 Setting Tile order

The add-in allows user to arrange all the tiles in a particular order in their respective group. This can be done by two methods which are as follows:

I. By adding specific order number to each of them. II. Drag and drop the tiles individually to their new location.

Let us understand the steps to do the process:

i. Adding order number

Steps to add Tile order number is as follows:

1. Go to “Group settings” section on the “configuration page”. 2. Click on “Tile order” tab. 3. Enter the number such as 1, 2, 3… and so on. for the tile order. 4. Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

The tile order will be overwritten from the web-part when you drag and drop tiles inside a group.

Figure 49: Tile order



ii. Drag and Drop tile

To Drag and drop tile for arranging in a required order, user should follow the steps given below:

1. Go to the SharePoint page with the Metro Tiles web-part (add in) and click on “Edit” button on the top right hand side corner of your page. (Refer figure 45)

2. Mouse over the checkbox at the top corner of the web-part which the user intents to make changes. (Refer Figure 46)

3. Click on “Edit web part.” This activates the drag and drop function for the user. (refer figure 49)

4. Now easily pick the tile you want to move and drop it to the desired location by clicking on it. 5. Click on “Save the order” button located on the left hand side of the group. 6. Save changes by clicking save button on the top right corner of the screen.

Figure 50: Drag and Drop activation message



4.6.4 Restricting tile accessibility to specific user

The admin can also allow and restrict other users to view the tile created or can create special tiles, which are only visible to specific users/groups. To allow only specific users to view the tile simply follow the steps as given below:

1. Go to “Group settings” section on the “configuration page”. 2. Click on the “Visible to*” tab. 3. Enter the name of the user/group to whom the tile should be visible. 4. If you do not enter any name in this tile – this means the tile will be visible to all the users

having access to the add-in. 5. Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 51: Access right to view Tiles



4.6.5 Opening web link in same or new tab on clicking

User can also control if the web link should open in a new tab or same tab after clicking on the tile. The steps to the process are as follows:

1. Go to “Group settings” section on the “configuration page”. 2. Click on the “Open link in a new tab”. 3. Select “Yes” or “No” from the drop down. 4. Click on the save button on the right hand side of the Tile configuration mast- head to save

new settings.

Figure 52: Open link in new tab



5. Frequently Asked Questions (FAQs)

4.1 How do I create a new tile?

You can create a tile by creating a new item in the Tiles List.

4.2 Where do I find the Tiles list?

You can navigate to the tiles list from the settings menu on the top right section on the App page.

4.3 What kind of Tiles can I create?

You can create a variety of tiles by combining any values in the configuration settings. A few of the configuration options are listed below:

1. Size 2. Color 3. Text 4. Slide Direction 5. Image 6. Icon 7. Zoom Settings

4.4 I want to create a tile which is not listed in the given settings. How do I create it?

Send in all your suggestions, queries or feature requests at mailto:[email protected]. We would soon setup a meeting, take your suggestions and implement it.

4.5 Why do I need the Plus version of Metro Tiles?

The Plus version of the Metro Tiles app has a set of features which is not provided in the free version of the app:

1. Ordering of Tiles through drag and drop or manually setting it in the configuration

2. Ability to choose the link behavior of the tiles - Open in new tab or same page. 3. Predefined sets of Tiles - landing page, google, social and so on. 4. Maximum no. of tiles which can be added in free version are 30 while in Plus

version, user can add unlimited no. of tiles.




4.6 How do I create a new group of tiles on my page?

You can follow the given steps to create a new group of tiles for your site:

1. Install the Metro Tiles app. 2. Navigate to the page where you want to add the app. 3. Edit the page, Add the web part from the web part menu. 4. Edit the web part, and give your new tiles group name in the app parts> properties > Custom Properties e.g. "social". 5. Now, go to site contents > Open the app > Navigate to the configuration section from the settings menu. 6. Add new tiles with “social” as the keyword/group name or change existing tiles group to “social”.

You can also check the Metro Tiles demo Video here.

4.7 How are the permissions to edit the tiles managed in Metro Tiles?

For any user who has contribute permission or any level above this would be able to edit/add/or delete tiles.

For a user who has read only permissions would be able to navigate to the edit tile page, but if he tries to save any tile changes, that would show up an error message stating: “Access Denied: The current user does not have permissions to perform this action”.

It is by default behavior of SharePoint that all apps inherit permissions from the sub-web(sub-site) in which it is installed.

4.8 Are there any other customization options available other than the ones already present in the configuration?

All our apps including the Metro Tiles are fully customizable. Please send us your requirements at mailto:[email protected].

https://youtu.be/tLECdtpCHic




6. Suggested Samples of Metro Tiles

Sample 1

Sample 2



Sample 3



Sample 4

Sample 5

user guide - beyondintranet.com · their organizations have to visit frequently. with this...

Documents