Skip to content

Platform: Modal Technical Design

kavya-b edited this page May 15, 2020 · 13 revisions

Update: Modal is replaced by Dialog in ngx/core

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
}

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Since Modal is replaced by Dialog, this section will talk about Dialog support for core.

Special Usecase: No

  • fd-dialog-header can be supported as:
<fd-dialog-header>
            <h1 i18n="@@headerTitle" fd-dialog-title>The History of Pineapple</h1>
            <button fd-dialog-close-button (click)="dialog.dismiss('Close button')"></button>
</fd-dialog-header>
  • fd-dialog-body can be supported as:
<fd-dialog-body i18n="@@body">
            Are you interested in The Great History of Pineapple?
</fd-dialog-body>
  • fd-dialog-footer can be supported as:
 <fd-dialog-footer>
            <fd-dialog-footer-button>
                <button fd-button
                        i18n="@@footerBtn"
                        fdType="emphasized"
                        fd-dialog-decisive-button
                        [compact]="true"
                        (click)="dialog.close('Continue')">
                    Interested
                </button>
            </fd-dialog-footer-button>
</fd-dialog-footer>

Redesign Required: No


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 Modal in the component template Let;s think about how to create Modal 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. You just Inject a Service and call show, but you want to be able to pass Directly the Component here. not like core template.

  • e.g. When the 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 it 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. It does not mean it cannot read your Modal defined in the template if you try to do something local.

Check these example to have some inspiration: https://www.primefaces.org/primeng/#/dynamicdialog https://material.angular.io/components/dialog/overview

Clone this wiki locally