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?

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

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!