METRO TILES (SHAREPOINT ADD-IN)

Size: px

Start display at page:

Download "METRO TILES (SHAREPOINT ADD-IN)"

Angelica Chambers
5 years ago
Views:

2 Notice. 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 Website: contact@beyondintranet.com Copyright Beyond Intranet All Rights Reserved ii

3 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 SharePoint Online Copyright Beyond Intranet All Rights Reserved iii

4 Contents 1 Introduction Features of Metro Tiles add-in User Roles and Access Rights User Roles Access Rights Versions Comparison Getting Started Installation of the Metro Tiles add-in Configuring Metro Tiles on your SharePoint Site Configuration settings Configuration Page Tiles List To Add a New Tile To Delete or remove any existing tile To edit any existing tile Settings on Tile Configurations page Tile appearance settings Add or change Tile Title Add or change Image link or URL Organize display of the image Modify or set tile size Modify or set tile color Modify or set sliding direction of the tile Modify or set tile font color Modify or set tile font size Tile Content Settings Content on Tile (Right aligned) Content on the slide Slide Content color Slide Content Font color Slide content font size Icon Image name Tile URL Copyright Beyond Intranet All Rights Reserved iv

5 3.6 Group settings Setting Tile group Web-part Settings- Custom properties Setting Tile order Restricting tile accessibility to specific user Opening web link in same or new tab on clicking Frequently Asked Questions (FAQs) How do I create a new tile? Where do I find the Tiles list? What kind of Tiles can I create? I want to create a tile which is not listed in the given settings. How do I create it? Why do I need the Pro version of Metro Tiles? How do I create a new group of tiles on my page? How are the permissions to edit the tiles managed in Metro Tiles? Are there any other customization options available other than the ones already present in the configuration? Suggested Samples of Metro Tiles Sample Sample Sample Sample Sample Copyright Beyond Intranet All Rights Reserved v

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

7 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. Copyright Beyond Intranet All Rights Reserved 1

8 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 User Roles The two most common user types for the Metro Tiles are as follows: 1) Administrator 2) Users 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. Copyright Beyond Intranet All Rights Reserved 2

9 1.3 Versions Comparison Metro Tiles Version Comparison Version Free Pro Plus Tiles Types All types All types All types Pre- defined set of tiles Only unfiltered tab Pre-filtered Social, google apps, custom Pre-filtered Social, google apps, custom Tile click links Only Open in new tab Selection - same or new tab Selection - same or new tab Grouping of Tiles ordering of Tiles X Drag and drop feature X Support ** limited to FAQ Feature enhancement X Continuous Continuous Configurations page experience Native SharePoint Customized metro style Customized metro style Option to customize X Design and functional level Design and functional level Future Upgrades X **Support would be scoped to Installation and Configuration Level. In this document we have described the Plus version. Copyright Beyond Intranet All Rights Reserved 3

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.

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

10 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: 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 Copyright Beyond Intranet All Rights Reserved 4

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

11 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 an 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. Copyright Beyond Intranet All Rights Reserved 5

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.

12 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 Copyright Beyond Intranet All Rights Reserved 5

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

13 3 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. In this section of the user guide, we will help you with answering your questions with regard to Configuration settings and give you detail on features of the Metro Tiles add-in. 3.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. This navigates you to the Metro Tiles Configuration instruction page. (Refer Figure 7) 5. On the top right hand side of the page, you can see five different icons. These are various options for further navigation. (Refer Figure 8.) 6. Second icon from the right hand side of the screen is the Configurations icon for the Metro Tiles addin. Figure 6: Configuration Navigation Copyright Beyond Intranet All Rights Reserved 6

14 Figure 7: Configuration Page Figure 8: Navigation Icons Let us understand in detail as what each one of these icons allows us to perform: a. Beyond Intranet site icon - This icon navigates the user to Beyond Intranet website. b. Metro Tiles user guide- - This opens the link to our Metro Tiles guide from our site. c. Contact Beyond Intranet through website icon - This icon leads you to the contact us page of Beyond intranet website. d. Configurations icon - This is the most important icon which navigates users to Configuration settings. e. You Tube icon - This icon allows you to view the you tube video of the add-in explaining complete process of configuration settings and features. Copyright Beyond Intranet All Rights Reserved 7

