List

<bk-simple-list></bk-simple-list>

The List displays a list of primitive elements (strings, numbers, ...) or lookup fields.

How to configure

Property datasourceKey should be provided in the List configuration, matching one of the fields of the underlying data.

Upon receiving newly fetched data (via a display-data event), the List component extracts the value of the field indicated by datasourceKey from the first data entry.

{
  "tag": "bk-simple-list",
  "properties": {
    "datasourceKey": "products"
  }
}

Title

The List title is configurable via the property label, which is expected to be either a sting, a localized object, or an object with the following fields:

property	type	description
title	LocalizedText	title of the list (h1)
subtitle	LocalizedText	subtitle (h2) displayed below the title
badge	LocalizedText	badge displayed right of the title
icon	string	icon displayed left of the title

Examples

With the following configuration, the List renders the field items of the retrieved data.

{
  "tag": "bk-simple-list",
  "properties": {
    "label": {
      "icon": "fas fa-building",
      "title": {"en": "Conversation", "it": "Conversazione"},
      "badge": {"en": "Awaiting", "it": "In Attesa"},
      "subtitle": {"en": "This is a conversation", "it": "Questa è una conversazione"}
    },
    "datasourceKey": "products"
  }
},

If the data looks like:

[
  {
    "name": "Company 1",
    "products": [
      "Blue Pants", "Red Shirt", "Gray Socks"
    ]
  },
  {
    "name": "Company 2",
    "products": [
      "Green Shoes"
    ]
  }
]

the rendered data by the List can be represented by an array as:

[
  ["Blue Pants"],
  ["Red Shirt"],
  ["Gray Socks"]
]

API

Properties & Attributes

property	attribute	type	default	description
datasourceKey	datasource-key	string	-	the object key that will be used to pick the data to show.
customMessageOnAbsentLookup	-	LocalizedText	-	override lookup value in case lookup is not resolved due to lack of data
label	-	LocalizedText | HeaderProps	-	header of the list.
height	height	string | number	-	max height of the body of the list before. Overflowing data is accessible through vertical scrolling

HeaderProps

type HeaderProps = {
  title: LocalizedText
  subtitle: LocalizedText
  badge: LocalizedText
  icon: string 
}

where LocalizedText is either a string or an object mapping language acronyms to strings.

Listens to

event	action
display-data	retrieved data to display
loading-data	choose when to show the list spinner

Emits

None