#Dialogs

In your Addon's Screens, it is common you'll need to provide simple dialogs to the user.

#Confirmation Dialog

It is common that you will need a confirmation dialog in your Addon's interface. You can use cms.showConfirmationDialog() to show a simple dialog. Here's an example:

<script src="/api/addon/script.js"></script>
<script>
cms.showConfirmationDialog({
  title: `Delete ${thing.name}`,
  body: 'Are you sure you want to delete this Thing?',
  confirmLabel: 'Delete',
  onConfirm: async () => {
    await axios.post(`${cms.getUrl()}/api/thing/${thing._id}/delete`)
    cms.queueNotification(`${thing.name} deleted`)
  }
})
</script>

This function has the following options:

Name	Description
`title`	The title of the dialog
`body`	The body of the dialog. This can contain HTML
`confirmLabel`	The label of the confirm button. If not specified, it will say "Confirm"
`cancelLabel`	The label of the cancel button. If not specified, it will say "Cancel"
`confirmIcon`	Optional icon to show for the confirm button
`cancelIcon`	Optional icon to show for the cancel button. This is generally discouraged
`onConfirm`	A callback function that is run when the user clicks the confirm button
`onCancel`	A callback function that is run when the user clicks the cancel button
`requirePhrase`	If specified, the user must type this phrase before clicking confirm. This is useful for making them type something like `permanently delete ${thing.name}`

#Asset Picker

To allow the user to pick an Asset from the Asset Browser, you can use cms.showAssetPicker(). Here's an example:

<script src="/api/addon/script.js"></script>
<script>
cms.showAssetPicker({
  onSelect: e => {
    this.settings.filePath = e.paths[0]
  }
})
</script>

This function has the following options:

Name	Description
`onSelect`	A callback function to call when the user selects an Asset
`multiple`	When `true`, the user can select multiple Assets
`assetType`	A comma-separated list of MIME types and/or file extensions to allow, or don't specify for any kind of Asset. Ex: `"image/*, .pdf, .zip, application/msword"`
`current`	You can optionally specify the current Asset path as a string or Asset paths as an array. This will highlight them in the dialog and allow the user to click "Remove" to select none. Ensure your Addon can handle an empty array as a response.
`directory`	When `true`, the user is selecting a Directory rather than an Asset. In this case, you will receive `e.assetDirectoryPath` instead of `e.paths`

#Media Picker

To allow the user to pick a Media item from the Media Library, you can use cms.showMediaPicker(). Here's an example:

<script src="/api/addon/script.js"></script>
<script>
cms.showMediaPicker({
  onSelect: e => {
    this.settings.backgroundImageMediaId = e.mediaIds[0]
  }
})
</script>

This function has the following options:

Name	Description
`onSelect`	A callback function to call when the user selects Media
`multiple`	When `true`, the user can select multiple Media items
`mediaType`	`image`, `video`, or don't specify for any kind of Media
`current`	You can optionally specify the current mediaId as a string or mediaIds as an array. This will highlight them in the dialog and allow the user to click "Remove" to select none. Ensure your Addon can handle an empty array as a response.
`directory`	When `true`, the user is selecting a Media Directory rather than a Media item. In this case, you will receive `e.mediaDirectoryId` and `e.mediaDirectoryPath` rather than `e.mediaIds`