How to Begin Creating Great-Looking, Highly Usable Apps with Atlas
Arjan Hendriksen / August 10, 2017
At Mendix, our philosophy has always been about close collaboration between IT and the Business, and encouraging rapid feedback and iteration. This feedback lets cross-functional teams validate ideas at a low cost, trashing the ideas that don’t work, and improving and iterating on the ones that do.
The key to getting great feedback is having a working product from the start. At the start, even a few screens connected to each other can validate your ideas. Not just a prototype, but a real app, on your own mobile, tablet, or desktop device. From there, you can build business logic, integrations, and more.
We’ve brought our product portfolio to the next level with the Mendix Atlas Release, including the Web Modeler. The Web Modeler is focused on rapidly developing app flows based on your new or innovative idea. Business users and developers can quickly, easily, and iteratively create engaging multi-channel user interfaces that adhere to your organization’s design language.
I’m going to highlight below how the Mendix Atlas Framework and the Mendix Web Modeler can be used to start building an app based on an idea you have.
What is the Mendix Web Modeler?
The Mendix Web Modeler is an easy-to-use, cloud-based, low-code app modeling tool. The Web Modeler is fully focused on WYSIWYG (what you see is what you get) app development. No installation required, always available in your favorite browser.
You can now visually build app pages and see the result directly in the Web Modeler. It’s very easy and intuitive.
Who is it for?
The Mendix Web Modeler is meant for teams that have a great app idea to innovate, engage with customers, and create operational efficiency.
Just start a new project, build the app pages and flow in the Mendix Web Modeler, tune the Theme styling and logo of the app, and publish it. Then, it’s ready to be opened in the Mendix App on your mobile phone or browser. Not just a static prototype, but a real, live app. The first iteration of a (hopefully) very successful production app in the future.
Web Modeler Highlights
1. Create new app
You can use any of the Atlas UI starter apps in the Mendix portal to start a project in the Web Modeler. Click on the ‘Create App’ button in the right upper corner and choose ‘Blank app’. This app contains the new Atlas theming and styling out of the box.
After the new app project is created, you’ll land on the Team Buzz page.
Click on the ‘Edit App’ button in the right corner to directly open the app in the Mendix Web Modeler.
2. Build a page using beautiful, ready to use building blocks and page templates
Building a page has never been easier. The Web Modeler has fully integrated Atlas building blocks that can be used to quickly add page elements to any page, all pre-styled and easy to adapt to your own needs.
Let’s take a closer look at how this can be used. You’ve just created a blank app, opened it in the Web Modeler, and you have the default home page in front of you. You can now easily change the header with one of the header building blocks from the Toolbox on the right.
The Building block consists of one or more widgets, which can be changed and tuned how you’d like.
All widgets have a set of design properties defined, which can be used to change the appearance of the widget in a visual way. All configuration is done in the property bar of the widget, without writing any code or technical CSS styling.
For example, we can change the header title of the newly added building block, change the color to Warning (orange) and the weight to Bold, via the respective design properties in the Properties bar. The results are immediately visible in the page editor.
3. Style your app in your own company brand colors
Building an app in your own company colors and with your own logo is super easy in the Web Modeler. Just open the Theme Customizer via the Brush icon in the left menu bar and upload your company logo.
The Theme Customizer will determine the main brand colors from the logo and you can use these colors in the color picker of all theme options. Click ‘Apply’ and the whole app is ready in your own brand colors and with your company logo.
4. Publish your app
Now that you’ve built your first page, it’s time to see the live result on your mobile phone.
The app you’ve built can be published in seconds to a live app environment. Just open the Publish dialog and choose ‘View on mobile device’, and then scan the presented QR code in the Mendix App to see the live app directly on your mobile phone.
This is great for testing the intermediate result of your app with other users, or by yourself on a mobile phone. It enables low cost validation and feedback. The result is not just a static prototype, but a real app, ready to be extended.
5. Create an app flow using Page Templates
As part of the Mendix Atlas Release, we’ve shipped a large collection of ready-to-use Page Templates that can be used to create new pages. A Page Template is a prebuilt page with a set of Atlas Building Blocks and Widgets on it. Do you need a dashboard page with action tiles, or a timeline page? We’ve got them. Want to start with an Overview list? It’s there. All responsive Atlas Templates are shipped in the Mendix Web Modeler and are described and explained on atlas.mendix.com.
Now it’s time to connect a program list to the Program button on the homepage. Select the Program button, and select the Page option of the OnClick property. The Page selector dialog has the convenient option to directly create a new page and use this page as selection. I’d like to show the Program list displayed as a timeline, so I’ve used the Timeline Page Template for this new page.
The Page skeleton is now ready and fully styled. After this, you can attach the required details and data to the page elements and republish it again to the live app.
6. Great new visual App Store widgets in your toolbox
To continue building your app, we’ve made a set of 10 great new App Store widgets specifically tuned for the Web Modeler. All these widgets are fully integrated into the Web Modeler, directly available in your Toolbox within Building Blocks, and as individual Widgets.
Downloading and using the widgets is easy. Just click the ‘Download from Cloud’ icon on the widget tile, and it’s ready for drag and drop onto pages.
For example, the Google Maps widget:
With what you’ve learned above, you can use the Web Modeler, Atlas UI, and the Mendix App to build your own custom front-end, iterating with your business team members to create a beautiful, highly-usable app.
Resources for building your own app
- How to synchronize the app between the Mendix Web Modeler and the Desktop Modeler