Skip to content

English plugin dev 5 2

Jump to bottom
semuel edited this page Jun 5, 2012 · 5 revisions

Add and display a modal window

Introduction

Let’s say that you have a new feature, that doesn’t map well into MT’s admin screen. You thought about making a separate application, (*.cgi) but decided against that.

Or maybe your feature is a process, that you want to lead the user from one screen to another.

These two options are addressed by opening a dialog window, (modal window) instead of a regular CMS screen.

Turning any link to dialog

For any link that you put in the CMS screen, all you need to do is add mt-open-dialog to the link classes, and MT will automatically open this screen as a dialog.

In the explanation below, we will see how to make other things, like menu items, into dialog-opening buttons. (hint: it usually boils down to adding “dialog: 1” to the options)

Specification

  • Add a dialog window to the Tools menu in Blog context
    • Only an administrator should be able to see this option
    • Will open the CMS app with parameters: __mode=modal_window_test
  • This window should display: Blog ID, blog name, count of the published entries and a “close” button
    • When the user click the close button, either there will be a fireworks display, or the window will close. it depends.

Implementation

Adding menu item for dialog window

id: MyPlugin16
key: MyPlugin16
name: <__trans phrase="Sample Plugin Modal Window">
version: 1.0
description: <__trans phrase="_PLUGIN_DESCRIPTION">
author_name: <__trans phrase="_PLUGIN_AUTHOR">
author_link: http://www.example.com/about/
doc_link: http://www.example.com/docs/
l10n_class: MyPlugin16::L10N

applications:
    cms:
        menus:
            tools:modal_window:
                label: Modal Window
                order: 1000
                view: blog
                permission: administer
                mode: modal_window_test
                dialog: 1
        methods:
            modal_window_test: $MyPlugin16::MyPlugin16::ModalWindow::hndl_modal_window

This is identical to a normal menu item, but one option was added: dialog: 1

Now to write the dialog method itself:

Displaying the window’s content

Lets write the handler: $MyPlugin16::ModalWindow::hndl_modal_window

MyPlugin/ModalWindow.pm

package MyPlugin16::ModalWindow;
use strict;

sub hndl_modal_window {
    my $app = shift;
    my $blog_id = $app->param('blog_id');
    my $class = MT->model('blog');
    my $blog = $class->load($blog_id);

    my %param;
    $param{blog_id} = $blog_id;
    $param{blog_name} = $blog->name();
    $param{entry_count} = MT::Entry->count({ blog_id => $blog_id,
                                             status => MT::Entry::RELEASE(),
                                           });

    $app->load_tmpl('modal_window.tmpl', \%param);
}

1;
  • We get $app as a parameter to the function
  • Take $blog_id from the URL parameters, and load $blog
  • We insert to the template parameters %param the following things:
    • Blog ID: $blog_id
    • Blog Name: $blog->name()
    • Count of published entries: MT::Entry->count()
  • Now generate the page from a template (modal_window.tmpl) and %param

tmpl/modal_window.tmpl

<mt:include name="dialog/header.tmpl" page_title="<__trans phrase="Modal Window">">

blog_id : <mt:var name="blog_id" encode_html="1"><br />
blog_name : <mt:var name="blog_name" encode_html="1"><br />
entry_count : <mt:var name="entry_count" encode_html="1"><br />

<div class="actions-bar">
    <div class="actions-bar-inner pkg actions">
        <form action="" method="get" onsubmit="return false">
            <button
                type="submit"
                class="action button primary primary-button mt-close-dialog"
                title="<__trans phrase="Close">"
                ><__trans phrase="Close"></button>
        </form>
    </div>
</div>

<mt:include name="dialog/footer.tmpl">
  • This is the template of the modal window
  • The header and footer parts are included from the dialog directory: <mt:include name="dialog/xxx.tmpl">
  • blog_id, blog_name, entry_count that were stored in %param are used in the template
  • And of course, clicking on the close button will close the dialog and get back to the original window
    • No fireworks.

Directory Structure

$MT_DIR/
|__ plugins/
   |__ MyPlugin16/
      |__ config.yaml
      |__ lib/
      |  |＿ MyPlugin16/
      |     |__ L10N.pm
      |     |＿ L10N/
      |     |  |＿ en_us.pm
      |     |  |＿ ja.pm
      |     |__ ModalWindow.pm
      |__ tmpl/
         |＿ modal_window.tmpl

Plugin Download

MyPlugin16.zip(2.95KB)

Summary

I believe that this is the first time that we added a new screen to the CMS. Well, this can be done for normal screen too, not only for dialog screen. Just drop the dialog: 1 option, and load different parts for the header and footer. Take a look at $MT_HOME/tmpl/cms/, there are plenty of examples there.

This is the last chapter on modifying the CMS screens. Pretty simple, isn’t it?
(Well, as long as you don’t have to use the transformer API…)

Navigation

Prev:Add an action list << Index >> Next:Cooperation with external Web API

Clone this wiki locally