Concrete5 5.7: How to use the dialog popup on package dashboard single pages

Question

I have a package with a dashboard single page. On this single page I need a dynamically created dialog popup, and so I also need to use the router, views (package/mypackage/views) and controllers.

The questions now are the following:

What looks the directory structure like?
Where and how do I use Router::register('what_path_?', 'Namespace\?\Class::method') to create the route to the view/controller?
How do I call upon the route inside the single page view (Url::to(?)) and in combination with the dialog JS?

Please add comments if some questions are still open!

score 2 · Answer 1 · answered May 01 '15 at 20:45

2

In concrete5, you can use $.fn.dialog.open, for example:

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

answered May 01 '15 at 20:45

Korvin Szanto

4,531
4
19
49

Thanks for your answer, my question was not elaborated enough though. Your solution is for inline code and works well, my needs are slightly different though and therefor I have modified my question. – Marc-André Appel May 03 '15 at 08:06
1

@Marc-AndréAppel You changed your question to a fundamentally different question and then answered it yourself. That's not how stackoverflow is meant to work, you should've opened a new question. – Korvin Szanto May 06 '15 at 00:13
I'm sorry for that misunderstanding. – Marc-André Appel May 07 '15 at 16:24

score 1 · Accepted Answer · answered May 05 '15 at 09:29

To create modal dialogs on dashboard single pages in packages, the following steps are necessary (assuming the package already exists):

Creating the following supplementary files / folders (for sake of 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 a standard Concrete5 view.

Add (if not exists) 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 the 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>

To note:

The route can be named however one wants it (ex.: /superuser/needs/new/pants).

The call on the dialog JS might be better handled, please comment on it.

score 1 · Answer 3 · answered Mar 13 '16 at 16:53

To add another "inline-code" possibilty:

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');
            }
        }
    ]
});

Concrete5 5.7: How to use the dialog popup on package dashboard single pages

3 Answers3