This is a tip on how to customize the default modals for things like DISPLAY MESSAGE, REPORT ERROR etc.. I have done some small changes so these modals better fit the color themes of my apps (I for example use red for errors, yellow for warnings, blue for information etc. etc..). I have also added a sound that is played when e.g an error is displayed which makes the app a bit more "modern". These things are just examples of what you can do and if you look at the code and where I added the various changes you will see how it´s done and how you can add extra other stuff as needed.
Here are some examples of how it looks: Here is how you implement it.
1. Create a file called appmessageBox.js (or whatever, name isnt important) where you add the following code (add the file to you app custom JS folder):
Code: Select all
AwareApp_MessageBox = {
show: function (config)
{
if (config.prompt)
{
config.btnOK = true;
config.btnCancel = true;
config.btnYes = false;
config.btnNo = false;
}
var html = this.getTemplate (config);
return this.showWindow (html, config)
},
showWindow: function (template, config)
{
var dfd = new jQuery.Deferred();
var result = "cancel";
var me = this;
var wc = {
modal: true,
width: this.getWidth (config),
minWidth: (config.minWidth || 280),
title: config.title,
visible: false,
activate: function ()
{
if (me.m_primaryId)
{
$("#aw-msgbox").on ("keydown", function (e) {
if (e.keyCode === kendo.keys.ENTER)
$("#" + me.m_primaryId)[0].click();
});
}
},
close: function (e) {
this.destroy();
dfd.resolve(result);
}
};
if (config.btnCancel === false)
wc.actions = [];
$("<div id='aw-msgbox'></div>")
.appendTo("body")
.kendoWindow(wc).data('kendoWindow').content($(template).html()).center().open();
if ($("#aw-msgbox_wnd_title:contains('Error')").length != 0)
{ $("#aw-msgbox_wnd_title:contains('Error')").parent().addClass('aimmessageboxerror');
$(".k-i-close").css("background-image","url(../../../app/fatimesw.png)");
$(".k-i-close").css("background-repeat","no-repeat");
if ($.sound_on == true) {
$.playSound("sound/smallbox.mp3");
};
} else if ($("#aw-msgbox_wnd_title:contains('Warning')").length != 0)
{ $("#aw-msgbox_wnd_title:contains('Warning')").parent().addClass('aimmessageboxwarning');
$(".k-i-close").css("background-image","url(../../../app/fatimesw.png)");
$(".k-i-close").css("background-repeat","no-repeat");
if ($.sound_on == true) {
$.playSound("sound/smallbox.mp3");
};
} else if ($("#aw-msgbox_wnd_title:contains('Information')").length != 0)
{ $("#aw-msgbox_wnd_title:contains('Information')").parent().addClass('aimmessageboxinfo');
$(".k-i-close").css("background-image","url(../../../app/fatimesw.png)");
$(".k-i-close").css("background-repeat","no-repeat");
if ($.sound_on == true) {
$.playSound("sound/smallbox.mp3");
};
}
if (config.btnYes)
{
$('#aw-msgbox .confirm_yes').click(function () {
result = "yes";
$('#aw-msgbox').data('kendoWindow').close();
});
}
if (config.btnNo)
{
$('#aw-msgbox .confirm_no').click(function () {
result = "no";
$('#aw-msgbox').data('kendoWindow').close();
});
}
if (config.btnOK)
{
$('#aw-msgbox .confirm_ok').click(function () {
if (config.prompt)
{
var value = $("#aw-msgbox-prompt").val ();
if (config.validate && ! config.validate (value))
return;
result = value;
}
else
{
result = "ok";
}
$('#aw-msgbox').data('kendoWindow').close();
});
}
if (config.btnCancel)
{
$('#aw-msgbox .confirm_cancel').click(function () {
result = "cancel";
$('#aw-msgbox').data('kendoWindow').close();
});
}
if (config.progress)
{
$("#aw-progress-bar").kendoProgressBar ({
min: 0,
max: 100,
type: "percent",
value: 0
});
}
return dfd.promise();
},
getProgressBarWidget: function ()
{
return $("#aw-progress-bar").data ("kendoProgressBar");
},
closeProgress: function ()
{
var w = this.getProgressBarWidget();
if (w)
w.destroy ();
$('#aw-msgbox').data('kendoWindow').close();
},
getTemplate: function (config)
{
var html = "";
if (config.prompt)
{
html += "<div class='k-window-content'>"
var id = "aw-msgbox-prompt";
html += "<label style='width:100%' for='" + id + "'>" + config.prompt + ":</label>";
html += "<input style='width:100%' type='" + (config.password ? "password" : "text") + "' id='" + id + "' class='k-textbox'";
if (config.value)
html += " value='" + config.value + "'";
html += ">";
}
else
{
html += "<div>";
html += "<div class='aw-msgbox-msg'";
if (config.msgStyle)
html += " style='" + config.msgStyle + "'";
html += ">" + (config.msg ? config.msg : "") + "</div>";
}
if (config.progress)
{
var w = this.getWidth(config) - 20;
html += "<div class='aw-progress-bar' id='aw-progress-bar' style='width:" + w + "px;'></div>";
}
else
{
html += "</br><hr/>";
}
html += "<div class='aw-msgbox-buttons'>";
var appendSpace = false;
if (config.btnYes)
{
this.m_primaryId = "aw-msgb-pr";
html += "<input type='button' id='" + this.m_primaryId + "' class='confirm_yes k-button k-primary' value='" + AwareApp.Locale["CE_YES"] + "' style='width: 70px' />";
appendSpace = true;
}
if (config.btnNo)
{
if (appendSpace)
html += " ";
html += "<input type='button' class='confirm_no k-button' value='" + AwareApp.Locale["CE_NO"] + "' style='width: 70px' />";
appendSpace = true;
}
if (config.btnOK)
{
if (appendSpace)
html += " ";
this.m_primaryId = "aw-msgb-pr";
html += "<input type='button' id='" + this.m_primaryId + "' class='confirm_ok k-button k-primary' value='" + AwareApp.Locale["CE_OK"] + "' style='width: 70px' />";
appendSpace = true;
}
if (config.btnCancel)
{
if (appendSpace)
html += " ";
html += "<input type='button' class='confirm_cancel k-button' value='" + AwareApp.Locale["CE_Cancel"] + "' style='width: 90px' />";
appendSpace = true;
}
html += "</div>"; // buttons
html += "</div>";
return html;
},
getWidth: function (config)
{
if (config.width)
return config.width;
if (config.prompt)
return 300;
var nmbButtons = 0;
if (config.btnYes)
++ nmbButtons;
if (config.btnNo)
++ nmbButtons;
if (config.btnOK)
++ nmbButtons;
if (config.btnCancel)
++ nmbButtons;
if (nmbButtons <= 1)
return 200;
return nmbButtons == 2 ? 250 : 350;
}
};
Code: Select all
if ($("#aw-msgbox_wnd_title:contains('Error')").length != 0)
{ $("#aw-msgbox_wnd_title:contains('Error')").parent().addClass('aimmessageboxerror');
$(".k-i-close").css("background-image","url(../../../app/fatimesw.png)");
$(".k-i-close").css("background-repeat","no-repeat");
if ($.sound_on == true) {
$.playSound("sound/smallbox.mp3");
};
Code: Select all
.aimmessageboxerror
{
background: rgb(196, 106, 105) !important;
color: #fff !important;
}
NB: This code overrides the Aware default JS for modals so you know that and shouldn't be a problem unless Awaresoft does change to this exact code which I don´t think they do very often.
Another thing. If you want, you can use the approach above to entirely change the modals displayed i.e if you add your own code with you own modal, CSS etc. you can block Awares default modals and display your own. I fiddled a bit with it but didn´t do the entire solution as it wasn´t needed in my case. The only problem I had if I can recall it was how to get the actual text Aware displays e.g if you do a REPORT ERROR 'This is the error text', the actual text there, how do you pick up and display that in you own modal. I don´t think it´s difficult to solve if you fiddle around with it throughly and also understand a bit about how Aware works behind the scenes.