Microsoft Sharepoint Web Parts

Tiles�SharePoint Web Part

The Tiles Web Part allows to easily create a compelling homepage or navigation without having to set up a multitude of web parts and/or create custom page layouts. It also includes a collection of specialized tiles to display list items, weather information, Twitter and RSS feeds and videos. It arranges the tiles in a freely designable responsive grid containing tiles of varying size and functionality. The Web Part can be used with SharePoint 2010, SharePoint 2013, SharePoint 2016, SharePoint 2019 and SharePoint SE (both 'classic' and 'modern' pages). The Tiles Web Part lets you: define the default tile dimension (typically square) define a custom color palette to adhere to your corporate branding CSS styles to customize the look and feel Tile security trimming by Sharepoint groups or AD groups define personal tiles (each user can configure his/her own tiles) define a page backdrop (color or image) and optionally disable the Quick Launch menu add tiles of different functionality: - Text or Image only - linked tiles with text/icon/image background - display list items ("top news", "most recent blog posts", "new documents" etc.) - rotate content (text and/or images) - random information chosen from a Sharepoint List or Library (text and/or image) - the current date - World clock - Facebook Timeline - Google Map - KPI information - News - PowerPB dashboards - RSS Feed - Stock Quotes - Twitter tweets - Weather information - Web Parts - Video (embedded or popup) - and even the Daily Dilbert Product Price����� Tiles�Web Part for�SP 2010 30 Day Evaluation Version Tiles�Web Part for SP 2013 30 Day Evaluation Version� Tiles Web Part for SP 2016 30 Day Evaluation Version� Tiles Web Part for SP 2019 30 Day Evaluation Version� Tiles�Web Part License Key per WFE Server License� USD 450.00 Web Part Installation Instructions Deployment Instructions for SP 2019 and SE "modern" pages

Installation Instructions:

1. download the Web Part Installation Instructions (PDF file, see above)�
   
2. either install the web part manually or deploy the feature to your server/farm as described in the instructions.
   
3. Navigate to a page where you would like to place the webpart and choose "Site Actions/Edit Page"
4. Add the web part to the appropriate zone. The web part is listed in the "Amrein Engineering" web part gallery section
5. Configure the following Web Part properties in the Web Part "Miscellaneous" pane section as needed:

Page Backdrop: enter the optional URL of an image or the color to be applied to the current page. Examples: � ��� � � ���� � Quick Launch Area: either disable or enable the Sharepoint Quick Launch menu on the current page. Tile Width: enter the width of the basic (default) tile in pixels (default:125px) Tile Height: enter the�height of the basic (default) tile in pixels (default:125px) Tile Gap: enter the gap between tiles in pixels (default:8px). Set to "0" to not use any gap. Tile Header: enter the optional text to be displayed at the top of the web part Tile CSS Style: enter the optional CSS styles to be applied as default values for each tile. Example: color:white (defaults the tile text content to white) Tile Color Palette: enter the optional name of the color palette to be applied in order to enforce your corporate design. Enable Tile editing: displays the "Add new tile" and "Edit Tiles" buttons during the design process (visible to authors�only). Show My Tiles only: allows to create personal tiles (eg. only tiles added by the current user are displayed). Options: enter further options as needed (see separate documentation). License Key: enter your Product License Key (as supplied after purchase of the "Tiles Web Part" license key). Leave this field empty if you are using the free 30 day evaluation version.

