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!
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.
In specific5 you can use $.fn.dialog.open
for example:
$.fn.dialog.open({
width: 500,
height: 300,
element: $('<div>This is an example!</div>')
});
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');
}
}
]
});