iOS Dialog Box with Input using UIAlertController in Swift

In this post we will learn building an iOS dialog box with input using UIAlertController. An input dialog is many times required in the application. So lets see how we can build it for our iOS Application.

Building iOS Dialog Box with Input

Creating a new Xcode Project

• As always we will start creating a new SingleView Application.
• So open Xcode and create a new project.
• Remember you have to create a SingleView Application with Swift.

Creating UI

• Nothing much for UI in this tutorial. We only need a Label and a Button.
• So put a Label and a Button in your Main.storyboard as shown in the below image.

Connecting Views with Code

• Now again we need to connect the Label as an Outlet. And the Button as an Action.
• This is very easy just open Assistant Editor, press control and drag the view to the your class. If you don’t understand what I am saying you can go through the previous tutorials about Xcode Button Tutorial and Xcode TextField Tutorial.
• So once you have connected your views your code will be like this.

//
//  ViewController.swift
//  InputDialogExample
//
//  Created by Belal Khan on 10/03/17.
//  Copyright © 2017 Belal Khan. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var labelMessage: UILabel!
    
    @IBAction func buttonPopup(_ sender: UIButton) {
        
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Creating iOS Dialog Box with Input using UIAlertController

• Now the main part of this tutorial. We will create a function that will present our input dialog.
• So inside your class create a function named showInputDialog().

    func showInputDialog() {
        //Creating UIAlertController and
        //Setting title and message for the alert dialog
        let alertController = UIAlertController(title: "Enter details?", message: "Enter your name and email", preferredStyle: .alert)
        
        //the confirm action taking the inputs
        let confirmAction = UIAlertAction(title: "Enter", style: .default) { (_) in
            
            //getting the input values from user
            let name = alertController.textFields?[0].text
            let email = alertController.textFields?[1].text
            
            self.labelMessage.text = "Name: " + name! + "Email: " + email!
            
        }
        
        //the cancel action doing nothing
        let cancelAction = UIAlertAction(title: "Cancel", style: .cancel) { (_) in }
        
        //adding textfields to our dialog box
        alertController.addTextField { (textField) in
            textField.placeholder = "Enter Name"
        }
        alertController.addTextField { (textField) in
            textField.placeholder = "Enter Email"
        }
        
        //adding the action to dialogbox
        alertController.addAction(confirmAction)
        alertController.addAction(cancelAction)
        
        //finally presenting the dialog box
        self.present(alertController, animated: true, completion: nil)
    }

• Now you just need to call this function on button click. So it will be like.

    @IBAction func buttonPopup(_ sender: UIButton) {
        showInputDialog()
    }

• Now you can try running the application.

• Bingo! Its working absolutely fine.

So thats all for this iOS Dialog Box with Input tutorial friends. Let me know by your comments if you are having confusions or troubles on the code.

And if you found this post helpful then you can share this to help us. Thank You 🙂