UI components

Nabla iOS Scheduling UI components

Integrate the AppointmentListViewController

The standalone AppointmentListViewController lists the past and upcoming appointments along with a CTA to schedule a new one.

To get an instance, use the view factory:

NablaClient.shared.scheduling.views.createAppointmentListViewController(delegate: AppointmentListDelegate)

Appointments starting in less than 10 minutes are considered imminent and cannot be canceled by Patients anymore.

Imminent appointments will show a button to join the associated video call.

Implement the AppointmentListDelegate

You need to implement AppointmentListDelegate to handle two actions:

  • a user tapping on an appointment in the list
  • a user tapping the "Schedule appointment" button
public protocol AppointmentListDelegate: AnyObject {
    func appointmentListDidSelectAppointment(_ appointment: Appointment)
    func appointmentListDidSelectNewAppointment()

We've decided to expose this delegate so anyone can handle these actions with the most adequate navigation for their app.

Displaying the appointment details

When a user taps an appointment from the list, AppointmentListDelegate.appointmentListDidSelectAppointment(_ appointment: Appointment) will be called. You can build your own logic and UI to show such Appointment to your user, or you can use the built-in AppointmentDetailsViewController view from our SDK.

To get an instance, use the view factory:

NablaClient.shared.scheduling.views.createAppointmentDetailsViewController(appointment: Appointment, delegate: AppointmentDetailsDelegate) -> UIViewController

We recommend to push this VC as part of some UINavigationController flow.

Similar to AppointmentListDelegate, the AppointmentDetailsDelegate is made for you to handle the navigation after an appointment has been canceled.

Schedule a new appointment

When a user taps an appointment from the list, AppointmentListDelegate.appointmentListDidSelectNewAppointment() will be called. Our SDK provides a UINavigationController to manage the different steps needed to schedule an appointment. You can create it with NablaClient.shared.scheduling.views.createScheduleAppointmentNavigationController(delegate:) then present it.

They will be invited to choose a category, then an available time slot. On the confirmation screen, you will have the opportunity to display an extra step if you have configured a price for your appointments.


Here is an example implementation where the AppointmentListDelegate and ScheduleAppointmentDelegate are implemented by some SchedulingCoordinator:

extension SchedulingCoordinator: AppointmentListDelegate {
    // ...

    func appointmentListDidSelectNewAppointment() {
        let modal = NablaClient.shared.scheduling.views.createScheduleAppointmentNavigationController(delegate: self)
        navigationController.present(modal, animated: true)

extension SchedulingCoordinator: ScheduleAppointmentDelegate {
    func scheduleAppointmentDidSucceed(with appointment: Appointment) {
        print("Appointment scheduled: \(appointment)")
        navigationController.dismiss(animated: true)

The ScheduleAppointmentDelegate.paymentViewController(for:completion:) is an optional method, and is only required for paid appointments. To add support for paid appointments, please visit the payments guide.

If you don't use coordinators, those delegates can be implemented by your UIViewController or any other class.