Creating Tiles For Home Page With Rich Looks

 Here, you will learn how to create home page tiles with contents for home page, like the below sample. 

Features Included

1. Displays maximum of 7 tiles on a page without left navigation pane and a maximum of 6 tiles with the left navigation pane.
   
2. Complete details will be shown when the pane is rolled over.
   
3. Data for the tiles will be picked from the list content type.
   
4. Displays only important details like “Title”, “Short Description” and “Redirection Link”.
   
5. Background images can be configured through the list.
   
6. The tile size is fixed for a better view, which can be altered in the source code if needed.
   
7. Uses JSOM to retrieve the data automatically.

Notes

1. The background image should be in the dimension of 160x160 for better view.
   
2. Remove the extra list items if the page gets expanded more than 100 percent width horizontally.
   
3. Change the colors and font properties in the source code, in case it's needed.

Steps to create the Tiles Webpart using JavaScript

1. Create a custom list in the name of “TileData” and add the fields like below-
   
   The name “TileData” is hard coded in the source code to retrieve the data from the list (In my case, the list name is”TileData”).
   You can change the list name in the source code if you want to implement it on more than one page, by creating the lists with different names
   
   
   
   
2. Once the list is created, add some new details to populate it.
   
   
   
   
3. Once the list is populated with the data, you are ready to code the “TileData” list, to get the data and display it on the desired page.
   
   
4. Add the Content editor/ Script editor Webpart to place out SP script, to get the data from “TileData” list.
   
   
5. Place the attached code in the script editor/content editor source and save the page. (Highlighted code areas are needed to be configured as per your requirement. Change the list name in the source code if needed).
   
   After configuring the list name, save the page.
   
   
6. If everything is configured as mentioned, you will get the same tiles view with rich look, that is shown in "figure 1”, but with your own pictures.
   
   
7. In case it didn’t work, please look into the console window and check the errors.

Hope this works for everyone. Please feel free to reach me in case of any issue.