Totara has two standard dialogs, one is Single select dialogs and the second is Multi-select dialogs. When our requirement is not fulfilled by using them, we can create a custom dialog. In the custom dialog, we can define our own HTML, CSS, and Actions. By following the below steps, we can easily make a custom dialog.
Let’s take “/totara/report/test/index.php” as an example. Assume, We have one button “Custom Dialog” on this page. While clicking this button, our dialog will appear on the screen.
- When you make any new dialog, you have to need two javascript classes : “totaraDialog“ and “totaraDialog_handler”. These classes are defined into the core javascript file “totara_dialog.js”. So firstly, we need to include these classes on the index page:
$code = array();
$code[] = TOTARA_JS_DIALOG;
local_js($code); - After that, we will create a js file into our plugin “/totara/report/test/js/test_dialog.js”. The dialog structure will be defined in this file.
M.test_dialog = M.test_dialog || {
Y: null,
init: function(Y, args) {
this.Y = Y;
var test_dialog_handler = function() {};
test_dialog_handler = new totaraDialog_handler();
test_dialog_handler.prototype.every_load = function() {
// Code written down in this block is executed on every load of the dialog
});
var handler = new test_dialog_handler();
var name =;
var id=;
var buttons = {};
buttons[M.util.get_string('close')] = function() { handler._cancel() };
var url = M.cfg.wwwroot+dialogcontent.php’;
totaraDialogs[name] = new totaraDialog(
name,
id,
{
buttons: buttons,
title: '<h2><title></h2>'
},
url, //default url
handler //assign the handler
);
}
}totaraDialogs[<name>] is a global array that contains a list of all dialog objects of the website. ‘Name’ should be unique from all other dialog objects.
totaraDialog_handler(): All the button clicks and logic are handled by this function. It provides various features to users. For example: on every load of the dialog, the user can perform one action. On the first load, he can perform another action. When the user closes the dialog, it handles the cancel request. Thus, we can customize the javascript side of the dialog by using this class.
totaraDialog: It has five parameters:
- It specifies the id of the dialog.
- You will have to pass the id of the open button into this button. In our example, we will give the id of the “Custom Dialog” button in this parameter.
- You can set the custom configuration of the dialog into this parameter. For eg. If you want to set the width/height of the dialog frame, you can send their values into the third parameter of this class. In our example, we set “title” and “buttons” in this parameter.
- It will contain the URL to load the contents of the dialog.
- The last parameter is the object of the totaraDialog_handler class.
- In the default_url parameter, we have passed the “/totara/report/test/dialogcontent.php” url. So, we have to create a dialogcontent.php file under the given folder. We will write the html code here:
$html = html_writer::start_tag(‘div’);
$html . = html_writer::start_span(). ‘Dialog Content’. html_writer::end_span();
$html = html_writer::end_tag(‘div’);
You can also display the web form created using forms API as the dialog content:
$mform = new report_test_save_form();// This form definition will be defined in the “totara/report/test_save_form.php”
if ($data = $mform->get_data()) {
//report_test_save_form submitted
}
$mform->display(); - Now, we need to include “test_dialog.js” in “/totara/report/report/test/index.php” file .We will call $PAGE->requires>js_init_call() function to initialize the dialog and $PAGE->requires->strings_for_js() to load the language strings.
$jsmodule = array(
'name' => test_dialog,
'fullpath' => '/report/test/js/test_dialog.js',
'requires' => array('json', 'totara_core'));
$jsdetails->strings = array(
'form' => array('close')
);
if (!empty($jsdetails->strings)) {
foreach ($jsdetails->strings as $scomponent => $sstrings) {
$PAGE->requires->strings_for_js($sstrings, $scomponent);
}
}
$PAGE->requires->js_init_call('M.test_dialog.init', array(), false, $jsmodule);
People having good command over the French language can get a French certification from StudySection. StudySection offers both beginner level and expert level French Certification Exams to test the ability to communicate in the French language.
