Native Action Sheet

Overview

Native Action sheet is a JS module that handles the actions based on the platform. It consolidates the Action Sheets of the iOS platform and the Bottom Sheet widget of the Android platform. The Native Action Sheet uses the native guidelines for designing the action sheets. For Android, it uses the Google Material Design Guidelines, and for iOS it uses the Native iOS guidelines.

The Native Action Sheet contains the following features.

• The Native Action Sheet contains default style buttons and destructive buttons (such as Delete and Cancel).
• Every button in the Native Action Sheet can invoke any actions such as navigation to another screen.
• Native Action Sheet can contain up to eight items in one action sheet.
• In the iOS platform, it is recommended to have a Cancel Action in the Action Sheet to dismiss the action sheet. This is not required for the Android platform, as the Action Sheet is dismissed from the screen with a top to bottom swipe of the container.

NOTE: The Native Action Sheet component is used inside the Mobile Banking application.

Using Native Action Sheet

To use the Native Action Sheet, a developer must follow these steps.

1. From Quantum Visualizer, open the application in the Design view.
2. Under Project explorer, expand the application name > Modules > require.
3. Place the nativeactionsheet.js file in the require folder.

The sample code given below shows the the usage of Native Action Sheet in a module.

define(['NativeActionSheet'], function(NativeActionSheet){ 

  return{
    postShow: function() {
      let scopeObj = this;
      this.view.btnShow.onClick = function() {
        NativeActionSheet.showActionSheet([
          {'key': '1', 'label': 'Rename Custom View', 'action': scopeObj.callback},
          {'key': '2', 'label': 'Add / Remove Accounts', 'action': scopeObj.callback},
          {'key': '3', 'label': 'Delete Custom View', 'action': scopeObj.callback, 'style': 'red'},
        ]);
      }
    },

    callback: function(key) {
      alert(key + " : Form");
    }
  }

});

Native Action Sheet Contracts

The Native Action Sheet component does not contain any properties or events. It contains only one method.

• showActionSheet Method

showActionSheet Method

This method is invoked by the parent of the component (such as a Form Controller) to display the Native Action Sheet. When the parent component uses this method, the Action Sheet component appears.

NativeActionSheet.showActionSheet([{
		'key': '1',
		'label': 'Rename Custom View',
		'action': this.callback
	},
	{
		'key': '2',
		'label': 'Add / Remove Accounts',
		'action': this.callback
	},
	{
		'key': '3',
		'label': 'Delete Custom View',
		'action': this.callback,
		'style': 'red'
	},
]);