Add New Button

<bk-add-new-button></bk-add-new-button>

Renders a button. Upon clicking, other components are notified that an item needs to be created.

How to configure

Basic usage of the Add New Button does not require any specific configuration.

{
  "tag": "bk-add-new-button"
}

Initial values

Initial values to be appended to the request for creation of the new item can be specified with property initialValues.

{
  "tag": "bk-add-new-button",
  "properties": {
    "initialValues": {
      "status": "Sent"
    }
  }
}

Navigate on click

It is possible to set up the Add New Button so that clicking the button triggers to navigate to a specified URL, using property browseOnButtonClick.

{
  "tag": "bk-add-new-button",
  "properties": {
    "browseOnButtonClick": {
      "href": "/orders-list"
    }
  }
}

Locale

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

type Locale = {
  content?: LocalizedText
}

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

Examples

Example: Basic Usage with initial values

With such configuration for the Add New Button:

{
  "tag": "bk-add-new-button",
  "properties": {
    "initialValues": {
      "status": "Sent"
    }
  }
}

clicking the rendered button requests a new item to be created. The new item should be initialized with field "status" equal to "Sent".

Example: Navigation

With such configuration for the Add New Button:

{
  "tag": "bk-add-new-button",
  "properties": {
    "browseOnButtonClick": {
      "href": "/orders-list",
      "target": "_blank"
    }
  }
}

clicking the rendered button triggers to navigate to route "/orders-list" in a new tab.

API

Properties & Attributes

property	attribute	type	default	description
browseOnButtonClick	-	ClickPayload	{}	when provided with a valid schema, overrides the button default on-click behavior allowing an href linking
initialValues	-	AddNewPayload	{}	arguments to pass upon click

ClickPayload

type ClickPayload = {
  /** Link reference, either relative starting with '/' or absolute */
  href?: string;
  /** Where to open the href. Defaults to _self */
  target?: LinkTarget;
  /** Query params appended to href */
  query?: Record<string, any>;
}

Listens to

event	action
loading-data	sets internal loading state
nested-navigation-state/back	keeps track of navigation steps
nested-navigation-state/push	keeps track of navigation steps

Emits

event	description
add-new	notifies the request for creating a new item