Last update July 2019 - Requires SCADE 1.0 - 0.9.16 or higher

(Script tags will be stripped)


# Introduction

A modal dialog is used to get the user's attention and interrupts the user's regular app flow. While the modal dialog is displayed, the user can only perform the actions available in the modal dialog. Only after the user leaves the modal dialog, she can continue the regular app user flow.

In SCADE, we have the following options of displaying modal dialogs

  • Custom Modal Dialogs

  • iOS AlertController

  • Android AlertDialog

  • Any other new iOS and Android option not listed here at the moment...

We will discuss all these options in the following chapters. The UgModalDemo sample app contains all the code.

# Example Download

UgModalDialogDemo

Please find the sample project here. Edit the start.swift to run different examples. [Modal Dialog DemoApp](🔗)

# Custom Modal dialog

The SCADE custom modal dialog is the most powerful option, as you can display any kind of UI as a model dialog. So its totally up to you how the model dialog looks, behaves and is displayed. You can use any kind of native control or visual element to create the dialog (textboxes, text, images....).

Short Recap - Pages and Windows

In SCADE, each SCADE page is displayed in a SCADE window. Most of the time, we use **one main window** and use this to display multiple pages. However, SCADE doesn't stop you from using multiple windows

In our case, we use a second window to display the modal dialog. The modal dialog itself is just our well known SCADE page that can contain any kind of content.

### General steps

  1. We **design two pages** - the parent/main page and the **ModalContentPage**page that is used for the modal dialog

  2. We **display the main page**

  3. Within the main page, we load the **ModalContentPage** page

  4. We create a new window - **modalWindow**

  5. We display the **ModalContentPage** in the new window using the **show** method

  6. The **modal window** will receive all the user input, no events will reach the main window

  7. We close the **modal window** when done and return the results to the main page.

**Example Code** The example code is a little bit different from the general steps, as we try to keep all the modal dialog related code in the **ModalContentPage** to keep the **main page** class clean

### Create Modal Content Page

You design the UI as you like. Make sure that the **page's background color is NOT set**, therefore providing the modal look.

(Script tags will be stripped)


### Create Modal Content Page Class

We use the **onExit property** to store a closure that gets executed when returning from the modal dialog. The code in the closure processes the results and species what happens when we return from the modal dialog.

We create a window instance **modalWindow** that holds the window we display on top of the main page window.

When you leave the **modalWindow** , you first call the **close()** method of the modalWindow (SCDLatticeWindow), and the modal dialog disappears. We then call onExit to pass control back to the main page.

The **show** method has been overwritten so that it references the private **modalWindow** property.



### Create Main Page

In the main page, we specified the closure that is executed when the user returns from the modal dialog. The closure is stored in a property **onExit** of the **ModalContentPage** page.

We then show the **ModalContentPage** when the main page's button is clicked.

The **show method** of the modalContentPage has been overloaded to use a window instance that is created within the modalContentPage class



# iOS UIAlertController

Displaying the UIAlertController couldn't be easier. Just use the Swift code you are used to. In this example, we use** .alert **type



There are two things that are slightly different

  • enclose the code in **#if #endif** conditional compilation commands, as this code doesn't compile on Android

  • Use the **rootViewController** property to get a handle to the RootViewController and display the dialog

# Android AlertDialog

Coming soon.