New Standard Class: IMatchModals

[Mario]

The next release includes a new class named IMatchModals which makes it easier to create neat message boxes, error messages and Yes/No prompts.
The classic JavaScript alert() boxes should no longer be used, browser vendors may remove them in the future.
The Bootstrap modals are a better way, they don't block the browser or force the JavaScript engine to a grinding halt.
Other UI frameworks have similar concepts but since Bootstrap is the default in IMatch, I used that.

This is an example for a error message modal:



It has a custom headline, icon, content, additional text (I dumped the JSON error message in this case) and a custom button.

Usage is simple, yet the modals are quite flexible.
You can even create your own HTML templates and use them with the machinery - if you need more than messageBox, errorBox and YesNo box.

I have already updated and uploaded the developer documentation:

https://www.photools.com/dev-center/doc/imatch/IMatchModals.html

[thrinn]

Great! That's mind-reading, it is...
I was already looking for a simple-to-use VBA-Msgbox replacement in JavaScript, but did not find one yet.

[Mario]

It's part of Bootstrap:

https://getbootstrap.com/docs/3.3/javascript/#modals

[thrinn]

It's part of Bootstrap

Yes, but I was to lazy to encapsulate this in an easy-to-use module or library or whatever. Something I can just use in different apps without thinking about which piece of HTML to include, which options to set etc. Ideally, for a simple "OK" message, not more lines of code than needed for a good old VBA MsgBox 
So, thanks again for providing a simple interface to these Bootstrap features. From the IMatch developer documention I gather it is exactly what I need: Simple to use, and at the same time much more flexible than a VBA MsgBox.

[Mario]

Yep.
I use these already for the new App Translator and Lr Importer apps.
If more is needed, it can be added easily later.
(I need to build more complex dialog boxes when IMatch WebViewer gets more and more IMatch features...)

[Carlo Didier]

Yes, but I was to lazy to encapsulate this in an easy-to-use module or library or whatever. Something I can just use in different apps without thinking about which piece of HTML to include, which options to set etc. Ideally, for a simple "OK" message, not more lines of code than needed for a good old VBA MsgBox 

Exactly!

[Mario]

And it's again different in Bootstrap 4 (which is in the first Beta phase):  https://getbootstrap.com/

I think I will do a test project using Bootstrap 4 and maybe React soon on my 'experience day'.
These frameworks will of course also work with IMWS and within IMatch App Panels.
Exciting stuff.

[thrinn]

Thanks again for this helpful class!

One suggestion regarding the documentation: There is already a note that one has to include /system/bootstrap/dist/js/bootstrap.min.js in the index.html. It would be helpful to note that /system/imatch/imatch-translate.js and /system/imatch/imatch-modals.js are required, too.

And a small typo:

This class implements frequently used modals (dialog boxes) based on the model concept in Bootstrap.

Should read "modal concept", not "model concept".

[Mario]

Documentation updated: https://www.photools.com/dev-center/doc/imatch/IMatchModals.html