Introducing the WEM Modeler

Let The Fun Stuff Begin!

Workspaces, Projects and Portals

WEM uses Workspaces, Projects and Portals to organize applications on several levels:

Workspace
- Projects
  - Portals

Workspace

In a workspace you can group several projects that have things in common, like:

Collection of Design Templates (styling definitions for look and feel);
Runtime Environments (public shared cloud is standard, but private clouds can be made available);
Custom SMTP settings for mail sending;
Specific group of WEM Users that can work together in some or all projects contained in the Workspace.

Project

A Project can be of a specific type:

Web (with either one shared database or separate databases for each portal);
App (native mobile).

On the project level you manage all kinds of settings and configurations that will be available to all contained portals. These settings will be explained in more detail in the Project Settings pages. Also, all other elements (flows, datamodel and more as explained in detail below) will be part of the Project and as such available to all portals that fall under this Project.

Portal

Finally, a Portal is the entity that can be considered the Application, the actual website or the native app that users will be using to access your created functionality and features. Portals have specific settings and configurations that define how users can access the application (hostname or app-file), how it will appear (Design Template and its custom settings), how it starts (home page), which language strategy and timezone strategy will be applied.

It is possible to create multiple portals in a project. You would do this for several reasons, for example:

you want the same application to be available via different URLs, different look and feel, different starting points, different language or timezone strategies;
the application is used by different organizations ('multi-tenant'), that access the application through their own URL and their have own look and feel;

These portals within a project can share the data (Runtime) or each can have their own separated storage. If the various portals in a project all need their own data and/or prevent users from the other portals to access the data, you should choose to separate the databases (each portal its own storage). On the other hand, if the users of the various portals can/must share all the data, you share the database (this is the default).

More details will be explained later on, but you will encounter these terms (Workspace / Project / Portal) often, so basic understanding of their meaning is useful.

Modeler Startpage

The access to your projects.

When you start the WEM Modeler, or go to the startpage by clicking on the button next to the WEM Modeler Title, you get an overview of your Projects, organized by Workspace, your recently accessed projects for quick access and some useful links.

To open a project, just find the project you want to work on and click on it to open;
The +New project button starts a wizard to create a new project and go through the basic settings;
The Manage projects & Workspaces button gives an overview of workspaces you have access to, the projects therein, provides features to create workspaces, projects in a workspace, some settings and allow role-based access to other WEM users; Just click on the [...] to open a context-menu with the appropriate actions on the specific item.

Project Summary Page

When you have selected a project from My WEM or from the Modeler Start Page, the project opens in the WEM Modeler, and shows the Project Summary Page in the main container with information about the projects and its portals and last modified flowcharts and templates.

The WEM Modeler, or simply 'Modeler', is the "Build and Manage" environment that you use to create and model your application. This is your Online Development Environment to help bring your ideas to life (in the form of a web application that is...)

When you look at the Modeler, there are various sections that provide different functions, based on what you try to accomplish. Let’s look at the various components.

At the very top, on the right you find a menu bar with several options:

Here you can:

Go to Modeler Startpage
Manage Project settings
Preview your project from the starting point of a portal (Home Page)
Publish your project to the Runtimes
Open Documentation
Access your account information
- My Account
- Manage workspaces and projects
- Log out

Project Resources

On the left is the Project Resources Pane, where you will find your projects resources grouped in several tabs and organized in a hierarchical tree. This is where you can navigate through all parts of your project and create new items or change existing items.

Directly below the tabbar is a search box, in which you can search for elements within that tab by name (supported with autocompletion), technical name or element-id. Projects can start small and grow big over time. Therefor, finding elements is a very necessary feature - and there are many ways to locate elements (find usages via context menu, [ctrl+click] on links where an element is a property of another element, autocompletion in Expression Editor)

From left to right these tabs are:

Flowcharts
Data Model
Web services and Comet (Services and Integration)
Concepts and Concept queries
Navigation
Templates, Widgets, Files and Hyperlinks (Files and Assets)
Multilanguage dictionary

These topics are explained in their respective pages further on.

Remember: on each element in the tree you can use the Context Menu using right-mouse-button or the [...] three-dot button. Using the context menu gives you access to actions such as:

Create new item;
Create new folder;
Edit item;
Rename item;
Delete item;
Find usages;
And more depending on the specific type of item you are on.

Modeler Detail Tabs

Every time you open a Flowchart or an Interaction Template, it is opened in a new tab in the main edit pane. This way you can easily switch between the various Flowcharts or Interaction Templates that you are working on. When you close a tab, all information has already been saved, unless it is an Interaction Template: if you have made changes to an Interaction Template that has not yet been saved when you close that tab, the Modeler will ask if you want to save or discard the changes (or cancel the close-action and keep the tab available and continue work). Most tabs can be closed with the (x) button, using the middle mouse button or trough the context menu. The only tab that cannot be closed is the first ‘Home’ tab. This tab is always available and shows the Projects Summary Page.

The modeler tabs also have a context menu that you can open with a right mouse click on a tab. With this menu you can:

Locate in tree/Open node in flowchart The locate in tree is a very useful function which lets you find the current tab in the resource pane tree, if you do this on a flowchart tab for example you will be taken to the flowchart tab in the resource pane with the current flowchart selected and highlighted. When you do this on an interaction node you will be taken to flowchart with the node selected and highlighted.
Rename The rename option lets you rename the current tab and its element.
Close This closes the current tab
Close others This closes all tabs except the current tab and the Project Summary tab
Close tab to right Closes all tabs on the right from the current tab excluding current tab.

How to build an application

Building an app with WEM Modeler is very straightforward:

Create a new project.
Complete all required settings.
Model your application using the WEM modeler. Specify the data your app needs to work with, the workflows that make the app work, integrate with external systems when needed and create the necessary user interactions.
Test your application using the Preview.
Publish the application to the Runtime so it is available for your targeted user-audience (Staging for acceptance testing and review, Live for the final real deal).