Tiles

The Office 365 / SharePoint Online Tiles WebPart lets you create a highly flexible homepage with different Tiles, including a couple of WebParts.

Create feature-rich tiled interfaces, and integrate content from multiple data sources.

Configuration

Create a custom list first with the following Fields in Classic Mode:

Field NameField TypeValue
Title single line of textDefault field
Description single line of text
Tile Type ChoiceText
Icon
Banner Rotator
Current Date
Weather
Image
Welcome
KPI View Items Count
KPI View Field Sum
Digital Clock
Content Multi line of text / Plain text
Background single line of text
URL Link Hyperlink
Size ChoiceSquare
Wide
3x
Tiny
Fullwidth
Custom Size single line of text
Sort Order single line of text
Target ChoiceIn Place
New Tab
CSS Multi line of text / Plain text
Visibility Person or Group
Allow multiple selections: yes
SharePoint Users / Groups, Azure Active Directory Users and Groups (O365 only)

WebPart Properties
Property NameDescription
Page Backdrop enter the optional URL of an image or the color to be applied to the current page.
Hide Top nav bar either disable or enable the Sharepoint Top nav bar on the current page.
Hide Quick Launch Area either disable or enable the Sharepoint Quick Launch menu on the current page.
Site URL Specify the full URL to the Site, serving the List.
List Name Dropdown with all available Custom Lists. Choose your created list above.
View Name Dropdown with all available List views to consume. Disabled will use all the Items and enableds the Visibility function.
Optimal items per Row to have a row item count with a dynamic width (Used for same size tiles only!).
Tile Width will define the min width then. And the Tile Gap is a gap in % of the Tiles width.
An Event is checking the optimal size every 2000ms.
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)
Enable auto height on full width web parts Enable / Disable auto height on full widht web parts.
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: .btti_tile{color:white} (defaults the tile text content to white)
Using AAD Security Group Enable Azure Active directory Group security trimming
Enable Tile editing displays the “Add new” and “Edit Tiles” buttons during the design process.
options iconexternalcss=URL_TO_THE_FILE| will load an external CSS File (FONTS) for the Icon WebPart, instead the Font Awesome 4.7.0
Specials To have a Fullwidth Tile with a max Tile size: Size: Fullwidth, Custom Size: max9 (Set a max width of 9 tiles).
To have a Fullwidth Tile in grid: Size: Fullwidth, Custom Size: 1×1.
License
License Key Please enter your Paypal "Profile ID" or "Automatic payment ID" to unlock your WebPart. (Format: I-1A11SSBB2241)
Instruction
Document

Get a license

We offer different kinds of license

  • a PayPal subscription
  • a conservative invoice for a defined time period

  • Office 365

    Paypal

    Select your seats count (All active accounts having access to your tenant)
    If your seats count is over 2499, please request an Offer!

    SharePoint URL*
    Request an Offer

    Post a comment

    Andreas Tervo
    01/21/2020 14:38
    I've used the KPI View Field Sum tile type to show the sum of costs in a list. The total displays as 123456.78, for example. Is there a way to get it to show the comma, and possibly the currency symbol (e.g. dollar sign)?
    Raphael
    01/22/2020 11:45
    Hello Andreas Tervo,

    we have updated the Tiles Web Part, supporting Currency fields for the internal KPI View Field Sum Web Part.
    Please udpate your Tiles Web Part to the most recent version 1116.

    Kind regards,
    Raphael Bloch