Introducing the ActionSheet for Kendo UI Mobile

Highlights

• New! ActionSheet introduced in the Q1 2012 SP of Kendo UI Mobile (v2012.1.515)
• ActionSheet displays a set of choices related to a task the user initiates
• Super-easy to add the ActionSheet to your apps built on Kendo UI Mobile
• Easy to add ActionSheet to existing Kendo UI Mobile applications (i.e. TeamThing)

Introduction

In case you missed it, we shipped a service pack for the Q1 2012 release of Kendo UI last week. This service pack includes many updates, fixes, and enhancements to all three collections of Kendo UI (Web, DataViz, Mobile). For the release, I wrote a blog post that provided a high-level overview of what's new. Unfortunately, I neglected to highlight the ActionSheet that we introduced in Kendo UI Mobile.

In my defense, it's always a challenge to cover everything for our releases!

Introducing the ActionSheet

The purpose of the ActionSheet is to display a list of actions based on user interaction. The ActionSheet provides a native-like menu across all platforms supported by Kendo UI Mobile. In every case, a cancellation button is provided for the user to revoke the action. Additionally, it provides a title bar on Android and BlackBerry devices.

Here's an example of an ActionSheet that could be displayed when a user selects an email:

ActionSheet of Kendo UI Mobile

The ActionSheet is useful in situations when you want to provide a user with a quick, contextual menu to perform a task. It may also be used to confirm a user's choice before conducting an action with potentially significant consequences (i.e. deleting an email).

Getting Started

An ActionSheet is displayed when a user interacts with navigational widgets such as a ListView. Adding an ActionSheet to your Kendo UI Mobile is pretty simple. Let's assume the following example:

<ul id="actions" data-role="actionsheet">
	<li class="km-actionsheet-title">Monday's meeting</li>
	<li><a href="#" data-action="reply>Reply</a></li>
	<li><a href="#" data-action="replyAll>Reply All</a></li>
	<li><a href="#" data-action="archive>Archive</a></li>
</ul>

An ActionSheet is a ul element with a role data- attribute set to actionsheet. (Alternatively, the ActionSheet can be initialized via a jQuery selector.) It's a widget that you'll define within the context of a View like so:

<div data-role="view">
    <ul data-role="listview" data-source="inbox" data-template="inboxItem"></ul>
    <ul id="actions" data-role="actionsheet">
		<li class="km-actionsheet-title">Monday's meeting</li>
		<li><a href="#" data-action="reply>Reply</a></li>
		<li><a href="#" data-action="replyAll>Reply All</a></li>
		<li><a href="#" data-action="archive>Archive</a></li>
	</ul>
</div>

In the example (above), each action is represented by a li element with a nested anchor that contains an action data- attribute. The purpose of the action data- attribute is to specify a callback method to be executed when the user clicks/touches it. For example, when the user clicks/touches the Reply option, the reply callback is triggered.

The callback receives a object with two fields: target and (optional) context as a parameter. The target field provide a reference to the DOM element responsible for displaying the ActionScript. The context field provides access to the actionsheet-context data- attribute of the opening element:

function reply(e) {
	console.log("Replying to message ID: " + e.context);
}

The context field provides allows you to quickly reference the item that the user selected.

Adding the ActionSheet to TeamThing

TeamThing on the iPhone

Earlier this month, Todd Anglin published a sample application entitled, TeamThing. Its purpose is simple to highlight the building blocks of Kendo UI Mobile. From Todd's blog post on TeamThing:

While the purpose of the app is to showcase Kendo UI Mobile, let's make sure you understand the basic app concepts. In essence, TeamThing is like a task list app for teams. The idea is that distributed team members can use TeamThing to effortlessly share what they're working on so that all other team members and observers (like bosses) can easily answer the question, "What are you working on?" at any time.

At the time that TeamThing was built, Kendo UI Mobile didn't have the ActionSheet. When task was selected by a user, the application simply navigated to a new View:

ThingDetail View of TeamThing

This isn't an ideal user experience because the transition to a new view didn't feel natural to the user experience metaphors of the device experience. I wanted to see if I could swap out this View with a more intuitive ActionSheet. I also wanted to see just how easy this was.

As it turns out, it was really easy.

The first step involved building an ActionSheet for TeamThing:

<ul data-role="actionsheet" id="thingActions">
	<li class="km-actionsheet-title">Status:</li>
	<li><a href="#" data-action="deleteThing" class="km-button delete">Delete</a></li>
	<li><a href="#" data-action="markCompleted">Mark Complete</a></li>
	<li><a href="#" data-action="markDelayed">Mark Delayed</a></li>
	<li><a href="#" data-action="markInProgress">Mark In-Progress</a></li>
</ul>

Here's the resulting output for this markup:

Notice that I themed the Delete option appropriately. This was done through a simple set of style applied through the CSS classes, km-button and delete:

.km-ios .km-button.delete{
	background-color: red;
	color: white;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .5);
}

The next step was to route user interactions for each item to this newly-created ActionSheet. Because the original list utilized databinding and templates, accomplishing this task was easy:

<script type="text/x-kendo-template" id="tmplThingItem">
	<a class="km-listview-link"
	   data-role="listview-link"
	   data-rel="actionsheet"
	   href="\\#thingActions"
	   data-actionsheet-context="#:data.id#">
		<div class="thingTitle">#= data.description #</div>
	</a>
</script>

In the markup (above), the template outputs code to inform the Kendo UI Mobile framework to route interactions to the ActionSheet. To make matters simplier for me when modified items, I utilized the actionsheet-context data- attribute to pass information to each of my callbacks that I had created for each action defined.

Final Thoughts

So, there you have it. The ActionSheet is a new widget that will provide you with a quick, contextual menu for performing actions against a collection of items you have in your Kendo UI Mobile applications. We added it to the service pack for Kendo UI Q1 2012 so make sure to sync up your script and style references. And, as always, please continue to send us your awesome feedback!