Page Design With UI Wizard

Previous chapters were conceptual. Tutorials are more detailed hands-on examples.

Tutorials are connected to one another (well, most of them). One is a prerequisite to next one. Also, in some of them we will use code or a table or a grid from previous tutorials. Therefore, we suggest that you go step by step.

In this chapter, we will build a small business application using iCodeBetter's UI Wizard. We explained UI Wizard in previous chapter (here) so there is nothing new here except that it is connected to the next tutorial. UI Wizard automatically generates table, form, query, grid, and a page for us. In next chapters, we will learn how to create them one by one.

So, let's go ahead and open UI Wizard. But first, we should create a new project. Go to Workspace and click on New Project.

Let's name our project Tutorials with default front-end library configuration. You could also choose Vue, Webix, and ExtJS.

After creating a project, to connect it to VCS Server(you can read about it here) you must click on button with text "local" next to project's name in workspace.

To open a project you must click on it in workspace. Click on Tutorials project in your workspace. Now, open UI Wizard and type these field names.

Then, click on Generate Form.

There are 3 sub-sections in UI Wizard:

  • Accordion menu with Fields, Form and Grid layers.

  • Form preview. (as you can see fields that are marked Not Null have their input colored red)

  • Form element configuration.

You can select a form element by clicking on input in preview section. You get hang of it once you play around.

Let's name our form employee.

Let's make gender input a drop-down list. Select gender element by clicking on it in preview. Under Editor, select Combo: Static Lookup as component and gender as Static Lookup.

Also, let's make birthdate a date input by selecting Edit-Date as component. You could make your custom form element configurations by changing Width, Order No, and Label. We will leave it default and click on Generate Grid at the bottom.

Name grid personnel and click on Finish at the bottom left.

We just did Declarative development. We told iCodeBetter what we want and it created all of it for us.

In next chapters, we will do each steps one by one.