You now can proceed to add tiles by click�ng the "Add new Tile" button. Existing tiles can be edited by clicking the red button in the lower left corner of each tile: Title: enter the title of the tile. Description: either the optional description (for information purposes only). Tile Type: choose the tile type: Text �2.1 Text The "Text" tile is the default tile type and lets you create tiles consisting of: Text only: You can enter plain text and also include HTML tags as needed. The second tile to the right illustrates the available default font sizes and uses the below setting: Content:<h1>Welcome to our Project Homepage</h1><h2>Welcome to our Project Homepage</h2><h3>Welcome to our Project Homepage</h3>This is regular body text Text linked to a target page or a document: The first tile to the right�is linked to a SharePoint document library and thus automatically displays the corresponding icon. You can also embed the "[count]" placeholder in the "Content" setting to display the number of items in the tile. This example uses the below settings: Title:HR DocumentsURL:http://somedomain/Shared%20Documents/Forms/AllItems.aspx Text with a background image: This example uses the below settings: Content:<h1 style="text-align:center">Book your PTO</h1>Background:http://somedomain/Pictures/Island.jpg/cover Options: This example uses the below settings: Content:<p style="text-align:center"><img src="{photo}" style="border-radius:50%" /><br>Good {timeofday}, {firstname}<br/>Welcome back!</p>Supported placeholders:{username}{date:format}{timeofday}{firstname}{lastname}{photo}[sitelogo][title]{Dilbert} Icon �2.2 Icon The "Icon" tile type lets you create tiles consisting of an icon and an optional caption: Font Awesome Icons: You can choose from several hundreds of "Font Awesome" icons as listed here: https://fontawesome.com/v4.7.0/icons/. Please enter the name of the selected icon, prefixed by "fa-". This example uses the below settings: Title:Upcoming EventsContent:fa-calendar Google Material Icons: You alternatively can choose from several hundreds of "Google Material Icons"as listed here: https://material.io/icons/ Please enter the name of the selected icon, prefixed by "ma-". This example uses the below settings: Title:ProjectsContent:ma-explore/size=48 No Icon: You alternatively can choose to not display an icon, but rather specify a background color or a backdrop image by specifying "none" as the icon name. This example uses the below settings: Title:SUBMIT HELPDESK TICKETContent:none Optional Parameters: You can optionally override the icon size and icon color by appending the "/color" and/or "/size" parameters as follows: Title:Welcome AddressContent:fa-youtube-play/color=red/size=42 List Items �2.3 List Items The "List Items" tile type lets you create tiles displaying the items of a SharePoint list or library. You can select a specific set of items by referring to the corresponding list view. This tile uses predefined item templates which can be customized as illustrated by the second example below. Document Library Example: This example displays the documents contained in the "Documents" library, referring to the "Most Recent" list view: Title:Top DocumentsURL:http://somedomain/Shared%20Documents/Forms/Most Recent.aspxThe second example also uses the "/showtype" parameter to display the file icons: Content:/showtype Calendar Example: This example displays the events contained in the "Calendar" list, referring to the "Current Events" calendar view: Title:Upcoming EventsContent:{datebox}<p><a style='color:inherit' {link}{title}</a><br>{location} | {time}</p>URL:http://somedomain/Lists/Calendar/MyItems.aspx Links Example: This example displays the events contained in the "MenuLinks" Links list, which contains a column named "Icon" holding a specific icon for each list item: Title:QUICK LINKSContent:leave emptyURL:http://somedomain/Lists/MenuLinks.aspx Optional Parameters: You can specify additional options by appending the below parameters to the "Content" setting: Max. number of items displayed:/max=10Message displayed if no items are available:/none=Currently no upcoming events Single List Item �2.4 Single List Item The "Single List Item" tile displays the content of a specific list item as illustrated by the below examples: Simple Example: This example displays the first item as selected by the "Today" view of the "Cafeteria" list. Appending the "/comments" parameter enables commenting for the item. Title:Today's MenuContent:{Lunch}/commentsURL:http://somedomain/Lists/Cafeteria/Today.aspx Announcement: This tile is linked to a SharePoint Announcements list and displays the item based on the below custom item template: Content:{Attachments/top}<p style='font-size:16px;line-height:21px;margin-bottom:2px'>{Title}</p><p style='color:#eee;font-size:11px;margin-bottom:2px'>{Created/D}</p><p style='font-size:13px;line-height:16px'>{Body/more}</p>/commentsURL:http://somedomain/Lists/News/TopItem.aspx Blog Post: This example displays the most recent blog post of the blog specified by the URL: Title:Our BlogURL:http://somedomain/CEOBlog/Lists/Posts/AllPosts.aspx Carousel �2.5 Carousel The "Carousel" tile rotates the content of a Sharepoint Picture Library, Blog or Announcements list item as illustrated by the below examples. Banner Rotator: This example displays the images stored in the Sharepoint Picture Library pointed at via the "URL" setting. It automatically rotates every 9 seconds (default setting) and the images can optionally be linked when adding a column named "URL" to the picture library. Also the carousel automatically displays the image "Title" and "Description" if present. URL:http://somedomain/Banners/Forms/AllItems.aspx News Carousel: This example displays the news items stored in the Sharepoint Announcements List pointed at via the "URL" setting. It automatically rotates every 9 seconds (default setting) and the news items are linked to the List detail view page. The carousel automatically displays the annoucement "Title" and "Body" URL:http://somedomain/Lists/News/Top5.aspx Blog Post: This example displays the most recent blog post of the blog specified by the URL. ALso, the text displayed by the tile is truncated to a maximum of 40 words via the "/more=nn" parameter:  Content:/more=40URL:http://somedomain/CEOBlog/Lists/Posts/AllPosts.aspx Options: you can specify the below options via the web part's "Options" setting or into the Tile's "Content" setting display navigation bullets:sliderbullets=1slider speed in seconds (entering"0" disables autoplay):sliderspeed=10display slider navigation arrows:slidernavigation=1Separate multiple options with the "|" pipe characeter:sliderbullets=1|slidernavigation=1 Image �2.6 Image The "Image" tile displays the image assigned to the tile's "Background" setting. It reveals the tile "Title" and tile "Content" when hovering over the tile similar to the SharePoint Promoted Links. The tile can optionally be linked via the tile's "URL" setting. Example: This example displays an image from the"Pictures" Sharepoint picture library. The tile also displays the tile "Title" and "Content" (if present). Title:IT Document Library Content:Cras mauris purus, tincidunt quis facilisis dapibus, cursus eu risus. Lorem ipsum dolor sit amet Background:http://somedomain/Pictures/somePicture.jpg Random Image �2.7 Random Image The "Random Image" tile displays a random image selected from the Sharepoint Picture Library specified in the "URL" setting. The image can optionally be linked when adding a column named "URL" to the picture library. Example: This example displays a randomly selected image from the"Pictures" Sharepoint picture library. Also, the "/daily" parameter is added to the "Content" setting to display an new picture every day (as opposed to a new picture on each page request). The tile also displays the image "Title" (if present). Content:/dailyURL:http://somedomain/Pictures/Forms/AllItems.aspx Random List Item �2.8 Random List Item The "Random List Item" tile displays a random list item selected from the Sharepoint List or Library specified in the "URL" setting. The tile uses the item template entered into the "Content" setting to render the item. The list columns are referenced by entering the column names enclosed in curly braces. "Quote of the Day" example: This example displays the top item from the"Quote of the Day" Sharepoint list. Content:<div style="height:30pt;float:left;font:60pt georgia;margin-top:-10px">�</div><p style="margin-top:5px;line-height:14px">{Quote}</p><p style="text-align:right">{QuoteAuthor}</p></tr></table>URL:http://somedomain/Lists/Quote of the Day/AllItems.aspx "Employee Spotlight" example: This example displays a randomly selected item from the"Employees" Sharepoint list. Also, the "/daily" parameter is added to the "Content" setting to display a different list item every day (as opposed to a different list item on each page request). Title:EMPLOYEE SPOTLIGHTContent:<table><tr><td>{Attachments/round}</td><td>{First Name} {Last Name}<br>{Department}<br>{Office}</td></tr></table>/dailyURL:http://somedomain/Lists/Employees/AllItems.aspx Current Date �2.9 Current Date The "Current Date" tile displays the current date and can optionally be linked to a target page (as eg. a Sharepoint calendar list): This example uses the below settings: URL:http://somedomain/Lists/Calendar/calendar.aspx Digital Clock �2.10 Digital Clock The "Digital Clock" tile displays the current local time (and date) or the time of the specified time zone as illustrated by the below examples. Local time: This example displays the local time . Title:Local Time Military time including the date: This example displays the time in military format and also includes an icon and the current date in the title area: Title[ma-alarm] [date]Content/military World Clock: These two examples display the time in the specified time zone set via the "timezone=nn" (specifying the UTL offset in hours) parameter: Title:Neww YorkContent:timezone=-5 Analog Clock: This example display the local time as an analog clock Content:/analog Facebook �2.11 Facebook The "Facebook" tile displays the selected Facebook Timeline by placing the name of the timeline into the tile's "Content" setting. Example: This example displays the "mssharepoint" Facebook timeline. Content:mssharepoint Google Map �2.12 Google Map The "Google Map" tile displays the map of the specified street address (as entered into the "Content" setting). Example: Content:Rohrerstrasse 100, 5000 Aarau KPI �2.13 KPI The "KPI" tile displays the selected KPI indicator (as defined in the AE KPI List). It requires the AE KPI web part to be installed in the farm. Number of specific list items: This example displays the number of active posts in the "Classifieds" Sharepoint list and links to the "Classifieds" page. Content:ClassifiedsURL:http://somedomain/SitePages/Classifieds.aspx Number of open tasks: This example displays the number of open tasks in the "Tasks" Sharepoint list: Content:Open Project Tasks Number of pending tasks: This example displays the number of pending tasks in the "Tasks" Sharepoint list using the "/gauge" displays option to display the KPI as a gauge: Content:Pending Project Tasks/gauge News �2.14 News The "News" tile displays the top items from the selected Announcements list (as defined in the tile's "URL" setting). Example: This example displays the News items from the selected "News" SharePoint announcements list and displays the 3 top list items (set via the "/count=nn" parameter). The optional image is defined as a list item attachment. Content:/count=3URL:http://domain/Lists/News/AllItems.aspx Parameters: you can specify the below optional parameters (to be entered into the "Content" setting): Number of items to be displayed:/count=nnMax. number of words displayed:/more=nn RSS Feed �2.15 RSS Feed The "RSS Feed" tile displays the selected RSS Feed (as defined in the "URL" setting). Example: This example displays the "ABC Headline News" RSS feed and displays the 2 top feed items (set via the "/count=nn" parameter). Content:/count=2URL:http://feeds.abcnews.com/abcnews/internationalheadlines     Parameters: you can specify the below optional parameters (to be entered into the "Content" setting): Number of items to be displayed:/count=nnMax. number of words displayed:/more=nn Stock Quote �2.16 Stock Quote The "Stock Quote" tile displays the selected stock index. Example: This example displays the Dow Jones index and also links the tile to the Yahoo Finance web site. PLease note that you enter the stock symbol, optionally followed by its display name (separated by a pipe character). Content:DJI|Dow JonesURL:https://finance.yahoo.com/ Currency Rates: This example displays the currency rate of the Japanase Yen (vs. the US$). Please note that you enter the stock symbol, optionally followed by its display name (separated by a pipe character). Content:USDJPY=X|Yen vs.USD Twitter �2.17 Twitter The "Twitter" tile displays the selected Twitter feed. Most recent tweets only: This example displays the most recent @POTUS tweet. The number of tweets to display is specified by appending "/max=nn" to the Twitter ID in the "Content" setting. Content:<a class="twitter-timeline" href="https://twitter.com/xxx?ref_src=twsrc%5Etfw">Tweets by X</a>/max=1 You can get the Twitter code to be entered into the "Content" setting by opening https://publish.twitter.com and then creating your widget as follows: - enter the Twitter handle to be used (as eg. @POTUS) - select the "Embedded TImeline" option further below on that page - press the blue "Copy Code" button - paste the code into the "Content" setting. All tweets: This example displays the "Sharepoint" twitter feed. By default, the number of tweets displayed is not limited. Content:940881541898567681 Weather �2.19 Weather The "Weather" tile displays the current weather for the selected location. Example: This example displays the current weather for Los Angeles by entering the weather location code into the "Content" setting. You can look up the weather location code here: Location Codes Lookup Tool Content:USCA0638 Celsius setting: This example displays the current weather in degrees Celsius by appending "/celsius" to the weather location code in the "Content" setting. Content:CAXX0301/celsius Backdrop Image: This example uses a backdrop image as opposed to a background color: Content:USNY0996 Background:http://somedomain/someLibrary/NewYork.jpg Forecast setting: This example displays the current weather in degrees Celsius by appending "/days=xx" (where "xx" is is the number of days) to the weather location code in the "Content" setting. Content:USNY0996/days=3 User �2.18 User The "User" tile displays information of a specific SharePoint user. Example: This example selects the user "somedomain\ronald"and displays the user's - photo - name - title - work phone - and e-mail address. Title:Our Team ManagerContent:somedomain\ronald Video �2.20 Video The "Video" tile type lets you embed an MP4 or YouTube video. Embedded YouTube video: This example embeds a YouTube video in the tile. You can get the video URL by�clicking the "Share" button on YouTube and then copying the URL form the box below the button. Target:EmbeddedURL:https://youtu.be/_9fGXZ4ocp4 Link to YouTube video: This example links to a YouTube video and automatically displays the video cover image. The video is opened in a Sharepoint dialog window. You can get the video URL by�clicking the "Share" button on YouTube and then copying the URL form the box below the button. Target:DialogURL:https://youtu.be/wnr2OINJzho Embedded MP4 video: This example embeds an MP4 video in the tile. Target:In PlaceURL:http://somedomain/Videos/testvideo.mp4 Linking to videos using the "Icon" tile: These example embed a YouTube link and an MP4 video link in the tiles. Title:Youtube LinkContent:fa-youtube-playTarget:DialogURL:https://youtu.be/h3gjm7ZDtYE Clone Open the Tiles Configuration Manual Content: enter the�tile content (depending on the tile type). Background: either enter the tile background color or the URL of a background image. Enter color values in one of the below formats: HTML color name (as eg. "orange", "red", "tomato") RGB hex color values (as eg. "#FFCC00", "#9cc") RGBA values including transparency (as eg. "rgba(127,127,127,0.5)") URL: enter the tile URL (depending on the tile type). Visibility: enter the optional Sharepoint or AD group(s) for audience targeting the tile. Size: choose the tile size or enter a custom size. The below common tile sizes are predefined: Square (tile sized as defined in the above default tilw width/height settings) Wide (twice the width) Big (twice the width and height) 3x2 (3 times the width and twice the height) Tiny (half the size and width) Fullwidth (spans the maximum width allowed by the web part zone) You can also specify a custom size by entering the width x height as illustrated by the below examples: 2x3 1x0.5 3x3 Sort Order: enter the ordinal number dictating the sort order (in case you want to re-position the tile) Target: choose the target if the tile is linked to some content: In Place (opens the link in the same browser window) New Tab (opens the link in a new browser tab) Dialog (opens the link in a Sharepoint dialog window) Embedded (opens the link embedded in the tile) CSS: enter your custom CSS tile style(s) if needed.