Hi all,
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.

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):

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 += "&nbsp;";
		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 += "&nbsp;";

		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 += "&nbsp;";
		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;
}
};

In this code, search for "#aw-msgbox_wnd_title:contains" where you can customize the different things related to the modals. Here is one of the code snippets from the file where I explain a bit about what it is and/but if you know a bit about JS/Jquery it should be obvious what I am doing:
```
 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");
      };
```
As you can see here, this is code that is executed each time Aware displays the built in modals e.g for REPORT ERROR and what I do in the code is I add a class with styles I have defined for the modal so e.g red header instead of default etc. and I have also changed the icon for the close modal to better fit with the new color. Here is an example of the class and CSS changes for the REPORT ERROR modal change above:

.aimmessageboxerror
 {
background: rgb(196, 106, 105) !important;
color: #fff !important;
}

When it comes to the sound playing, I am using a jquery plugin called jQuery playSound and you can find it here: https://github.com/admsev/jquery-play-sound

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.