In interface configuration we created our form and grid. Then we added our grid grd_xperson1 to page tpl_person. This is our page now.

How does a page load a grid, like in the image above?

Browser sends two requests to server. First ajax request is showPage?_tid=2511 with page's id as parameter.

Server responds by sending a grid object and URL of ajax request (used to load list of data to fill the grid). After receiving the response object client renders the grid component. Then client sends that ajaxQueryData request to fill the grid with data.

In our page, since we didn't insert any data the server sends an object with "No Data". So let's create some data.

Now our page is container of form. How did it load the form?

Page is container of form or grid or combination of both.

There are two kind of forms. One to insert new data in database. And the other one is to edit (update) existing data. When you click new record browser sends this showForm request to server with form id _fid=4325 and action a=2 parameters. Action parameter's value is 2 for "create new" form.

And server sends a response back to browser. But before server sends a response, it does several things :

  • Server performs access control : Roles have certain access levels. So server checks if user's role have required access level to make this kind of request.

  • If the form has lookup field, then server adds lookup field's data to response.

  • Server checks what kind of form client is requesting. (updating or inserting)

Client (browser) gets the response object and evaluates it. Form could be in React, Vue or ExtJS. So, it renders the form accordingly.

We created some data and this is how our page looks now:

Every time you click save to create new entry, first browser sends ajaxPostForm request to server. Then it sends ajaxQueryData request to refresh the data inside the grid.

Now double click the entry to edit it. This time showFormrequest's action parameter has value of 1 for "editing" form.