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?
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.