---
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 |
| -------------------------- | ---------------------------------------------- | --- | --- |
| 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 |
| -------------------------- | ---------------------------------------------- | --- | --- |
| 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 |
| ------------- | ------------------------------------------------------------------------- | --- | --- |
| 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"

#### 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 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px"}}/>
</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 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px"}}/>
</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 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px"}}/>
</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 255 / 20%) 0px 4px 8px 0px, rgb(104 104 104) 0px 6px 20px 0px"}}/>
</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.