BindTuning Installation Instructions, Setup Guide. Tiles Web Part Setup Guide

Transcription

1 BindTuning Installation Instructions, Setup Guide Tiles Web Part Setup Guide

2 This documentation was written by, and is property of Bind Lda, Portugal. As with any software product that constantly evolves, our products are in constant evolution. If you can t find an answer to your questions by reading this manual, please contact us directly. We ll be glad to assist you! 2015 Bind Lda Follow us twitter.com/bindskins Like us facebook.com/bindskins 1

3 Table of contents Table of contents... 2 Web Part Details... 3 Files... 4 Important Notes... 5 Web part disappearing in edit mode... 5 Lists in non-english sites... 5 Installing the Web Part... 6 Installation using apps... 6 Installation using Sandboxed Solutions... 7 Updating the Web Part... 8 Updating for apps... 8 Updating for Sandbox Solutions... 9 Configuration Creating the Tiles list...10 Web Part Settings...12 Managing Content Adding a new tile...14 Creating a video tile...15 Creating a twitter tile...16 Creating a weather tile...18 Creating a smart tile...19 Editing a tile...21 Deleting a tile...22 Field Descriptions Markdown rules

4 Web Part Details Product Platform Tiles Web Part SP2013 and SPO2013 3

5 Files This custom Web Part includes the following files: BTTiles_3.0.0.X.zip This is the add-in package file 4

6 Important Notes Web part disappearing in edit mode When editing your page, you may need to edit the chrome type or title of the web part. This is done through the Edit Web Part button in SharePoint. If you do this, the web parts may stop temporarily working. You can tell this has happened due to the presence of the Edit Snippet button on the web part. This is due to a SharePoint limitation in our new distribution model. Whenever this happens you can continue safely editing your page and web part properties. Once you save the page and exit edit mode, the web part will appear again. Lists in non-english sites When installing the web parts as Apps, note that the list template will not be available for non- English sites. In this situation upload the TilesList.wsp file to your solution gallery and activate it there. This will install a list you can use on that Site Collection. 5

7 Installing the Web Part Installation using apps If you want to use the new SharePoint app model instead of the old Sandboxed model to install the web parts on your sites, please follow these steps: 1. Download file BTTiles_3.0.0.X.zip to your computer and extract the content. 2. In your SharePoint Admin Center, choose apps from the left-side pane. (if you can t find the apps button, look for add-ins) 3. On this page, choose the app catalog option. If an app catalog already exists, you will be redirected to the corresponding site collection and you can skip to step Select the checkbox to create a new catalog site and press OK. 5. Create a new site collection. This is where the add-ins are installed, but they can be used by any other site collection. Its recommended to have the word catalog somewhere in the name. 6. Now on the catalog site collection, click the gear icon button in the suite bar and select Site Contents. 7. On the site contents page select Apps for SharePoint. 8. Now press the upload button and select the.app file included in this package. 9. Once the upload completes, go to the site collection where you wish to add the web part. 10. Open the Site Contents page on this site. 11. Type BTTiles Add-in on the search bar and select the app. Press the Trust it button. 12. Now you must wait for the app to finish installing on the page. 13. Once the installation is finished click on the app. Now select Install Add-In. 14. The page will begin deploying the web part into your site. Once it s finished you will have it available on you site collection. To add the app to other site collections, simply repeat steps 9 through 14. Note: In SharePoint 2013 on premises, you may need to configure the SharePoint app store before you can install apps. This link should help you if you need guidance with this. on-premises-deployments-for-apps/ 6

8 Installation using Sandboxed Solutions If you want to keep using the Sandboxed solutions for our web parts, follow the steps on this section. Note that this works with SharePoint On-Premises and SharePoint Online. 1. Download file BTTiles_3.0.0.X.zip to your computer and extract the content. 2. In SharePoint, click the gear icon to open the settings menu. 3. Click site settings 4. Click solutions, under Web Designer Galleries. You will need to activate the Publishing features to see the solutions link. If you don t have permissions ask an Admin to do that for you. 5. On the tool bar click Upload Solution to select the file BTTiles_3.0.0.X.wsp included in this package 6. Once it s finished click on Activate and wait for the page to refresh. 7

