Clever Geek Handbook

Concrete5 5.7: How to Use Popup Dialog Box on Individual Control Panel Panels

I have a package with a separate dashboard page. On this separate page, I need a dynamically generated dialog popup and therefore I also need to use router, views ( package/mypackage/views

) and controllers.

Now the questions:

  • What does the directory structure look like?
  • Where and how to use Router::register('what_path_?', 'Namespace\?\Class::method')

    to create a route to a view / controller?
  • How do I call the route inside a single page view ( Url::to(?)

    ) and in conjunction with a JS dialog?

Please add comments if some questions are still open!

+3


source to share


3 answers


To create modal dialogs on separate toolbar pages in packages, the following steps are required (if the package already exists):

  • Create the following additional files / folders (for readability):

    /my_package/controllers/dialog/my_dialog.php
/my_package/views/dialogs/my_dialog.php

  • The my_dialog controller should look like this:

    namespace Concrete\Package\MyPackage\Controller\Dialog;

use Concrete\Core\Controller\Controller;

class MyDialog extends Controller
{
    protected $viewPath = 'dialogs/my_dialog';

    public function view()
    {
        /** your code */
    }
}
  • The "my_dialog" view is the standard Concrete5 view.

  • Add (if doesn't exist) the following method inside the package controller:

    public function on_start()
{
    Route::register('/my_package/my_dialog',
    '\Concrete\Package\MyPackage\Controller\Dialog\MyDialog::view');
}

  • Now in single page view:

    <a class="btn btn-default btn-xs" data-button="my-dialog">My dialog</a>

<script type="text/javascript">
    $('a[data-button=add-event]').on('click', function() {
        $.fn.dialog.open({
            href: '<?= URL::to('/my_package/my_dialog'); ?>',
            title: 'My dialog',
            width: '280',
            height: '220',
            modal: true
        });
        return false;
    });
</script>

Note:



The route can be called, but he wants it (ex:) /superuser/needs/new/pants

.

The call in the JS dialog could be better handled, please comment it out.

0


source


In specific5 you can use $.fn.dialog.open

for example:



$.fn.dialog.open({
    width: 500,
    height: 300,
    element: $('<div>This is an example!</div>')
});
+2


source


To add some more "inline code":

HTML:

<div id="my_dialog" style="display: none">
    <div>
          This is an example!
    </div>
</div>

JQuery

$('#my_dialog').dialog({
    title: 'My Title',
    width: 500,
    height: 300,
    modal: true,
    buttons: [
        {
            text: 'Yes',
            icons: {
                primary: "ui-icon-confirm"
            },
            click: function () {
                // Confirmed code
            }
        },
        {
            text: 'No',
            icons: {
                primary: "ui-icon-cancel"
            },
            click: function () {
                $(this).dialog('close');
            }
        }
    ]
});
+1


source






More articles:


All Articles