15 3.2 Tiles List Tiles list gives you a summarized list of all the tiles on your page with all the required details like Tile name, type, navigation link, image link, group, size, color and font as well. Functions which can be controlled from the tiles list page are: 1. Add new tile 2. Delete existing tile 3. Edit existing tile Figure 9: Tiles List View 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 10: Add New Tile Copyright Beyond Intranet All Rights Reserved 8

16 3.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 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 11: Edit/ Delete tile 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 12: Save Button Copyright Beyond Intranet All Rights Reserved 9

17 3.3 Settings on Tile Configurations page Metro Tiles - Tile Configuration page consists of different sections for controlling various kind of settings. 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 Copyright Beyond Intranet All Rights Reserved 10

18 3.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. Let us understand how each function works separately now. Figure 14: Tile appearance Settings 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 Copyright Beyond Intranet All Rights Reserved 11

19 3.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 Copyright Beyond Intranet All Rights Reserved 12

3.4.3 Organize display of the image To organize the image in the tile, you can either select the

Let us check out steps to the process: 1) Click on Configuration icon of the add-in and add or edit

3) Click on the save button on the right hand side of the Tile configuration mast- head to save new

20 3.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 Copyright Beyond Intranet All Rights Reserved 13

These are small, medium, wide and large.

Figure 19: Set Tile size Figure 20: Small

21 3.4.4 Modify or set tile size There are four options for setting up tile size. These are small, medium, wide and large. User can set each tile size as per their requirement by selecting the size from the available drop down. Figure 19: Set Tile size Figure 20: Small size tile Figure 22: Wide size Tile Figure 21: Medium size tile Figure 23: Large size tile Copyright Beyond Intranet All Rights Reserved 5

22 3.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 Copyright Beyond Intranet All Rights Reserved 5

23 3.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 Copyright Beyond Intranet All Rights Reserved 6

24 3.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 Copyright Beyond Intranet All Rights Reserved 7

25 3.4.8 Modify or set tile font size. User can modify or set each tile font size to either Small or Large 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 font size option to open the dropdown menu. 3) Select Small or large font size from the list. 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 Copyright Beyond Intranet All Rights Reserved 8

26 3.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! Content on Tile (Right aligned) Figure 29: Tile Content settings 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 Copyright Beyond Intranet All Rights Reserved 9

27 3.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 Copyright Beyond Intranet All Rights Reserved 10

28 3.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 Copyright Beyond Intranet All Rights Reserved 11

29 3.5.4 Slide Content Font color User can select Slide Font 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 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 Copyright Beyond Intranet All Rights Reserved 12

30 3.5.5 Slide content font size User can select Slide Font size 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 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 Copyright Beyond Intranet All Rights Reserved 13

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

31 3.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. Steps to the process are as follows: 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 Copyright Beyond Intranet All Rights Reserved 14

32 3.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 Copyright Beyond Intranet All Rights Reserved 15

33 3.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 43: Group Settings 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 44: Tile group settings Copyright Beyond Intranet All Rights Reserved 16

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

your page. Figure 45: Edit option 2) Mouse over the checkbox at the top corner of the web-part which the user intents to make changes. Figure 46: Edit Web part 3) Click on Edit web part.

34 3.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 45: Edit option 2) Mouse over the checkbox at the top corner of the web-part which the user intents to make changes. Figure 46: 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 47: Custom properties Copyright Beyond Intranet All Rights Reserved 17

35 3.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 48: Tile order Copyright Beyond Intranet All Rights Reserved 18

36 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 49: Drag and Drop activation message Copyright Beyond Intranet All Rights Reserved 19

37 3.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 50: Access right to view Tiles Copyright Beyond Intranet All Rights Reserved 20

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

38 3.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 51: Open link in new tab Copyright Beyond Intranet All Rights Reserved 21

39 4 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:contact@beyondintranet.com. We would soon setup a meeting, take your suggestions and implement it. 4.5 Why do I need the Pro version of Metro Tiles? The pro 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. Copyright Beyond Intranet All Rights Reserved 22

40 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 subweb(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:contact@beyondintranet.com. Copyright Beyond Intranet All Rights Reserved 23

5 Suggested Samples of Metro Tiles Sample 1 Sample 2

IE11, Edge (current version), Chrome (current version), Firefox (current version)

IE11, Edge (current version), Chrome (current version), Firefox (current version) Quick Start Guide DocuSign for SharePoint Online v3.4 Published: October 13, 2017 Overview DocuSign for SharePoint Online allows users to sign or send documents for signature from a SharePoint Online library.