List View Selection

Content Type: Widget
Categories: Data

Overview

A widget that simplifies making a list view with single or multi-select functionality.

Intended to be used alongside the Advanced Pagination and Advanced Sorting widgets.


Documentation

Demo urlhttps://widgettesting105-sandbox.mxapps.io/p/advanced-listview-controls

List View Selection

A widget that simplifies making a list view with single or multi-select functionality

Check boxes / Radio buttons Highlight a row
input demo container demo

Features

  • Can select a single object or a set of objects
  • Option to have a check box, radio buttons, or highlight the row
  • Ability to run an action when the selection changes
  • Supports keyboard navigation

Usage

1. Domain model

You need a non-persistent page helper object that has an association with the entity that is listed in the list view.

In this case, my list view returns Vehicles

domain

2. Nanoflow DS_ListViewContext

You need a Nanoflow that receives an object from the list view's row, adds it to a list, and returns the list.

This is required due to a technical limitation. Use a nanoflow to minimize overhead.

context

3a. Checkboxes / Radio buttons

Add the widget to a column of your list view content

page input

Set the widget settings according to your domain model

input settings

Reference type Should the user be able to select an object or a list of objects

Reference The association from your non-persistent page helper to the objects being shown in the list view

Data source The Nanoflow created in step 2

3b. Highlight a row

Add the widget as the root of your list view content.

page container

Set the widget settings according to your domain model

container settings

Reference type Should the user be able to select an object or a list of objects

Reference The association from your non-persistent page helper to the objects being shown in the list view

Data source The Nanoflow created in step 2

Dynamic class name The class name applied to the widget's child container when this row is selected.

Note: you will need to use some CSS/SCSS to make the widget's container the full height and width of the row. Remove the padding from the li and add it to the class you put for dynamic class name

Demo project

https://widgettesting105-sandbox.mxapps.io/p/advanced-listview-controls

Issues, suggestions and feature requests

https://github.com/bsgriggs/mendix-listview-selection/issues

Development and contribution

Benjamin Griggs

Releases

Version: 1.1.1
Framework Version: 9.18.0
Release Notes: - added aria-label
Version: 1.1.0
Framework Version: 9.18.0
Release Notes: - added keyboard navigation
Version: 1.0.0
Framework Version: 9.18.0
Release Notes: Initial release - Can select a single object or a set of objects - Option to have a check box, radio buttons, or highlight the row - Ability to run an action when the selection changes