Displaying Dialogs

Message Boxes
You can use the $dialogs.msgBox() method to display a simple message box with an OK button. The first parameter is the title of the dialog and the second parameter is the message text. For example:
1
<template>
2
  <Window title="Example" width="400" height="100" margined>
3
    <Button v-on:click="showMessage">Show Message</Button>
4
  </Window>
5
</template>
6
​
7
<script>
8
export default {
9
  methods: {
10
    showMessage() {
11
      this.$dialogs.msgBox( 'Title', 'This is the message.' );
12
    }
13
  }
14
}
15
</script>
Copied!
You can also use the $dialogs.msgBoxError() method to display an error message. It has the same parameters as msgBox().
File Dialogs
You can use the $dialogs.openFile() method to allow the user to select an existing file or $dialogs.saveFile() to prompt for a new file to be created or overwritten. Both these methods return the path of the selected file or null if the user cancelled the operation. For example:
1
<template>
2
  <Window title="Example" width="400" height="100" margined>
3
    <Button v-on:click="openFile">Open File</Button>
4
  </Window>
5
</template>
6
​
7
<script>
8
export default {
9
  methods: {
10
    openFile() {
11
      const filePath = this.$dialogs.openFile();
12
      if ( filePath != null ) {
13
        // do something...
14
      }
15
    }
16
  }
17
}
18
</script>
Copied!

Managing Windows

Custom Components

Last modified 3yr ago

Copy link

Contents

Message Boxes

File Dialogs