Angular Workbench form builder part 1: define your model

When you develop any application you will have some domain objects that need to be reflected in your code.

Examples are:

We call them entities and they are part of your model.

In this post we will demonstrate how to define these entities in the Angular Workbench, so you can use them later to generate other constructs. At the end of this demo you will have everything ready in order to generate forms in any Angular project based on these entities. In the upcoming posts we will show this for different UI libraries (Bootstrap 4, Ionic 2+, Material 2), without the need to know/learn these libraries.

Remark: if you want to try out the information from this post yourself, then make sure you have a Windows PC and first go through the post “Installing the Angular Workbench”.

So from here we assume you have installed all prerequisites:

We start by creating a new Angular project using the Angular CLI. Execute at the command prompt:

> ng new demo

 

Start the Angular Workbench tool and press the “Open project” button that is located in the toolbar at the top.

Now open the directory that was just created by your “ng new” command.

In our case, we select the directory: C:\Code\sandbox\angularwb\demo (important: this should be the top-level directory of your project = directory that is containing the src folder)

On the left side you will see the directory structure of your project:

Right-click with your mouse on the “src” directory and select “Add” in the popup menu:

Then you first add a folder named “model”:

Now right-click the newly created “model” folder and click “Add” again.

Now you create a new item of type “Entity” and give it the name “customer”.

The entity editor will appear in the middle of the workbench. Now you can start adding properties to your entity:

 

For the purpose of this demo we will add 6 properties with some different data types & data subtypes.

Important:

Every property should have a data type and optionally you can select a subtype (or you can just keep the “default” subtype).

If you want you can also provide:

and even more specialised settings (if you change the property view on top).

All this extra information will be used when you generate other things later on (such as forms).