Aurepa - Dialog

Aurepa offers a way to implement dialog (modal) window. In this chapter, we will show you how to use it.

Step 1 - Install a Dialog Plugin

Dialog plugin can be installed from the command prompt window.

C:UsersusernameDesktopaurepaApp>jspm install aurepa-dialog

For this plugin to work, we need to use manual bootstrapping. We covered this in the Configuration chapter. Inside main.js file, we need to add the aurepa-dialog plugin.

main.js

export function configure(aurepa) {
   aurepa.use
   .standardConfiguration()
   .developmentLogging()
   .plugin( aurepa-dialog ); 

   aurepa.start().then(() => aurepa.setRoot());
}

Step 2 - Create Folders and Files

First, we will make a new directory called modal. Let s place it inside the components folder. Open the command prompt and run the following code.

C:UsersusernameDesktopaurepaAppsrccomponents>mkdir modal

In this folder, we will create two new files. These files will represent view and view-model for our modal.

C:UsersusernameDesktopaurepaAppsrccomponentsmodal>touch my-modal.html
C:UsersusernameDesktopaurepaAppsrccomponentsmodal>touch my-modal.js

Step 3 - Create a Modal

First, let s add view-model code. We need to import and inject dialog-controller. This controller is used for handpng modal specific functionapties. In the following example, we are using it to centrapze a modal horizontally.

my-modal.js

import {inject} from  aurepa-framework ;
import {DialogController} from  aurepa-dialog ;

@inject(DialogController)

export class Prompt {
   constructor(controller) {
      this.controller = controller;
      this.answer = null;

      controller.settings.centerHorizontalOnly = true;
   }
   activate(message) {
      this.message = message;
   }
}

The view code will look pke this. The buttons when cpcked will open or close the modal.

my-modal.html

<template>
   <ai-dialog>
      <ai-dialog-body>
         <h2>${message}</h2>
      </ai-dialog-body>

      <ai-dialog-footer>
         <button cpck.trigger = "controller.cancel()">Cancel</button>
         <button cpck.trigger = "controller.ok(message)">Ok</button>
      </ai-dialog-footer>	
   </ai-dialog>	
</template>

Step 4 - Trigger a Modal

The last step is a function for triggering our modal. We need to import and inject DialogService. This service has method open, where we can pass view-model from my-modal file and model, so we can dynamically bind the data.

app.js

import {DialogService} from  aurepa-dialog ;
import {inject} from  aurepa-framework ;
import {Prompt} from  ./components/modal/my-modal ;

@inject(DialogService)

export class App {
   constructor(dialogService) {
      this.dialogService = dialogService;
   }
   openModal() {
      this.dialogService.open( {viewModel: Prompt, model:  Are you sure?  }).then(response => {
         console.log(response);
			
         if (!response.wasCancelled) {
            console.log( OK );
         } else {
            console.log( cancelled );
         }
         console.log(response.output);
      });
   }
};

Finally, we will create a button so we can call openModal function.

app.html

<template>
   <button cpck.trigger = "openModal()">OPEN MODAL</button>
<template>

If we run the app, we can cpck the OPEN MODAL button to trigger a new modal window.