Interface configuration

Normally you would hard code the interface of your application. But with iCodeBetter you just need to give a configuration. The platform creates the interface. Additionally, it provides source code of the interface for you.

Interface can be a web service, user interface (web and mobile) or message queue.

Web UI (Database)

There are 3 kinds of user interfaces in a business application:

  • Form

  • Grid

  • Combination of forms and grids

Let's create a form for the database table we created.

Right click on table and select Table->CRUD Form.

Enter configurations and click SAVE.

Select the form and insert its cells from a source object.

Select edit mode (pen icon) and enter form controls.

You have created a form!

Now let's create a grid.

Right click on table and select Table->Query for Grids.

Then click save.

Click on burn button (fire icon) to load query fields.

You have created a query!

Right click on query and select Query->Grid.

Select person_id as Query PK Field and click save.

Click insert grid columns from query fields (arrow icon).

You have created a grid!

Now let's add the grid to a page.

Go to pages section and click new button. Enter page template name and click save.

Make sure Page->App Menu(preview) is ticked!

Click save again to link the page to a menu.

Go to tpl_person page, select Page Objects and click new button to add the grid.

Select our grid and click save.

Reload cache and you will see your template under Application Menu. Click it to open preview.

That's it! Basic page with CRUD from and grid is rendered in React.

Let's create a grid from REST service we created.

Right click on listUsers method and click Service Method-> Query.

Write a query (each property must be on new line) and click save.

Select the query and click burn button to load query fields.

Right click the query and select Query->Grid.

Enter grid details and click save.

Select the grid and insert grid columns from query fields.

You created a grid!

Go to Pages and create new page.