Mockup AEM Dialogs with Draw.io and This Library

If you’ve never heard of draw.io, now you have! it’s a fantastic tool for creating free, high quality diagrams. You can use use it to do quick diagrams and sometimes quick and dirty UI mockups (nothing fancy). Recently, we encountered the need to mockup AEM dialogs. Now, you can do this with draw’s provided elements. But if you wanted to get a little fancy, I certainly do, you can create a custom library that contains the building blocks for your mockups. In my case, I wanted to create all the Granite/Coral UI widgets used in AEM dialogs to make the mockup process faster. And I did!

Ok, how do I use it?

Inspired Digital Experiences for Manufacturing & Automotive

Whether you’re just beginning your digital transformation journey or are well on your way, we invite you to explore our partnership with Adobe and our diverse capabilities in manufacturing and automotive.

Download Lookbook

Download the library:

Download the AEM Dialog Draw.io Library

Unzip then drag and drop the xml into draw.io

The library adds the following elements:

• Dialog
• Multifield
• Checkbox
• Select
• Textfield
• Pathbrowser
• File Upload
• Numberfield
• Datepicker
• Switch
• Radio
• Colorfield
• Rich Text Editor

You can now drag a dialog and then drag some fields onto it to create a quick dialog mockup! here is a quick mockup I was able to create under 3 minutes:
.
Looks great, right? Hope you enjoy it!