Sitecore Hackathon 2015 Part I – Sitecore SPEAK

Assert.IsNotNullOrEmpty (teamName, “Team name can’t be null”)

Last weekend the second 24 hour Sitecore Hackathon took place with the best and brightest from the community competed in teams to build the best Sitecore 8 Module. My brother and I decided to enter a team with a nerdy name referencing the Sitecore API. This was my first Hackathon and I had a romantic view of it being like that scene in The Social Network however in reality it came to be something even better.

Approach

With the Hackathon starting at Saturday 1AM GMT we stayed awake long enough to choose a category before crashing after a long working day. We opted for Best Development Experience Module; being developers we had a few ideas that could make tasks we repeat easier.

We agreed that with just 24 hours to deliver, we had to aim for something with achievable core functionality. This is where the idea to improve resetting Items to standard values came in. The idea was about giving more flexibility to allow fields of an Item to be reset independently as opposed to the core functionality of resetting the whole item. After User Story definition and sprint planning we decided that the Module would exist within a SPEAK Modal opened by a custom button in the Content Editor ribbon. It would give relevant information on each field; originating Template, current value, standard value etc even working with multiple Base Templates.

The guiding principle was to to have multiple points of entry to the Module so that developers would form a habit of using it, i.e. removing the overhead of accessing the Module for all the scenarios or reducing the it to the point where it is negligible:

Pressing the ribbon button when viewing an Item allows control over the item’s fields.
Pressing the ribbon button when viewing a Template Item allows control over all items that are based on that Template.
Pressing the Launch Pad button allows Items and Item Templates to be selected via search.

Implementation

As the Module exists within SPEAK we would require designing a SPEAK Layout, creating Javascript for the Page Code, a Razor cshtml file for the View. Finally, utilising Sitecore.Services.Client’s EntityService and IRepository to facilitate the controller to perform the fetch and update functions.

SPEAK

SPEAK being a great accelerator meant that we had the Modal appearing in Sitecore in minutes, leaving us to concentrate on the Page Code and View.

The ListControl is bound to a custom Razor file we based on the existing Sitecore Title.cshtml file with modifications to render out the modal and allow the functionality to select/unselect fields to be reset.

	<div>
	<input data-bind="attr: { name: Name }" type="button" value="Off"/>

	<div class="sc-tile-default-property">
	<strong class="sc-tile-property-title">Name: </strong>
	<span class="sc-tile-property-value" data-bind="text: Name"></span>
	</div>
	<div class="sc-tile-default-property">
	<strong class="sc-tile-property-title">Template Name: </strong>
	<span class="sc-tile-property-value" data-bind="text: TemplateName"></span> –
	<em class="sc-tile-property-value" data-bind="text: TemplateId"></em>
	</div>
	<div class="sc-tile-default-property">
	<strong class="sc-tile-property-title">Value: </strong>
	<p class="sc-tile-property-value" data-bind="text: Value"></p>
	</div>
	<div class="sc-tile-default-property">
	<strong class="sc-tile-property-title">Standard Value: </strong>
	<p class="sc-tile-property-value" data-bind="text: StandardValue"></p>
	</div>
	</div>

view raw

ListControl.cshtml

hosted with ❤ by GitHub

I can’t take credit for the great work Mike produced for the Page Code, his blogs cover pretty much everything needed to know about SPEAK.

In order for the Modal to show the correct fields of the Item in Context when the ribbon button is clicked. The Item Id is retrieved via QueryString and passed to the GetFields function on initialision of the SPEAK Modal. This in turn calls and executes EntityService and binds the output to the datasource.

	GetFields: function () {
	var datasource = this.DataSource;
	var querystring = this.GetQueryString();

	var itemid = querystring["itemid"];

	var fieldService = new entityService({
	url: "/sitecore/api/ssc/DevToolKit-Controllers/SitecoreItem"
	});

	var result = fieldService.fetchEntity(itemid).execute().then(function (item) {
	datasource.viewModel.items(item.Fields.underlying);
	});

	},

view raw

GetFields.js

hosted with ❤ by GitHub

The update functions in much the same way; fetching the Item via EntityService then looping through each Field, flagging those to reset to standard values, and calling the save function on the Item to trigger the update.

	UpdateItem: function () {
	var itemService = new entityService({
	url: "/sitecore/api/ssc/DevToolKit-Controllers/SitecoreItem"
	});

	var querystring = this.GetQueryString();
	var itemid = querystring["itemid"];

	var message = this.messagePanel;
	var fieldsToReset = this.GetItemsToReset();

	var result = itemService.fetchEntity(itemid).execute().then(function (item) {

	for (var i = 0; i < item.Fields.underlying.length; i++) {
	var field = item.Fields.underlying[i];

	if ($.inArray(field.Name, fieldsToReset) != -1) {
	field.RevertToStandardValue = true;
	}
	}

	item.save().then(function (savedItem) {
	message.addMessage("notification", { text: "Item updated successfully", actions: [], closable: true, temporary: true });
	}).done(this.GetFields());
	});
	},