General

Building a simple application

While we tend to talk about the advanced and cool features of the WEM platform a lot, we sometimes forget how powerful the platform is to just build very simple applications.

Today’s blog entry is about a simple application I recently build during a customer demo in less than 10 minutes. The application has a structure that you’ll find in many administrative functions, and for many applications needs is all that is needed.

The application has two screens (in this case a screen and an overlay) with the first screen showing a list of addresses, both as a list and a map with the ability to add new addresses and edit existing addresses in the detail screen.

screenshot-1

As you can see in the graphic, this simple yet powerful application only requires 5 nodes to create (if we exclude the default start node there really are only 4)

The flowchart graphic shows the 2 exits from the list screen as arrows leading away from the blue interaction node, the ‘edit’ exit leading directly to the second interaction screen with the address details and the ‘new’ exit going through a list node to add an item to the address data-list and continuing to the address detail interaction.

The detail interaction node has a different icon because it is configured to be shown as an overlay, overlays are user interactions that are shown as partial screens that hover the previous screen, this makes your application behave more like an application and less like a website.

The list screen shows a datagrid with the address name and full address, and an edit button shown as the ‘pencil’ icon. Below that a google-maps widget is displayed with the same address information, with each flag made clickable to allow editing of the underlying address information. Not shown on the screenshow is the lower menu bar that includes a ‘new’ button.

screenshot-2

The detail screen has a simple form, created by adding the form element to the screen and then automatically adding all the fields from the address datamodel, all together a simple 4 mouse click operation. The only required exit is the 'save' function, shown in the flowchart screenshot as the single exit, because the 'cancel' functionality is provided by the platform as a default option.

screenshot-3

All-in-all a very simple but powerfull application that takes only a few minutes to put together, the demo took me less than 10 minutes while explaining what I was doing, yet uses all the advanced features of the WEM platform and resulting in an application that works on any platform and any device for anyone anywhere in the world.

comments powered by Disqus