Tuesday, September 10, 2013

Example: Custom UI Style Tiles with Drag and Drop SharePoint 2013


Yep, another App solution with Custom Style, looks like a lot of people like this type of “Tutti Frutti” Look and feel “i am not talking the RTL TV show from the 1990”, so i gave a try with the Out of the Box SharePoint Solutions and create a example on how we can also create our Tiles with Modern UI Style using SharePoint Apps with SharePoint-Hosting and without a lot of code.


After some research in Out of the Box SP Features and 2 hours of code made a simple Tiles solution with Drag and drop and edit option using custom List a support with Jquery and PropertyBags.

This example only show how you can use Lists and Jquery to create a more dynamic Tiles
If the Out of the Box List “Promoted Links” response your requirements, just use it. :)

PS: If you like to develop, can recommend to make some research in the following site http://www.drewgreenwell.com/projects/metrojs, has a very interresting plugin for tiles.

Final result of my custom Solution:


Out of the Box SharePoint Tiles


The best way to start is to understand how SharePoint Out of the Box is using the Tiles in SharePoint, using the List Template “Promoted Links”, here a example.

When you create a SharePoint Site, you are able to see the different options of the Tiles and how behaves.



To create a custom Row of Tile, you can select the option “Site Settings > Add a app > Promoted Links”.


From this List “Promoted Links” you will have a list of options that i include in my custom List to support my App solution to give more option UX and flexibility in the Page .


This option will provide entries where you can define the Out of the Box SharePoint Tiles, that can be use in the SharePoint Page as Web Part.

Here a list of some custom develop and customization about this topic:


Custom UI Style Tiles


This solution was created to response the following requirements:
  • Rearrange Tiles without use access List Views
  • Use List to support Tiles
  • Edit Option in Tiles
  • Define the Colors (Style)
  • Define Hide Tile option
  • Example solution to be shared


This solution build with Visual studio 2012, using the app Template and supported by the Main Folder/Templates

Pages
  • Default.aspx
  • TilesColumns.aspx
Content
  • App.css
  • jquery-ui.css
Scripts
  • app.js
  • jquery-ui.js
Images
  • *.png
List Item Template
  • Tiles
    • Ribbon “TilesColumns”

Insert New Tile

To create a new Tile, should be select the option “Manage Tiles” and should be selected “New Item” as a normal List.

There you will have the same fields as Promoted Links and  some new Fields to support our Solution:
  • Title (Title of the Tile)
  • Background Image Location (Image in Background of the tile)
  • Description (Description of Tile)
  • Link location (where the tile should redirect)
  • Color (Style Colors)
  • Launch Behavior (same page, new page, Modal Dialog)
  • Size (Large or small Tile)
  • Hide (Appear or not in the Home Page)
  • Order (Does not appear and is Managed by the solution)



After this action the Tiles Should appear in the Home Page of our App Solution.

Manage Tiles Columns


The Tiles are Manage by columns, this columns are manage by PropertyBag stored in the Site, to manage the number of Columns was created a new Ribbon option in the List “Manage Tiles”.
To access the Custom List Tiles, should be selected the option “Manage Tiles”.



This Option will redirect you to List View with the supported Ribbons.
To access the new option should be selected the following option “Lists > Manage Tiles Columns”.


A modal Dialog List Pop Ups  and there you are able to manage the Columns that will appear in the Home Tiles Page.


After you select the option new Columns will be created where you can add the Tiles in different positions of the Page.

Edit Titles


This solution also provides the ability to edit the Tiles and is located in the Right side of the Title as “...”.



After this option is selected a Pop up appear associated with the fields associated with the Tile.


Design of the Tile


The following Picture defines the structure of the Tile and the Html associated in the design.


All this option can be accessed as a normal list, to Access this List, should be selected the option “Manage Tiles” in the HomePage.

It was used Visual Studio 2012 to create the Out of the Box Custom List template and associated Fields to response the requirements.



Visual Studio 2012 provides a visual Optio where you can add and Manage the Fields in the List Template.



The effects used in the Tiles was was made using jquery and example “Jquery Portlet example” for the Drag and Drop and up and down of the Tile Description.
Below is the code used to make the efects “not that much”....




The rest of the code is Client Side Call using SharePoint 2013 ECMAScript to mange the Order and the loading of the Tiles html Style.


The solution is shared in the following link Gallery.

Hope you like the Article,

Kind regards,
Andre Lage