9 Updating the Web Part Updating for apps 1. Download file BTTiles_3.0.0.X.zip to your computer and extract the content. 2. In your SharePoint Admin Center, choose apps in the left-side pane. (if you can t find the apps button, look for add-ins) 3. On this new page, choose the app catalog option. You will be redirected to the corresponding site collection 4. Now on the catalog site collection, click the gear icon button in the suite bar and select Site Contents. 5. On the site contents page select Apps for SharePoint. 6. Now press the upload button and select the.app file included in this package. 7. You may be prompted to replace the existing file on the library. Click yes. Once the upload completes, go to the site contents on your site collection. 8. Press the ellipsis button on the Tiles app and press About. 9. On this page you should see that there is a new version available. Press the Get It button. 10. Now you must wait for the app to finish updating on the page. 11. Once the update is finished click on the app. Now click on Update Available. 12. The page will begin re-deploying the web part into your site. Once it s finished you will have the new version on you site collection. To update the app on other site collections, simply repeat steps 8 through 12 8

10 Updating for Sandbox Solutions 1. Download file BTTiles_3.0.0.X.zip to your computer and extract the content. 2. In SharePoint, click the gear icon to open the settings menu. 3. Click site settings 4. Click solutions, under Web Designer Galleries. You will need to activate the Publishing features to see the solutions link. If you don t have permissions ask an Admin to do that for you. 5. Select the already existing Tiles solution and deactivate it. (IF YOU RE MIGRATING FROM VERSION 2.X.X DO NOT DO THIS OR THE NEXT STEP!) 6. Once it finishes deactivating, delete the solution from the gallery. 7. On the tool bar click Upload Solution to select the file BTTiles_3.0.0.X.wsp included in this package 8. Once it s finished click on Activate and wait for the page to refresh. 9

11 Configuration Creating the Tiles list 1. Click on the gear icon to open the settings menu. 2. Click Add an app. 3. On the search box type Tiles. Look for the BindTuning Tiles list and select it 4. Pick a name and click create. 5. Click on the app you just created to open the list. 6. You will use the Tiles list to format your tiles styles. Copy the list URL (as shown in the image below) - you will use it later while adding the BindTuning Tiles to your site. Copy the list URL Adding the BindTuning Tiles to your site 1. Open the site where you want the tiles to be added. 2. Click edit to edit the page. 3. On the tool bar click Insert > Web Part. 4. On the categories list select the BindTuning Add-in. 5. Select the BindTuning Tiles Web Part and click add. 6. Select the Cog wheel icon on the web part title (as shown in the image below). 10

12 Note that accessing the web part SharePoint settings can make the web part disappear during editing. To resolve this, save the page and go back into edit mode. Select the Web Part Edit the Tiles settings 7. Paste the URL you have copied on step 6 (Creating the Tiles list) in the List URL field. Note: The rest of the fields are explained in the Field Descriptions section. 8. After defining all settings, click the save button and wait for the page to refresh. 11

13 9. Save the page and the web part will be ready to go. Web Part Settings List Url The url to a Tiles App. This is where all created tiles will be stored and read from. Without this value, the web part cannot function and an error message will be deployed. It is recommended that you use relative paths for this field. So instead of using a url like you should use something like /sites/home/lists/tiles. This will ensure that the web part will work regardless of how you re accessing the site. For some versions of SharePoint, you may get the following error: Object doesn't support property or method 'getlist'. This error can be fixed by adding a question mark followed by the name of the list at the end of the url. e.g. /Lists/Tiles/ would become /Lists/Tiles/?Tiles List It is also recommended to try this fix when the web part does not work and you ve validated that the url is valid. Grid Size All tiles are be displayed in a grid. This option defines the sizing of said grid. Bigger grid sizes will result in bigger tiles whereas smaller grids have smaller tiles. Ranges from Extra Tiny to Large sizes. Tile Spacing Set the spacing in pixels between tiles. Zero will create a layout without spaces between tiles. Tiles Alignment 12

14 Sets how tiles will align. You can choose a Grid alignment, if you want the tiles to be displayed in a perfect alignment (Windows style), or you can pick a Wall alignment, if you want the tiles to be displayed according to their content proportions (Pinterest style). Grid Size Activating this option prevents tiles from making small adjustments to their size in order to fill all horizontal space available. By default, tiles will always attempt to fill as much horizontal space as possible inside the web part container by adjusting their position and size. 13

