---
sidebar_position: 5
---

# Dialog

## Overview

This part of the runtime provides access to native dialogs, such as File Selectors and Message boxes.

:::info Javascript
  Dialog is currently unsupported in the JS runtime.
:::

### OpenDirectoryDialog

Opens a dialog that prompts the user to select a directory. Can be customised using [OpenDialogOptions](#opendialogoptions).

Go Signature: `OpenDirectoryDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`

Returns: Selected directory (blank if the user cancelled) or an error


### OpenFileDialog

Opens a dialog that prompts the user to select a file. Can be customised using [OpenDialogOptions](#opendialogoptions).

Go Signature: `OpenFileDialog(ctx context.Context, dialogOptions OpenDialogOptions) (string, error)`

Returns: Selected file (blank if the user cancelled) or an error



### OpenMultipleFilesDialog

Opens a dialog that prompts the user to select multiple files. Can be customised using [OpenDialogOptions](#opendialogoptions).

Go Signature: `OpenMultipleFilesDialog(ctx context.Context, dialogOptions OpenDialogOptions) ([]string, error)`

Returns: Selected files (nil if the user cancelled) or an error



### SaveFileDialog

Opens a dialog that prompts the user to select a filename for the purposes of saving. Can be customised using [SaveDialogOptions](#savedialogoptions).

Go Signature: `SaveFileDialog(ctx context.Context, dialogOptions SaveDialogOptions) (string, error)`

Returns: The selected file (blank if the user cancelled) or an error



### MessageDialog

Displays a message using a message dialog. Can be customised using [MessageDialogOptions](#messagedialogoptions).

Go Signature: `MessageDialog(ctx context.Context, dialogOptions MessageDialogOptions) (string, error)`

Returns: The text of the selected button or an error

## Options

### OpenDialogOptions

```go
type OpenDialogOptions struct {
    DefaultDirectory           string
    DefaultFilename            string
    Title                      string
    Filters                    []FileFilter
    ShowHiddenFiles            bool
    CanCreateDirectories       bool
    ResolvesAliases            bool
    TreatPackagesAsDirectories bool
}
```
| Field                      | Description                                    | Win | Mac | Lin |
| -------------------------- | ---------------------------------------------- | --- | --- | --- |
| DefaultDirectory           | The directory the dialog will show when opened | ✅   | ✅   | ✅   |
| DefaultFilename            | The default filename                           | ✅   | ✅   | ✅   |
| Title                      | Title for the dialog                           | ✅   | ✅   | ✅   |
| [Filters](#filefilter)     | A list of file filters                         | ✅   | ✅   | ✅   |
| ShowHiddenFiles            | Show files hidden by the system                |     | ✅   | ✅   |
| CanCreateDirectories       | Allow user to create directories               |     | ✅   |     |
| ResolvesAliases            | If true, returns the file not the alias        |     | ✅   |     |
| TreatPackagesAsDirectories | Allow navigating into packages                 |     | ✅   |     |


### SaveDialogOptions

```go
type SaveDialogOptions struct {
    DefaultDirectory           string
    DefaultFilename            string
    Title                      string
    Filters                    []FileFilter
    ShowHiddenFiles            bool
    CanCreateDirectories       bool
    TreatPackagesAsDirectories bool
}
```

| Field                      | Description                                    | Win | Mac | Lin |
| -------------------------- | ---------------------------------------------- | --- | --- | --- |
| DefaultDirectory           | The directory the dialog will show when opened | ✅   | ✅   | ✅   |
| DefaultFilename            | The default filename                           | ✅   | ✅   | ✅   |
| Title                      | Title for the dialog                           | ✅   | ✅   | ✅   |
| [Filters](#filefilter)     | A list of file filters                         | ✅   | ✅   | ✅   |
| ShowHiddenFiles            | Show files hidden by the system                |     | ✅   | ✅   |
| CanCreateDirectories       | Allow user to create directories               |     | ✅   |     |
| TreatPackagesAsDirectories | Allow navigating into packages                 |     | ✅   |     |

### MessageDialogOptions

```go
type MessageDialogOptions struct {
    Type          DialogType
    Title         string
    Message       string
    Buttons       []string
    DefaultButton string
    CancelButton  string
}
```
| Field         | Description                                                               | Win | Mac | Lin |
| ------------- | ------------------------------------------------------------------------- | --- | --- | --- |
| Type          | The type of message dialog, eg question, info...                          | ✅   | ✅   | ✅   |
| Title         | Title for the dialog                                                      | ✅   | ✅   | ✅   |
| Message       | The message to show the user                                              | ✅   | ✅   | ✅   |
| Buttons       | A list of button titles                                                   |     | ✅   |     |
| DefaultButton | The button with this text should be treated as default. Bound to `return` |     | ✅   |     |
| CancelButton  | The button with this text should be treated as cancel. Bound to `escape`  |     | ✅   |     |

#### Windows

Windows has standard dialog types in which the buttons are not customisable. The value returned will be one of: "Ok", "Cancel", "Abort", "Retry", "Ignore", "Yes", "No", "Try Again" or "Continue"

#### Linux

Linux has standard dialog types in which the buttons are not customisable. The value returned will be one of: "Ok", "Cancel", "Yes", "No"

#### Mac

A message dialog on Mac may specify up to 4 buttons. If no `DefaultButton` or `CancelButton` is given, the first button is considered default and is bound to the `return` key.

For the following code:
```go
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
    Title:        "It's your turn!",
    Message:      "Select a number",
    Buttons:      []string{"one", "two", "three", "four"},
})
```
the first button is shown as default: div class="text--center"> <img src="/img/runtime/dialog_no_defaults.png" width="30%" style={{"box-shadow": "rgb(255 255 > </div>
<br/>

And if we specify `DefaultButton` to be "two":
```go
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
    Title:         "It's your turn!",
    Message:       "Select a number",
    Buttons:       []string{"one", "two", "three", "four"},
    DefaultButton: "two",
})
```
the second button is shown as default. When `return` is pressed, the value "two" is returned.
<div class="text--center">
    <img src="/img/runtime/dialog_default_button.png" width="30%" style={{"box-shadow": "rgb(255 255 >
</div>

<br/>

If we now specify `CancelButton` to be "three":
```go
selection, err := runtime.MessageDialog(b.ctx, runtime.MessageDialogOptions{
    Title:         "It's your turn!",
    Message:       "Select a number",
    Buttons:       []string{"one", "two", "three", "four"},
    DefaultButton: "two",
    CancelButton:  "three",
})
```
the button with "three" is shown at the bottom of the dialog. When `escape` is pressed, the value "three" is returned:
<div class="text--center">
    <img src="/img/runtime/dialog_default_cancel.png" width="30%" style={{"box-shadow": "rgb(255 255 >
</div>

<br/>
<br/>
<br/>


#### DialogType

```go
const (
        InfoDialog     DialogType = "info"
        WarningDialog  DialogType = "warning"
        ErrorDialog    DialogType = "error"
        QuestionDialog DialogType = "question"
     )
```

### FileFilter

```go
type FileFilter struct {
    DisplayName string // Filter information EG: "Image Files (*.jpg, *.png)"
    Pattern     string // semi-colon separated list of extensions, EG: "*.jpg;*.png"
}
```

#### Windows

Windows allows you to use multiple file filters in dialog boxes. Each FileFilter will show up as a separate entry in the dialog:

<div class="text--center">
    <img src="/img/runtime/dialog_win_filters.png" width="50%" style={{"box-shadow": "rgb(255 255 >
</div>

<br/>
<br/>
<br/>

#### Linux

Linux allows you to use multiple file filters in dialog boxes. Each FileFilter will show up as a separate entry in the dialog:

<div class="text--center">
  <img src="/img/runtime/dialog_lin_filters.png" width="50%" style={{"box-shadow": "rgb(255 255 >
</div>

<br/>
<br/>
<br/>


#### Mac

Mac dialogs only have the concept of a single set of patterns to filter files. If multiple FileFilters are provided, Wails will use all the Patterns defined.

Example:
```go
    selection, err := runtime.OpenFileDialog(b.ctx, runtime.OpenDialogOptions{
        Title: "Select File",
        Filters: []runtime.FileFilter{
            {
                DisplayName: "Images (*.png;*.jpg)",
                Pattern:     "*.png;*.jpg",
            }, {
                DisplayName: "Videos (*.mov;*.mp4)",
                Pattern:     "*.mov;*.mp4",
            },
        },
    })
```
This will result in the Open File dialog using `*.png,*.jpg,*.mov,*.mp4` as a filter.