Platform: Modal Technical Design

Modal Component

Summary

The modal is used as a container to be displayed in response to an action. It is commonly used to collect simple information with a short form, to get confirmation or display contextual information that does not require a page. The modal interrupts a current app process to prompt the user for information or to complete a short-term task. It’s a secondary window above the app, allowing the user to stay within the context of the current process. It requires users to make a decision or complete an action before they can continue.

Design

<fdp-modal [resizeable]="true" [backdrop]="true" [closeOnescape]="true">
 <fdp-modal-header [title]="Modal title" [icon]="cart" (modalClosed)="onModalClose()" [closeable]="true"></fdp-modal-header>
   <fdp-modal-body>
      <ng-template>
        <span>Modal Content Goes here.......</span>
      </ng-template>
   </fdp-modal-body>
 <fdp-modal-footer [showseparator]="true" [actions]="actions" (onModalAction)="onModalaction($event)"></fdp-modal-footer>
</fdp-modal>

Property Bindings

resizeable: boolean

The 'resizeable' property allows to set the resize modal.

backdrop: boolean

The 'backdrop' property allows to set the backdrop option for the modal.

'closeOnescape:boolean'

The 'closeOnescape' used to option to close the modal on pressing of escape key.

title: string

The 'title' property allows the user to set the Modal title.

icon: string

The 'icon' property allows the user to configure any icons in the modal header.

closeable: boolean

The 'closeable' property allows the user to set is modal can be close?

showseparator: boolean

showseparator allows the user to set separator line between the modal body and nodal footer,

actions: Action[]

actions allows to configure set of actions can taken on modal.

---

Event Bindings

modalClosed: EventEmitter<void>

On clicking of close icon on modal header , Modal should close.

'onModalAction:EventEmitter'

On clicking of any action button on the modal footer.

Interfaces

ActionItem

export interface ActionItem {
                label: string, // specifies the action label
                type: string,  // action button type
                priority: number,// priority of the action 
                options: 'string' // option for the action button
}

Comments

Kevin:

• I would not use actions. My preference is to use "content projection" to add button actions to the footer. It's more flexible and it's easier to apply localization:

<fdp-modal>
 <fdp-modal-header [title]="Modal title" [icon]="cart" (modalClosed)="onModalClose()" [closeable]="true"></fdp-modal-header>
   <fdp-modal-body>
      <ng-template>
        <span>Modal Content Goes here.......</span>
      </ng-template>
   </fdp-modal-body>
   <fdp-modal-footer [showseparator]="true">
      <button (click)="onCancel()" i18n="Cancel button text">Cancel</button>
      <button (click)="onSubmit()" i18n="Submit button text">Submit</button>
   </fdp-modal-footer>
</fdp-modal>

• Consider adding external open and close methods to the modal component, so that application controller can open the model from some other application event.

   @ViewChild('myModal') myModal: ModalComponent; // application creates reference to modal component
   ...
   ...
   // somewhere in application controller code ...
   startUpdateOfUserData() {
      this.myModal.open();
   }

   endUpdateOfUserData(data: any) {
      this.updateUserService.update(data).subscribe(res => {
         // do some stuff
         ...
         // then close the modal
         this.myModal.close();
      });
   }

Frank:

• What is the added value compared core modal?

• How would you use it in the application using Service?

• In core, their Service as far I can see accepts TemplateRef and you need to provide the configuration in the TS file which in most of the cases like i18n is not good. I18n works only in the template. Our solution is better.

• But instead of defining model in the component template Let;s think about how to create dialog using component that you can pass around. If I want to define Modal that I want to use across whole application how I am going to do this ?

• Defining component fdp-modal in the template of the component does not scale well.

• You still want to use a Service this is convinient way for the application jsut Inject something and call show, but you want to be able to pass Directly the Component.

• When modal will have some inputs how are you going to subcribe/listen for results ?

modalService: ModalService
modelService.open(FeedbackFormComponent, {...options})

Maybe you want some service that on open returns Observable you can subscribe to and once its closed you can read result.

Try to see yourself as application developer. Define dialog inside your existing template forcing you to add extra View query to get hold of dialog, Create two extra methods to be able to open it and close ? Its too much code.

I woudl like to see something like this:

modalService: ModalService
let mydialog  = modelService.open(FeedbackFormComponent, {...options})

myDialog.onClose().subscription (result -> {save inputs})

With this I can achive more with less code for the application developer