Empty List Placeholder

Content Type: Widget
Categories: User Interface

Overview

Pluggable widget to show content when a listview or templateview has no data to display or, the other way around, to show content when a listview or templateview has data.

Documentation

Demo urlhttps://emptylistplaceholder100-sandbox.mxapps.io/

Description

Pluggable widget to show a placeholder when:

  • a listview or templateview has no data to display
  • a listview or templateview has data to display.

Typical usage scenario

Using this widget a placeholder can be displayed when a listview or templateview is empty or, the other way around, when a listview or templateview is not empty.

The placeholder can be a simple text, but also (for example) a call to action with an image, a text and a microflow button, to invite the user to add new items to the list. This can greatly improve the user experience of the app. From the developer perspective, this prevents the use of helper objects to keep track of the fact that a list is empty or not.

Features and limitations

Features

Display a placeholder when a listview or templateview is empty or, the other way around, when a listview or templateview is not empty. The placeholder can consist of anything that is available in pluggable widgets. The mode (showing the content when empty or not empty) can be configured in the widget. 

The widget listens to listviews or templateviews with a specified class name. When multiple elements on the page are using the same class name, the widget will respond to the last of the elements.

Using a boolean flag, it is possible to replace the listview/template view with the placeholder or alternatively, the parent of the listview/templateview (including all its child elements). This way, it is possible to not only hide the listview/templateview itself, but also additional UI elements, such as a listview header.  

Dependencies

None

Installation

Add the widget to the page and configure.

Configuration

  • Set an enumeration to
    • show widget content when list is empty
    • show widget content when list is not empty
  • Add a class name to the listview or templateview the widget should listen to
  • Configure the widget with the specified class name. Note: if there are multiple elements on the page that use this class name, the widget will listen to the last element on the page. It is advised not to use the class name more than once
  • Set the boolean to include the parent

Bugs

No known bugs.

Limitations

Responsive web only, no support for native.

Releases

Version: 1.1.2
Framework Version: 8.18.1
Release Notes: Fixed an issue with opening the widget more than once from the navigation. In that case, the widget was only working as intended the first time the page loads. Breaking change: For this to work, the widget now listens to the last occurrence of the class name. See also documentation.
Version: 1.1.1
Framework Version: 8.18.1
Release Notes: Small performance improvement
Version: 1.1.0
Framework Version: 8.18.1
Release Notes: The widget can now also be used to show content when a list/templategrid is not empty. The previous version of the widget only supported showing the content when the list/templategrid is empty.
Version: 1.0.0
Framework Version: 8.18.1
Release Notes: Initial release