MetroStyleGrid.png
In this example setup the following in SharePoint

List Name: Metro Tiles
Internal Field Names: Title (Text), Image (Hyperlink), Url (Hyperlink), OpenInNewWindow (Yes/No), StartColor (Text), EndColor (Text), Colspan (Text), Rowspan (Text)

Upload soby_spservice.js and soby.ui.components.js into the following location in SharePoint /Style%20Library/Assets/Scripts/

Create a page and add content editor webpart

Then You will need to include the following code into the content editor webpart
<div id='soby_MetroTilesDiv'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" src="/Style%20Library/Assets/Scripts/soby.spservice.js"></script>
<script language="javascript" src="/Style%20Library/Assets/Scripts/soby.ui.components.js"></script>
<script language="javascript">
var dataSourceBuilder = new soby_CamlBuilder("Metro Tiles", "", 100);
dataSourceBuilder.Filters = new CamlFilters(false);
dataSourceBuilder.AddViewField("ID", "ID", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("Title", "Title", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("Url", "Url", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("Image", "Image", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("OpenInNewWindow", "OpenInNewWindow", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("StartColor", "StartColor", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("EndColor", "EndColor", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("Colspan", "Colspan", CamlFieldTypes.Text);
dataSourceBuilder.AddViewField("Rowspan", "Rowspan", CamlFieldTypes.Text);
var spService = new soby_SharePointService(dataSourceBuilder);

var carousel = new sobyMetroTilesGrid("#sobyMetroTilesDiv", "Metro Tiles", spService, "There is no record found.", null, "Image", "Title", "Url", "OpenInNewWindow", "StartColor", "EndColor", "Colspan", "Rowspan");
carousel.MaxWidth = "600px";
carousel.Initialize(true);
</script>

Last edited Nov 12, 2014 at 2:16 PM by Serkant_Samurkas, version 3