Using Dialogs

In this chapter, we’re going to learn how to use dialogs.

All dialogs in StarUML 8 are asynchronous. A dialog function returns a Promise which is resolved when the dialog is closed.

File Dialogs

Caution

StarUML 8 does not support app.dialogs.showOpenDialog() and app.dialogs.showSaveDialog() in extensions, since extensions cannot read or write files.

Message Dialogs

There are three types of message dialogs to show error, alert, and info.

// Error Dialog
app.dialogs.showErrorDialog("This is error message.")

// Alert Dialog
app.dialogs.showAlertDialog("This is alert message.")

// Info Dialog
app.dialogs.showInfoDialog("This is info message.")

The returned Promise is resolved when user closes the dialog.

app.dialogs.showInfoDialog("Done.").then(function () {
  console.log("closed")
})

Input Dialogs

Here are code examples to show dialogs to get user inputs.

Input Dialog (single line text)

app.dialogs.showInputDialog("Enter your name.").then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log("Your name is", returnValue)
  } else {
    console.log("User canceled")
  }
})

Text Dialog (multi line text)

app.dialogs.showTextDialog("Enter your biography.", "Edit here...").then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log("Your bio is", returnValue)
  } else {
    console.log("User canceled")
  }
})

Confirm Dialog

app.dialogs.showConfirmDialog("Are you sure?").then(function (buttonId) {
  if (buttonId === 'ok') {
    console.log("Confirmed")
  }
})

Note

In StarUML 7 or earlier, showConfirmDialog returned the button id synchronously. In StarUML 8, it returns a Promise resolved with the button id ('ok' or 'cancel').

Select Radio Dialog

var options = [
  { text: "First", value: 1 },
  { text: "Second", value: 2 },
  { text: "Third", value: 3 }
]
app.dialogs.showSelectRadioDialog("Select one of the following items.", options).then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log(returnValue)
  } else {
    console.log("User canceled")
  }
})

Select Dropdown Dialog

var options = [
  { text: "First", value: 1 },
  { text: "Second", value: 2 },
  { text: "Third", value: 3 }
]
app.dialogs.showSelectDropdownDialog("Select one of the following items.", options).then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log(returnValue);
  } else {
    console.log("User canceled")
  }
})

Color Dialog

// Initial color is red (#ff0000).
app.dialogs.showColorDialog("#ff0000").then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log(returnValue);
  } else {
    console.log("User canceled")
  }
})

Font Dialog

var font = {
  face: "Helvetica",
  size: 20,
  color: "#ff0000"
}
app.dialogs.showFontDialog(font).then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log(returnValue);
  } else {
    console.log("User canceled")
  }
})

Element Dialogs

If you need to ask users to pick an model element, Element Picker Dialog can be used as follow:

app.elementPickerDialog.showDialog("Select a Class", null, type.UMLClass).then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log("You selected: ", returnValue)
  }
})

Or, you may need to constrain a list of elements which can be selected by users. Then you can use Element List Picker Dialog.

var classes = app.repository.select("@UMLClass")
var dlg = app.elementListPickerDialog.showDialog("Select a set of Class", classes).then(function ({buttonId, returnValue}) {
  if (buttonId === 'ok') {
    console.log("You selected: ", returnValue)
  }
})

Other Dialogs

The following dialogs of StarUML are also available. All of them return a Promise.

• app.elementListEditorDialog.showDialog(elem, field) : Edit the list of elements in a field of an element.
• app.tagEditorDialog.showDialog(elem) : Edit the tags of an element.
• app.tagValueEditorDialog.showDialog(tag, attr) : Edit the value of a tag.
• app.iconPickerDialog.showDialog(folder) : Pick an icon of the cloud diagrams (folder is one of the built-in icon sets: 'aws', 'azure' or 'gcp').
• app.dialogs.showSimpleDialog(message) : Show a message without an icon.
• app.dialogs.showSaveConfirmDialog(filename) : Ask whether to save the changes of a file. Resolved with the button id ('save', 'dontsave' or 'cancel').

Toast

Toast is a way to show a short message in some seconds. It appears on the top of diagram area and disappears automatically after some seconds.

app.toast.error("This is an error message") // Red color
app.toast.warning("This is a warning message") // Yellow color
app.toast.info("This is an info message") // Black color