Dialogs

The ComponentContext instance exposes three methods that will open a dialog over the app to inform users about critical information, require them to make decisions or fill out a form.

There are three dialog variants available:

Alert dialog
Confirm dialog
Form dialog

Alert dialog

Show an alert dialog with the specified title and message.

Options

Property	Type	Required	Default	Description
`title`	`string`	Yes	-	Title of the dialog.
`message`	`string`	Yes	-	Message to show on the dialog.
`buttonText`	`string`	No	`Done`	Text to use on the action button.

Example

<template>
  <button @click="handleClick">Click me!</button>
</template>

<script>
export default {
  name: 'my-component',
  props: ['context'],
  methods: {
    handleClick() {
      this.context.openAlertDialog({
        title: 'Warning!',
      	message: 'Overflow valve is in open state.'
      });
    }
  }
};
</script>

<style scoped></style>

<script>
  export let context;
  
  function handleClick() {
    context.openAlertDialog({
      title: 'Warning!',
      message: 'Overflow valve is in open state.'
    });
  }
</script>

<button on:click={handleClick}>Click me!</button>

<style></style>

Confirm dialog

Show a confirmation dialog with the specified title and message. Optionally, an extra mandatory confirmation checkbox can be enabled. By indicating the confirmation result is destructive, the checkbox and confirm button will be styled in the warn theme palette.

Options

Property	Type	Required	Default	Description
`title`	`string`	Yes	-	Title of the dialog.
`message`	`string`	Yes	-	Message to show on the dialog.
`cancelButtonText`	`string`	No	`Cancel`	Text to use on the cancelation action button.
`confirmButtonText`	`string`	No	`Confirm`	Text to use on the confirmation action button.
`confirmCheckbox`	`boolean`	No	`false`	Indicates whether a confirm checkbox must be shown.
`confirmCheckboxText`	`string`	No	`I am sure`	Text to use for the confirm checkbox.
`destructive`	`boolean`	No	`false`	Indicates that the confirmation result is destructive.

Example

<template>
  <button @click="handleClick">Click me!</button>
</template>

<script>
export default {
  name: 'my-component',
  props: ['context'],
  methods: {
    handleClick() {
      this.context.openConfirmDialog({
        title: 'Are you sure?',
        message: 'This action is not reversible!',
        confirmCheckbox: true,
        destructive: true
      }).then(confirmed => {
        if (confirmed) {
          // Do something destructive here.
        }
      });
    }
  }
};
</script>

<style scoped></style>

<script>
  export let context;
  
  function handleClick() {
    context.openConfirmDialog({
      title: 'Are you sure?',
      message: 'This action is not reversible!',
      confirmCheckbox: true,
      destructive: true
    }).then(confirmed => {
      if (confirmed) {
        // Do something destructive here.
      }
    });
  }
</script>

<button on:click={handleClick}>Click me!</button>

<style></style>

Form dialog

Show a form dialog.

Options

Property	Type	Required	Default	Description
`title`	`string`	Yes	-	Title of the dialog.
`message`	`string`	No	-	Message to show on the dialog.
`cancelButtonText`	`string`	No	`Cancel`	Text to use on the cancelation action button.
`submitButtonText`	`string`	No	`Submit`	Text to use on the submit action button.
`discardChangesPrompt`	`boolean`	No	`false`	Indicates whether a discard changes prompt is shown, when the form state is dirty and the user closes the form dialog by pressing escape, clicking on the backdrop or clicking on the cancel button.
`inputs`	`ComponentInput[]`	Yes	`[]`	Inputs that will be rendered in the dialog content. These follow the same interface as the manifest component inputs.
`initialValue`	`object`	No	-	Initial value for the form.

Example

<template>
  <button @click="handleClick">Click me!</button>
</template>

<script>
export default {
  name: 'my-component',
  props: ['context'],
  methods: {
    handleClick() {
      this.context.openFormDialog({
        title: 'Feedback',
        inputs: [
          {
            key: 'body',
            type: 'Text',
            label: 'Message',
            required: true,
            translate: false,
          },
        ],
        submitButtonText: 'Send feedback',
        discardChangesPrompt: true,
      }).then(result => {
        if (result) {
          console.log(result);
          // result: { value: { body: 'This is great!' } }
        }
      });
    }
  }
};
</script>

<style scoped></style>

<script>
  export let context;
  
  function handleClick() {
    context.openFormDialog({
      title: 'Feedback',
      inputs: [
        {
          key: 'body',
          type: 'Text',
          label: 'Message',
          required: true,
          translate: false,
        },
      ],
      submitButtonText: 'Send feedback',
      discardChangesPrompt: true,
    }).then(result => {
      if (result) {
        console.log(result);
        // result: { value: { body: 'This is great!' } }
      }
    });
  }
</script>

<button on:click={handleClick}>Click me!</button>

<style></style>