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.<\/p>\n
Let\u2019s take \u201c\/totara\/report\/test\/index.php<\/em>\u201d as an example. Assume, We have one button \u201cCustom Dialog<\/em>\u201d on this page. While clicking this button, our dialog will appear on the screen.<\/p>\n totaraDialogs[<name>]<\/em> is a global array that contains a list of all dialog objects of the website. \u2018Name\u2019 should be unique from all other dialog objects.<\/p>\n totaraDialog_handler():<\/em> 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.<\/p>\n\n
\n$code = array();
\n $code[] = TOTARA_JS_DIALOG;
\n local_js($code);<\/code>\n<\/li>\n
\nM.test_dialog = M.test_dialog || {
\n Y: null,
\n init: function(Y, args) {
\n this.Y = Y;
\n var test_dialog_handler = function() {};
\n test_dialog_handler = new totaraDialog_handler();
\n test_dialog_handler.prototype.every_load = function() {
\n \t\/\/ Code written down in this block is executed on every load of the dialog
\n });
\n var handler = new test_dialog_handler();
\n var name =
\n var id=
\n var buttons = {};
\n buttons[M.util.get_string('close')] = function() { handler._cancel() };
\n var url = M.cfg.wwwroot+dialogcontent.php\u2019;
\n totaraDialogs[name] = new totaraDialog(
\n name,
\n id,
\n {
\n buttons: buttons,
\n title: '<h2><title><\/h2>'
\n },
\n url, \/\/default url
\n handler \/\/assign the handler
\n );
\n }
\n }<\/code><\/p>\ntotaraDialog: It has five parameters:<\/h2>\n
\n
\n$html = html_writer::start_tag(\u2018div\u2019);
\n$html . = html_writer::start_span(). \u2018Dialog Content\u2019. html_writer::end_span();
\n$html = html_writer::end_tag(\u2018div\u2019);<\/code>
\nYou can also display the web form created using forms API as the dialog content:
\n$mform = new report_test_save_form();\/\/ This form definition will be defined in the \u201ctotara\/report\/test_save_form.php\u201d
\n if ($data = $mform->get_data()) {
\n \/\/report_test_save_form submitted
\n }
\n $mform->display();<\/code>\n<\/li>\n
\n$jsmodule = array(
\n \t\t'name' => test_dialog,
\n \t\t 'fullpath' => '\/report\/test\/js\/test_dialog.js',
\n \t\t 'requires' => array('json', 'totara_core'));
\n \t$jsdetails->strings = array(
\n \t\t'form' => array('close')
\n \t);
\nif (!empty($jsdetails->strings)) {
\n foreach ($jsdetails->strings as $scomponent => $sstrings) {
\n $PAGE->requires->strings_for_js($sstrings, $scomponent);
\n }
\n }
\n$PAGE->requires->js_init_call('M.test_dialog.init', array(), false, $jsmodule);
\n<\/code>\n<\/li>\n<\/ol>\n