Tiles & Dials

<< Click to Display Table of Contents >>

Navigation:  »No topics above this level«

Tiles & Dials

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:

clip0064

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.

clip0065

 

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

clip0066

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

clip0067

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

clip0068

 

Web Part Page

Click on ‘Add web part’ and select ‘Crow Canyon Tiles’ or ‘Crow Canyon Dials’ in Apps folder as shown below

clip0069

 

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

clip0070

 

Configure Tiles & Dials App

Tiles App

Edit a page and Edit ‘Crow Canyon Tiles web part’

clip0071

Configure Height and Width in ‘Appearance’ section and Other properties in ‘Miscellaneous’ section as shown below

Appearance:

clip0072

 

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.

clip0073

clip0074

clip0075

clip0076

clip0077

clip0078

 

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.

clip0079

clip0080

 

3.We can also the change the spacing between cells and font style, size of the header as shown below.

clip0081

4.We can change the size of the tile (cell height and width) as shown below.

clip0082

clip0083

 

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.

clip0084

clip0085

clip0086

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’

clip0087

 

Configure Height and Width in ‘Appearance’ section and Other properties in ‘Miscellaneous’ section as shown below

Appearance:

clip0088

 

Miscellaneous:

clip0089

 

clip0090

clip0091

 

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.