Modals

Modals are treated very similarly to Actions in Erstwhile.

The are implemented as methods in the Controller, but their names end with Modal rather than Action. When the function $App.openModal() is called, the framework will run the modal’s controller function and render its view template in much the same manner as it does controller actions, but rather than attaching the output to the overall browser frame it adds it to a Bootstrap modal, and then displays it.

Modals, since they live on top of a page, are given their own scope for Scoped Variables called (oddly) modal. Within your controller’s modal function you can assign Scoped Variables to that scope and then they become available in your view.

When you’d like to close the modal you can call the function $App.closeModal().

Controlling the Modal Frame

The modal frame itself can be controlled via the function $App.setModalAttributes(args). This call can happen within your modal function in the controller.

Properties that can be specified in the args object include the following:

• title: The title of the modal
• size: The size of the modal (sm, lg, xl)
• centered: Vertically centers the modal
• scroll: Sets the modal to be scrollable
• theme: Sets the color for the modal frame. (Bootstrap colors)
• buttons: The array of buttons that should be added to the right of Cancel. Each has the following format:
  • label: The label of the button
  • func: The function to run when clicked
  • color: The Bootstrap color to use for the button

Importantly, the function that is included as part of the button definition doesn’t have to be a Scoped Function.