15 Managing Content Adding a new tile 1. Open the site with the tiles web part. 2. Click edit to edit the page. 3. On the web part title bar, click the [+] button. 4. Fill out the form that will pop up. Note: All the fields are explained in the Field Descriptions section. Adding styles 5. After setting all fields click Save or Save and create another. Note: Pressing Save and create another will keep the form open so you can add more tiles with ease 14

16 Creating a video tile 1. Repeat the process of adding a new tile 2. Set the Tile Type to Video. 3. In the Connect to a Video section, paste the video URL in the URL field. Note: The video tile only supports YouTube videos. 4. In the title field you should write the name of the video. This will be the title of the modal that will open with the video embedded. 5. Fill out the remaining fields Adding a play icon to a video tile 6. Click Save or Save and create another. Note: Pressing Save and create another will keep the form open so you can add more tiles with ease 15

17 Creating a twitter tile You can set your tiles to display tweets. To do so you will need to create a twitter widget. Creating the widget 1. Go to and sign in as normal. 2. Click on your portrait in the top-right corner of the page and select "Settings". 3. On the left hand side, select "Widgets". 4. On this page, create a new widget based on the intended twitter feed. The information retrieved by the tile is the same as the one present on the preview window. 5. Now look at the URL in your web browser, you will see a long number as shown in the image below. Copy this number to use later. Copying widget ID Creating the tile 1. Repeat the process of adding a new tile 2. Set Tile Type do Twitter Feed 3. Paste the Widget ID in the Widget ID field. 4. Fill out the remaining fields as explained in the Field Descriptions section. 16

18 Creating a twitter tile 5. Click Save or Save and create another. Note: Pressing Save and create another will keep the form open so you can add more tiles with ease 17

19 Creating a weather tile 1. Repeat the process of adding a new tile 2. Set the Tile Type to Weather. 3. In the Weather Tile Settings, write a location in the URL field. This can be a city, state, country or all of them. The tile will try to find the best match as well as it can. 4. Fill out the remaining fields. 5. Click Save or Save and create another. Note: Pressing Save and create another will keep the form open so you can add more tiles with ease Creating a weather tile 18

20 Creating a smart tile You can display content in your tile from an external data source. To do so you will need to create a CAML query and set up your tile for that purpose. Creating the CAML query 1. Start by creating your CAML query. You can use 3 rd party free software for creating the query like If you re using SharePoint 2013, install the U2U CAML Query Builder for SharePoint 2013 (Standalone Edition). <view> <Query> <Where> <And> <Contains> <FieldRef Name="Title"/> <Value Type="Text">BindTuning</Value> </Contains> </And> </Where> <OrderBy> <FieldRef Name="Title" Ascending="True" /> </OrderBy> </Query> </view> Building a query 2. Copy the query - you will use it later while setting the Smart Tile Query field. Setting the Tile to read external data sources and adding styles 1. Repeat the steps for adding a new tile. 2. Set action to Smart Tile. 3. Fill out the fields in the Connect to a Data Source section. a. Data Source List URL: The URL of the site where the source list is hosted b. Data Source List Name: The name of the list to retrieve data from c. Query: Paste the query you created earlier in this field; 19

21 4. You can use a field from the queried list to add an image or color to the tile background. Simply choose the image option in the background field and place the column name in brackets to retrieve the query field: {{FIELD_NAME}} (as shown in the image below). 5. In the Tile Caption fields you can add text from a column in the query. Place the column name in brackets to retrieve each query field: {{FIELD_NAME}} (as shown in the image below). Example: Adding a background image and caption text to a Smart Tile using values from a query 6. Fill out the remaining fields 7. Click Save or Save and create another. Note: Pressing Save and create another will keep the form open so you can add more tiles with ease. 20

22 Editing a tile 1. Open the site with the tiles web part. 2. Click edit to edit the page. 3. Place the mouse cursor over the tile you would like to edit. The edit button should appear on the top-right corner. 4. Click the edit button on the tile. 5. Fill out the form that will pop up. Note: All the fields are explained in the Field Descriptions section. Adding styles 6. After setting all fields click Save Changes. 21

23 Deleting a tile 1. Open the site with the tiles web part. 2. Click edit to edit the page. 3. Place the mouse cursor over the tile you would like to edit. The delete button should appear on the bottom-right corner. 4. Click the delete button on the tile. 5. A message will appear requesting confirmation. 6. Press ok and the web part will refresh and the tile removed. Removing a tile 22

