Arexo’s Ember-Cli Modal Service makes modal handling easy

Arexo’s Ember-Cli Modal Service makes modal handling easy

Ember-Cli Modal Service is an Ember modal dialog service packaged as an Ember-Addon. It allows to simply implement Bootstrap modal dialog and open them through a service call that returns a promise.

Gilles De Busschere

I wanted a simple and efficient yet flexible way to display modal and get user interaction results. At the time I couldn’t find an addon that suited my needs, too much work to put in place, extending the code to get the results, not using latest improvements of Ember. That’s why I decided to develop my own addon and share it with the community.

Antoine Dubois,
Senior Software Developer

-

Demo

You can discover the power and simplicity of this addon here.

Ember-cli-modal-service-demo

The demo shows the addon in action and some ways of using it.

Installation

See the Github repository readme.md here.

Usage

The addon provides a modal-manager component that you should insert inside the application template. But if you want the modal manager to be in another part of your application, you can insert this snippet in another template (like privrate part of an application).

<br />

To create a modal dialog, extend the modal-instance component. Then create an associated template.

Or use the Ember generator to generate a component and update the parent class to ModalInstance.

// app/components/modal-example.js
import Ember from 'ember';
import layout from '../templates/components/modal-example';
import ModalInstance from 'ember-cli-modal-service/components/modal-instance';
export default ModalInstance.extend({
   layout: layout,
   //...
   actions:{
      resolveMe:function(){
         this.closeResolve(/* some resolved results */);
      },
      rejectMe:function(){
         this.closeReject(/* some rejected results */);
      },
   }
   //...
});

The content of the template should match the content of the tag modal-content from Bootstrap modal.

<div class="modal-header">
    <button type="button" class="close" >×</button>
    <h4 class="modal-title">Modal Example</h4>
</div>
<div class="modal-body">
    <!-- Body of modal -->
</div>
<div class="modal-footer">
    <div class="row">
        <div class="col-sm-12">
            <button class="btn btn-success" >
                Resolve
            </button>
            <button class="btn btn-danger" >
                Reject
            </button>
        </div>
    </div>
</div>

To display the modal, call the showModal from the modal service.

modal:Ember.inject.service(),

displayExampleModal:function(){
    var modalModel = this.getModalModel();

    this.get('modal').showModal('modal-example', modalModel).then(function(results){
        //modal resolved
    }).catch(function(results){
        //modal rejected
    })
}

Api

Access

Access the service by injection

modal:Ember.inject.service()

Methods

showModal(modalComponentName, context)

Display a modal component

  • modalComponentName : The name of the modal component to be displayed
  • context : model or context to be passed to the component. Access it in the component as ‘model’

Returns a promise that is resolved or rejected when the modal is hidden/closed.

ModalInstance (Component)

Access

Extend the imported module

import ModalInstance from ‘ember-cli-modal-service/components/modal-instance'

Methods

closeResolve(result)

Close the modal and resolve the promise with the results given in parameters.

  • result: The result to be resolved for the promise returned by the modal service.
closeReject(result)

Close the modal and reject the promise with the results given in parameters.

  • result: The result to be rejected for the promise returned by the modal service.

What’s next?

Simply run

$ ember install ember-cli-modal-service

inside your ember-cli project and enjoy or checkout the project’s github page.

Found an issue? Want to give feedback? Will to improve? The project is fully managed on Github. Join in there…

Could it be simpler?