Skip to end of metadata
Go to start of metadata

Since iOS 7, Apple introduces a new user interface feature called custom cell action which is activated through swipe gesture. It lets users easily swipe a cell to reveal the actions contextual to the item. This particular feature can be seen in the Mail app.

Crosslight 3 now lets you add custom cell actions in just a few line of code. This page discuss how you can customize the appearance and presentation of custom cell action for iOS to match your business requirement. It is expected that you have successfully displayed a list of data before continuing.

In this guide, you will learn how to add custom contextual cell actions that are activated through swipe gesture. Each action will route its delegate to the EditAction command.

On this page:

Adding Custom Edit Actions

In order to add custom edit actions, open the designated table view controller, i.e., ItemListViewController, then override the InitializeView method and add following code.

As seen in the code above, adding custom edit actions are as simple as adding a new UIEditAction to the EditActions property available in the UITableViewController. Designed with strong separation-of-concern approach, the code above is only responsible for defining the view. The user interaction logic is handled in the ViewModel which is discussed in the following sections.

Toggling Edit Button Automatically

By default, when the edit actions is activated through the swipe gesture, the Edit button doesn't automatically synchronized to reflect the editing state such as featured in Apple's own Mail app. Crosslight provides a convenience way to easily achieve this behavior through a simple property set. See the example code below.

Handling EditAction Command in ViewModel

In Crosslight 3, the EditableListViewModelBase(T) class includes built-in support for cross-platform edit action command. Consequently, you can easily handle the edit actions by simply overriding two methods: CanExecuteEditAction and ExecuteEditAction.

In iOS, the user interaction for each command is automatically routed to the EditAction command. It passed several information represented in the EditingParameter class to the delegate command which you can inspect in the method's parameter. You can then inspect which custom action that user tapped through the CustomAction property. The following code shows how to handle the EditAction command in ViewModel by overriding the aforementioned methods.

As seen in the above code, the CanExecuteEditAction method is responsible to determine whether a custom action is executable. Note that this method is called per custom action defined in the view which makes it easy for you to conditionally disable a custom action. When a custom action is not executable, it will simply disappear in the user interface. For example, the following code snippet code demonstrates how to make the "More" edit action disappear only for the first row.

One important aspect to pay attention while working with custom actions is to recognize when you should dismiss the edit actions mode. For the best user experience, you might want to dismiss the editing mode (i.e., programmatically sliding the cell back to its normal state) after a custom action is handled and executed. This can be done by setting the ShouldEndEditing property of the editing parameter to true such as shown in the code sample above.

However, if the custom action reveals more actions such as showing a list of actions for users to choose, it's recommended to not ending the edit action mode. This user experience is similar to those featured in Apple's own Mail app.

Configuring Binding in BindingProvider

After creating our own custom EditActions and handles the command in ViewModel, the final step is to bind the EditActionCommand to the TableView using the BindingProvider which contains the definition for the view bindings.

The following example shows how to configure the binding for the above custom EditActions.

After saving all the changes, you should see the result similar to the following image.


The sample code for this article can be downloaded from our Git server: