Skip to content

Multi-Selection

Multiple Selection feature allows you to switch on multiple selection mode on the Object Table. Please refer to the metadata definition via the above link.

Multiple selection mode allow user to select one or more items from the list. At runtime, the application will be able to:

  1. Retrieve the items that user selected
  2. Handle the event when the list is switch between normal and multiple selection mode.
  3. Handle the event when user select an item or remove the selection

Note

For better user experience, when multiple selection mode is turned on, the OnPress and OnAccessoryButtonPress event will be disabled. They will be enabled again when the multiple selection mode is turned off.

There are various ways to enable the multiple selection mode:

  1. In metadata, it can be set with one of the properties under the Selection property of the Object Table:

    1. Set the Mode property in the metadata or,
    2. Set the LongPressToEnable in the metadata, and the selection mode will be active when user long pressed on one of the items (Not supported in the web runtime).

  2. Via JavaScript rule:

    1. Call the setSelectionMode("Multiple") function on the section's proxy class.

Note

Typically in iOS, doing long press on items will allow you to select the text under it, it's known as content copyable feature. When you enabled LongPressToEnable property of the Selection, the content copyable feature will be disabled. It will only be enabled again when the container entered the selection mode or when you disabled the LongPressToEnable property.

setSelectionMode: Set the section selection mode, the parameter value can be None or Multiple

getSelectionMode: Get selection mode for the current section, the return value is None or Multiple

getSelectedItems: Get the current section selected items when selection mode is active. Otherwise an empty array will be returned.

getSelectionChangedItem: Get the last selected or deselected item.

OnSelectionChanged: An event that is triggered when the user selects or deselects an item on the list (set in the metadata).

OnSelectionModeChanged: An event that is triggered when switching on or off the multiple selection mode (set in the metadata). When ExitOnLastDeselect is set to true, it will switch off the multiple selection mode when you deselect the last item of the section.

Usage

Switch On Multiple Selection Mode

export default function SwitchOnMultipleSelection(clientAPI) {
  const sectionedTable = clientAPI.getControl('MultiSelectionSectionedTable');
  let section = sectionedTable.getSections();
  if (sections[0] instanceOf ISelectableSectionProxy) {
    sections[0].setSelectionMode("Multiple");
  }
}

Switch Off Multiple Selection Mode

export default function SwitchOffMultipleSelection(clientAPI) {
  const sectionedTable = clientAPI.getControl('MultiSelectionSectionedTable');
  let section = sectionedTable.getSections();
  if (sections[0] instanceOf ISelectableSectionProxy) {
    sections[0].setSelectionMode("None");
  }
}

Get Current Selection Mode

export default function GetFirstSectionSelectionMode(clientAPI) {
  const sectionedTable = clientAPI.getControl('MultiSelectionSectionedTable');
  let sections = sectionedTable.getSections();
  if (sections[0] instanceOf ISelectableSectionProxy) {
    let selectionMode = sections[0].getSelectionMode();
  }
}

Get Section Selected Items

export default function GetFirstSectionSelectedItems(clientAPI) {
  const sectionedTable = clientAPI.getControl('MultiSelectionSectionedTable');
  let sections = sectionedTable.getSections();
  if (sections[0] instanceOf ISelectableSectionProxy) {
    let selectionMode = sections[0].getSelectedItems();
  }
}

Get Section Last Selected or Deselected Item

export default function GetFirstSectionLastSelectedOrDeselected(clientAPI) {
  const sectionedTable = clientAPI.getControl('MultiSelectionSectionedTable');
  let sections = sectionedTable.getSections();
  if (sections[0] instanceOf ISelectableSectionProxy) {
    let selectionMode = sections[0].getChangedItem();
  }
}

Sample Application for Multi-Selection

Please refer this sample application to get an overall picture of how the multi-selection feature of the ObjectTable works.

Last update: September 6, 2024