Skip to content
[Jenkins]Jenkins
log in

Design Library

Dialogs

Jenkins can display dialogs with a simple-to-use JavaScript API. They serve as replacement for the browser built-in dialogs for alert, prompt and confirm, additionally you can show arbitrary content in a modal or have complete forms in a dialog. As dialogs are executed asynchronously they can't be used as a 1:1 replacements for the browser built-ins.

Name
Quantity
Choose flavor

Alerts

Replaces the browser built-in alert(message). Contrary to the built-in the code will not wait until the user has closed the alert but as long as the alert is shown the user cant do anything else. Clicking outside the dialog will have no effect, the button must be used to close it.
Alerts are usually used to show error messages.

showAlert()

Prompts

Replaces the browser built-in prompt(message) to query a single value from a user. This returns a promise that allows the script to react when the user has entered the value or aborted. Clicking outside the dialog will have no effect, the buttons must be used to close it. Default minWidth: 400px

showPrompt()

Confirmations

Replaces the browser built-in confirm(message) to make a user confirm an action. This returns a promise that allows the script to react when the user has confirmed or denied. Clicking outside the dialog will have no effect, the buttons must be used to close it. By default, the OK button gets the text Yes

showConfirm()

Modals

Presents a popup to the user with arbitrary information. A modal has no buttons at the bottom. Instead, a close button is added to the upper right corner (can also be hidden). The dialog is closed when clicking outside of it.

showModal()

Forms

Shows a form inside a dialog. For proper functionality, do not wrap the template inside a template block as scripts that are included by forms are not loaded immediately in that case.
Do not include buttons to submit, apply or cancel the form. Those are added automatically. Adding buttons to validate things or testing connections is fine.
You can either handle the form directly or submit the form.
By default, the OK button gets the text Submit which is rather generic. Try to use something, that fits the context e.g. Add. Default minWidth: 600px

showForm()

Customizing the appearance and behaviour

All dialogs take a second optional parameter with options that allow to change certain aspects.
  • message: Adds a message to the dialog
  • okText: Adjust the text of the OK button, the default depends on the type of dialog
  • cancelText: Adjust the text of the Cancel button, defaults to Cancel
  • type: Change the color of the OK button. Allowed values: destructive
  • minWidth: Set the minimum width of the dialog, the default depends on the type of dialog
  • maxWidth: Set the maximum width of the dialog, defaults to 475px
  • hideCloseButton: Hides the close button in modal dialogs, defaults to false
  • allowEmpty: When set to false the OK button will be disabled in the prompt dialog as long as the input field is empty or contains only whitespace, defaults to false
  • submitButton: Change the behaviour of the submit button in a form dialog. When true the form will be submitted to the action attribute of the form. When false, a FormData object is passed to the resolve method of the Promise. Defaults to true

OK Button texts

There are some predefined button texts available that come with translation. You can refer to them with e.g. dialog.translations.apply. You can choose from the following texts:
  • ok: OK
  • cancel: Cancel
  • yes: Yes
  • no: No
  • add: Add
  • save: Save
  • apply: Apply
  • submit: Submit
PreviousConventionsNextDropdowns