Understanding the Ionic Framework Action Sheet

posted in: Uncategorized | 13

Many times while designing and developing a mobile app there is a lack of screen real estate meaning we have to get creative with how we present actions and options to the user. A popular pattern, especially on iOS, is to use the action sheet to present a list of contextual options. From the Ionic Docs “The Action Sheet is a slide-up pane that lets the user choose from a set of options. Dangerous options are highlighted in red and made obvious.” These action sheets are shown when certain elements on tapped or in many cases, long tapped (a long tap is a user holds their finger on an element until options are presented).

In this article we’ll look at creating an action sheet in an Ionic App using the built in $ionicActionSheet (Official Documentation) service.

Empty Action Sheet

Update: Ionic now has Android styles for the action sheet!

android action sheet

Action Sheet Basic Syntax

To show an action sheet, we need to call the $ionicActionSheet.show method in our controller. This method accepts an options object.

$ionicActionSheet.show({

});

To use this service, we’ll need to add it to our dependencies for our controller.

.controller('AppCtrl', function($scope, $ionicActionSheet) {

});

For our example, we’ll have the action sheet called when a button is clicked.

<button class="button" ng-click="showActionsheet()">
Show Actionsheet
</button>
.controller('AppCtrl', function($scope, $ionicActionSheet) {

	//Called when button is clicked
	$scope.showActionsheet = function() {
	
		$ionicActionSheet.show({

		});
		
	}
	
});

Using only the code above, clicking on the button will simply bring up the Backdrop, a darkened overlay over the content. This overlay can be tapped on to close the action sheet.

Backdrop over content

Add a Title

Most (but not all) action sheets have a title, a small label at the top of the action sheet reminding the user what the options are pertaining to. To add a title, simply set the titleText option when calling the action sheet.

$ionicActionSheet.show({
	titleText: 'ActionSheet Example'
});

Action Sheet with title

Cancel Option

While every action sheet can be closed by tapping the backdrop, every action sheet should also have a button to cancel out of the action sheet. To add this button, define the cancelText and you can optionally define a cancel function that will be called when the cancel button is pressed.

$ionicActionSheet.show({
	cancelText: 'Cancel',
	cancel: function() {
		console.log('CANCELLED');
    }
});

Action Sheet with cancel option

Destructive Option

Many, but not all, action sheets have a “destructive option”, typically a delete option. This option is highlighted in red. To add this to your action sheet add the destructiveText option and the destructiveButtonClicked function to define what happened when that option is selected. Returning true from this method will cause the action sheet to close after the function is called while returning false will cause it to stay open.

$ionicActionSheet.show({
	destructiveText: 'Delete',
	destructiveButtonClicked: function() {
        //Do Stuff
        return true; //Close the model?
    }
});

Action Sheet with Delete option

Custom Options

We also have the ability to add our own custom options to our Action Sheet by including the buttons property which accepts an array of objects. Each object should have the text property. In you want to include an icon on the left of the option, include an i element with a class of icon and the class of the icon you want to display.

$ionicActionSheet.show({
	buttons: [
        { text: 'Share' },
        { text: '<i class="icon ion-arrow-move"></i> Move' },
    ]
});

To specify what happens when each of these options is clicked, we need to include the buttonClicked property. This property accepts a function where the index of which custom button was pressed is passed in. This index refers to the index of the button in the buttons array.

$ionicActionSheet.show({
	buttons: [
        { text: 'Share' }, //Index = 0
        { text: '<i class="icon ion-arrow-move"></i> Move' }, //Index = 1
    ],
	buttonClicked: function(index) {
        alert('BUTTON CLICKED' + index);
        return true; //Close the model?
    }
});

Like the delete property, returning true from this method will cause the action sheet to close after the function is called while returning false will cause it to stay open.

To handle the index being passed in, you will want to use either an if or a switch statement to point to the right code for the right option.

$ionicActionSheet.show({
	buttons: [
        { text: 'Share' }, //Index = 0
        { text: '<i class="icon ion-arrow-move"></i> Move' }, //Index = 1
    ]
});

$ionicActionSheet.show({
	buttons: [
        { text: 'Share' },
        { text: '<i class="icon ion-arrow-move"></i> Move' },
    ],
	buttonClicked: function(index) {
		switch (index){
			case 0 :
				//Handle Share Button
				return true;
			case 1 :
				//Handle Move Button
				return true;
		}
    }
});

Action Sheet with custom options

Conclusion

You can use a mixture of the above code to create awesome action sheets in your Ionic Framework app to help save on screen real estate and still be able to present your user with all the needed options and interactions. Any questions? Feel free to comment below!

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.

13 Responses

  1. Hey, thanks for sharing! I’m wondering what’s the difference between this and the ngCordova action sheet plugin: http://ngcordova.com/docs/plugins/actionSheet/ ?

    The Ionic version doesn’t seem to be leveraging that at all and it’s the Ionic team who made ngCordova in the first place… so did they just re-implement the action sheet functionality? I don’t get it… 🙁

    • I can’t really speak for the Ionic team, but I think the Ionic version allows for styling that you may not get in the plugin. Also, the action sheet existed way before ngCordova. 🙂

  2. Islamabad

    Hi Andrew,

    How can we style it. I am stuck up with this issue:

    http://stackoverflow.com/questions/29197264/ionicactionsheet-displaying-wrong-format

    • As I mentioned in the beginning of this post, that style you are seeing is the Android style.

      • Islamabad

        Thanks Andrew. Is there a way to change this style?

        • To your own custom styles? Yea. Just override the classes. Inspect element in your browser of choice and you’ll be able to see what classes it is using.

          • Islamabad

            Thanks. I wonder if there is a list of classes documented somewhere.

          • I think this is one of those instances where due to the nature of open source, it would be a bit pointless to document them all when you can just go to a page and see them yourself. 🙂

          • Islamabad

            Yes, I agree. Thanks!

  3. Dmitriy

    Hi Andrew,
    I’ve got a list of 13 contextual options, I use action sheet but they don’t fit to the screen and i’m not able to scroll them.
    Is it possible to make action sheet scroll?

    • As far as I know, out of the box, no.

      One option which seems to work is overriding a bit of the CSS.

      .action-sheet-wrapper {  
      	top: 0;
      	overflow: auto;
      }
      

      In the browser you’ll get an ugly scrollbar. Not sure about what happens on a real device. Test it out and feel free to let me know how it went.

  4. melovett2

    I really appreciate this post! I was stuck trying to add links to the buttons on the action sheet. Searched for a solution elsewhere but no luck. Got my answer right here using the switch statement. Thanks much Andrew!

Leave a Reply