The Tiles & Dials App allows visualizing counts of list items as Tiles using ‘Crow Canyon Tiles’ and as Arcs using ‘Crow Canyon Dials’.
Product Features
•Shows count of list items with different status on SharePoint pages.
•Allows adding any number of Tiles and Dials App parts in Wiki Page/Web part page.
•Configure each tile with a different view in a custom list, based on this configuration count of list items gets displayed in Tile.
•Configure each arc sector of Arc with a different view in a custom list, based on this configuration count of list items gets displayed in Arc.
Example
For a "Requests" list that contains many items with different status values, this App can show the count based on status. Count of Requests with ‘Unassigned’, ‘My Assigned’ and ‘Overdue’ status as different tiles as shown below:
Similarly, this App can show the number of Tasks with statuses of ‘Overdue’, ‘Active’ and ‘Completed’ as different sectors in an Arc, as shown below.
Configure Tiles & Dials App
Configure Tiles & Dials App by following these steps:
1.Create a list that will contain the data to specify what to show in Tiles & Dials
2.Add Tiles & Dials App to the page (Wiki page/Web Part page)
3.Configure Tiles & Dials App
Create a custom list to configure Tiles & Dials App
To configure Tiles & Dials. there should be a custom list that specifies each Tile/Arc Sector referring to a view in the list along with Header, Body and Font color codes
List for Tiles
•Fields in Tiles App part custom list (In our example let us assume ‘Home Tiles’ as List Name)
Internal Name |
Field Type |
Default Value |
Required |
Display Name (Create Field with internal name and save, later edit it and change its name) |
Title |
Single Line Text |
- |
Yes |
Header Text |
Title2 |
Single Line Text |
- |
No |
Body Text |
NavigationURL2 |
Single Line Text |
- |
No |
Header Navigation URL |
NavigationURL |
Single Line Text |
- |
No |
Body Navigation URL |
OpList |
Single Line Text |
- |
No |
OpList |
OpView |
Single Line Text |
- |
No |
OpView |
TileHeaderColor |
Single Line Text |
- |
No |
Header Font Color |
TileHeaderBackgroundColor |
Single Line Text |
- |
No |
Header Background color |
TileColor |
Single Line Text |
- |
No |
Body Font Color |
TileBackgroundColor |
Single Line Text |
- |
No |
Body Background Color |
•For example, Create an item in the ‘Home Tiles’ list
Note: You can get color codes from - http://www.w3schools.com/colors/colors_picker.asp
List for Dials
•Fields in Dials App part custom list (In our example let us assume ‘Home Arcs’ as List Name)
Internal Name |
Field Type |
Default Value |
Required |
Display Name (Create Field with internal name and save, later edit it and change its name) |
Title |
Single Line Text |
- |
Yes |
Title |
Color |
Single Line Text |
- |
No |
Color |
ListName |
Single Line Text |
- |
No |
List Name |
ViewName |
Single Line Text |
- |
No |
View Name |
SortOrder |
Number |
- |
No |
Sort Order |
ArcName |
Single Line Text |
- |
No |
Arc Name |
•For example, Create an item in the ‘Home Arcs’ list
Note: It is possible to configure any number of arcs in a single custom list by providing unique Arc Names.
Add Tiles & Dials App to a page (Wiki page or Web part page)
‘Edit’ Page by clicking ‘Page’ on top left corner of a page and select ‘Edit page’ as shown below
Web Part Page
Click on ‘Add web part’ and select ‘Crow Canyon Tiles’ or ‘Crow Canyon Dials’ in Apps folder as shown below
Wiki Page
Click on ‘Insert’ on Ribbon and select ‘App part’ and choose ‘Crow Canyon Tiles’ or ‘Crow Canyon Dials’ in App folder as shown below
Configure Tiles & Dials App
Tiles App
•Edit a page and Edit ‘Crow Canyon Tiles web part’
•Configure Height and Width in ‘Appearance’ section and Other properties in ‘Miscellaneous’ section as shown below
Appearance:
Miscellaneous:
1.We can apply Font style as bold or normal and we can also set the size of the text in the body as shown below.
|
|
|
|
2.We can also change the width of the cell, border style and color of the border.
We can apply all types of border styles. For example dotted, dashed, solid, double, groove, ridge, inset, outset, hidden.
We can apply any types of color for the border.
|
|
3.We can also the change the spacing between cells and font style, size of the header as shown below.
4.We can change the size of the tile (cell height and width) as shown below.
|
|
5.If we have configured more than 3 items in the “Home Tiles” custom list, then we have to change the “tiles grid columns count” in web part to the number of items in the list to show all items as tiles.
|
|
Note: Tiles displays count of list items based on Configurations in Custom list and Appearance like Height, Width and Borders based on Configurations in web part properties.
Dials App
•Edit a page and Edit ‘Crow Canyon Dials app part’
•Configure Height and Width in ‘Appearance’ section and Other properties in ‘Miscellaneous’ section as shown below
Appearance:
Miscellaneous:
|
|
Note: Dials displays count of list items based on Configurations in Custom list and Appearance like Height, Width and Borders based on Configurations in web part properties.