Bulk Actions Button

<bk-bulk-actions></bk-bulk-actions>

The Bulk Actions Button allows to notify when it is required to alter the value of a boolean or enum field across multiple items using a bulk operation, by first selecting the field to update and subsequently the target value, both using popup menus.

1. The component initially scans the dataSchema property to identify properties amenable to modification. It focuses on properties with enum key or boolean data types.
2. When components such as the Table or the Gallery notify that items have been selected, the Bulk Actions Button becomes visible. The Bulk Actions Button keeps as state an internal representation of the selected items.
3. Interaction with the component is facilitated through the left-hand side of the component, represented by three dots. This UI allows users to choose the specific property to be modified.
4. Following the selection of a property, the component assesses whether the chosen property holds the same value across all selected items. If uniform, the common value is displayed alongside the property name. If not, the property name is accompanied by 'various' to denote inconsistency.
5. Value Selection: Users can now also engage with the right-hand side of the component to select the value intended for assignment to the chosen property.
6. Upon value selection, the component notifies the request to perform the necessary data update operations to other components.

How to configure

Basic usage of the Bulk Actions Button requires a data-schema to be provided, describing the fields of the received data.

{
  "tag": "bk-bulk-button",
  "properties": {
    "dataSchema": {
      "type": "object",
      "properties": {
        "name": {"type": "string"},
        "isMarried": {"type": "boolean"},
        "dayOff": {
          "type": "string",
          "enum": ["Mon", "Tue", "Wed", "Thu", "Fri"]
        }
      }
    }
  }
}

Confirmation dialog on selected value

It is possible to require for confirmation to be prompted before requesting value bulk update. To opt-in to this behavior, requireConfirm property is available.

1. Boolean type

Property requireConfirm can be set as true to require the default dialog box text.

2. Object of type RequireConfirmOpts

Property requireConfirm can be configured so to require custom text inside the dialog box.

{
  "tag": "bk-bulk-actions",
  "properties": {
    "requireConfirm": {
      "content": {
        "it": "Verrà creato un nuovo elemento, procedere?",
        "en": "A new element will be created, continue?"
      },
      "title": "Confirmation Required"
    }
  }
}

Locale

The texts of the Bulk Actions Button can be customized through the property customLocale, which accepts an object shaped like the following:

type Locale = {
  confirmationContent?: LocalizedText
  chooseProperty?: LocalizedText
  chooseValue?: LocalizedText
  noValue?: LocalizedText
}

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

Examples

With such configuration for the Bulk Actions Button:

{
  "tag": "bk-bulk-actions",
  "properties": {
    "dataSchema": {
      "name": {"type": "string"},
      "isMarried": {"type": "boolean"},
      "dayOff": {
        "type": "string",
        "enum": ["Mon", "Tue", "Wed", "Thu", "Fri"]
      }
    },
    "requireConfirm": true
  }
}

it is possible to notify the request to update in bulk either the isMarried or the dayOff field in all selected items. Before issuing the request, a dialog box is prompted to the user.

API

Properties & Attributes

property	attribute	type	default	description
requireConfirm	-	boolean | RequireConfirmOpts	false	whether or not the button should ask for confirmation before requesting to update all the selected data with the chosen value
dataSchema	-	DataSchema	-	data-schema describing the fields of the collection

RequireConfirmOpts

type RequireConfirmOpts = {
  cancelText?: LocalizedText; // cancel button text
  okText?: LocalizedText;     // ok button text
  content?: LocalizedText;    // the content text
  title?: LocalizedText;      // the title text
}

where LocalizedText can be either simple strings or objects containing the language acronymous key and the text as value.

Listens to

event	action
select-data-bulk	keeps track of user selections

Emits

event	description
bulk-update	notifies the client to update more items at the same time with a specific value