CommandBar

Displays a command bar with the set of options that can be performed on the form.

Interface

interface ICommandBar extends IBaseField {
  editForm: string;
  cancelForm: string;
  editMode?: boolean;
  removeEndpoint?: string;
  hideContentConfiguration?: boolean;
  hideEdit?: boolean;
  hideDelete?: boolean;
  additionalActionItems?: IAdditionalActionItem[]; //Only support OpenUrl, OpenUrlNewTab, OpenForm and Translate actions
  allowLanguageSelector?: boolean;
  endpointName?: string;
  endpointResponse?: any;
}

Example

{
  "name": "commandBar",
  "type": "CommandBar",
  "editMode": false,
  "editForm": "edit",
  "cancelForm": "display",
  "removeEndpoint": "{@togoSettings.apiEndpoints.provisioning}/AddonContent/Remove?uniqueId={uniqueId}",
  "endpointName": "commandBar",
  "hideContentConfiguration": {
    "endpointResponse": "@eval(!{base.isContributor})"
  },
  "hideEdit": {
    "endpointResponse": "@eval(!{base.isContributor})"
  },
  "hideDelete": {
    "endpointResponse": "@eval(!{base.isContributor})"
  },
  "additionalActionItems": [
    {
      "key": "Open",
      "name": {
        "en-US": "Open",
        "es-ES": "Abrir"
      },
      "iconName": "OpenInNewWindow",
      "onClick": {
        "type": "OpenUrl",
        "url": "{base.urls.detailUrl}"
      },
      "onClickInsideIframe": {
        "type": "OpenUrl",
        "url": "{base.urls.detailUrl}"
      }
    },
    {
      "key": "Translate",
      "name": {
        "en-US": "Translation",
        "es-ES": "Traducción"
      },
      "iconName": "LocaleLanguage",
      "onClick": {
        "type": "Translate"
      },
      "propertyName": "translate",
      "visible": "{base.translation.active}"
    }
  ]
}

Properties

type

Must be “CommandBar”.

• Type: "CommandBar"

• Required: Yes

editForm

Form that will be displayed when clicking on the edit button.

• Type: "create" | "edit" | "display" | "<additional form id>"

• Required: Yes

cancelForm

Form that will be displayed after clicking on the cancel button.

• Type: "create" | "edit" | "display" | "<additional form id>"

• Required: Yes

editMode

If true, the command bar will be displayed in edit mode.

• Type: boolean

• Required: No

removeEndpoint

It is the endpoint that will be called when the remove button is clicked.

• Type: string

• Required: No

hideContentConfiguration

If true, the content settings option will be hidden.

• Type: boolean

• Required: No

hideEdit

If true, the edit button will be hidden.

• Type: boolean

• Required: No

hideDelete

If true, the delete button will be hidden.

• Type: boolean

• Required: No

additionalActionItems

Additional buttons that can be added to the command bar (Only support OpenUrl, OpenUrlNewTab, OpenForm and Translate actions).

• Type: IAdditionalActionItem[]

• Required: No

allowLanguageSelector

Allow to change the language of the form.

• Type: boolean

• Required: No

endpointName

Name of the additional endpoint to be called when the command bar is displayed.

• Type: string

• Required: No

• Example: "commandBar"

endpointResponse

This property can be used within each of the properties above if the endpointName property has been reported. Allows you to access the data returned by the endpoint and use it to assign a specific value.

• Type: string

• Required: No

• Example:

{
  "hideContentConfiguration": {
    "endpointResponse": "@eval(!{base.isContributor})"
  }
}