24 Field Descriptions Tile Shape Select the tile shape. Choose from small square, large square, horizontal rectangle or vertical rectangle. By default the tile shape will be a small square. Tile Order Defines what order tiles should be presented in. Tiles with lower order values are presented first. Tiles with the same value are ordered based on date of creation (older tiles first). Tile Status You can make a tile active (visible) or inactive (not visible) by checking and unchecking this option. Tile Type This defines what type of tile will be created. Different option appear based on this value. Available options include: No Action: A simple tile for displaying text and image. Can have front and back sides. Link: Opens the provided link when clicked on. Can have front and back sides. Document: Opens the provided document on a modal when clicked on. Can have front and back sides. Document Library: Opens the provided document library on a modal when clicked on. Can have front and back sides. Video: Opens the provided video on a modal when clicked on. Can have front and back sides. Smart Tile: Displays data from an external data source in a slider. Only has one side. Twitter Feed: Displays twitter content in a slider. Only has one side. Weather Tile: Displays weather forecast for the day or the week. Only has one side. Tile Settings (Front and Back) The fields in this section let you control the look and text content of the tile. The Front tile is displayed by default and the Back tile is displayed when the cursor hovers the tile or every few seconds. 23

25 Tile Background: Defines the color or image (when available) of the tile. When creating a smart tile, you can also type the column name of your query from where you want to retrieve data. Example: "{{Image}}" Text Color: Defines the color used by the text and icons of the tile. (weather and twitter tiles) Caption Content: Set the text of the tile in the text field. You can use the format buttons to define headings, alignment, weight, colors and to add icons to the text. When creating a Smart Tile, you can also type the column name of your query from where you want to retrieve data. Example: "{{TITLE}}" Caption Background: Defines a background to be used for each caption. Tiles have three captions, one for the top, one for the middle and another for the bottom part. Setup a link When available, this section allows you to set up a link that opens whenever the tile is clicked on. You can also decide whether a new window should be opened by ticking the checkbox on this section. Connect to your Document, Document Library and Video These fields allow you to define resources to be opened whenever the tile is clicked on. The resource will be displayed inside a pop up window. URL: The web address for the resource. Title: The title of the window. If none is provided, it will be the same as the URL; Connect to a Data Source These fields allow you to connect your tile to a list so you can present its content. Only available for smart tiles. Data Source List URL: The URL for the site where the source list is hosted. Data Source List Name: The name of the list where you want to retrieve the values from. Data Source Query: A CAML query used to retrieve the desired values from the list. This query should be contained inside a <view></view> tag. You can use the 3 rd party free software U2U CAML Query Builder to create queries faster. Twitter Tile Settings With these fields you can set your twitter tile to read from a twitter widget. 24

26 Widget ID: The id of the widget where the information is going to come from. Check the section Creating a twitter tile" to learn where to get this id. Number of Tweets: How many tweets should be displayed on the tile. Maximum is 10. Show Date: Whether to show the date when the tweet was posted. Show User: Whether to show the tweet poster Show Action Buttons: When checked, will display the retweet, share and favorite buttons. Weather Tile Settings Location: Where to read the forecast from. Can take the values of cities, states and countries. The format used is not strict but we recommend you use at least two identifiers. Example: Seattle, USA. Measurement: Whether to display the returned values in Celsius or Fahrenheit units. Forecast: Whether to show predictions for the day or the week. Flip Animation When tiles support a front and back sides, you can set what animation should be used to switch between the two. When none is selected, the back side will never be visible. Flip and Animation Interval (in seconds) If this value is set to 0, the tile will only flip whenever you place your cursor over it. If you define any other value, the tile will animate, revealing the back side or the next slide, every couple seconds. If no value is provided, the tile will animate every 5 seconds. 25

27 Markdown rules Formatting Entered Text Published text Bold This is how you **bold** text This is how you bold text. Italic This is how you *italicize* text This is how you italicize text. Headings # Heading level one (with space after #) ## Heading level two ### Heading level three Heading level one Heading level two Heading level three Note: six heading levels. Line Breaks For line breaks hit <Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines). Colors/Backgrounds # Colored heading one #f49000 ## Colored heading two #d7aa69 Colored text #856d4b Colored heading one Colored heading two Colored text Alignment Icons (uses FontAwesome) Caption Background # Applied to an ## Applied to an Applied to regular fa-cloud fa-cloud This is text and an 40, 20, 0.6)! 26