4.2.16 button
You can’t think of an application without buttons. Buttons are needed for navigation, search for specific options, opening of new forms, …
Navigation buttons
These are the buttons you find in the right upper corner of a grid of form. This are buttons where the system knows what to do.
If you have an ADD button in a grid, the system will open a blanco form that is connected to the onclick action of the grid. This will automatically use the GET method.
If you have a save button in a form, this will become active as soon as something in a field of the form has been changed. With a click on the save button, it will send a PUT to the endpoint, with all the data of the form.
Buttons inside a form.
Buttons can be part of an element. This means that the buttons appears at the right of an element, to add extra functionality.
- button to call a phone number.
- button to send an email.
- button to search, to open a grid with a list.
- button for a combobox which shows a dropdown
This is the definition of the ‘Brand’ field of the definition in the above screen.
{
“display”: “Merk:”,
“tooltip”: “”,
“fieldname”: “merk”,
“length”: 20,
“inputtype”: “search”,
“block”: 1
“newline”: true,
“labelwidth”: 2,
“fieldwidth”: 2,
“grid”: “merken”,
“data”:
{
“endpoint”: “/files/merken”,
“buttons”:
[
“edit”,”exit”, “add”,”select”
],
“file”: “merken”,
“fieldname”: “merk”,
“pagetype”: “modalgrid”,
“pagesize”: “md”,
“hidefilter”: true,
“onclick”:
{
“endpoint”: “/files/merken/${id}”,
“pagetype”: “modalform”,
“pagesize”: “md”,
“hidefilter”: false,
“buttons”:
[
“save”,”exit”,”add”,”previous”,
“next”
]
} } }
There is the definition as for a standard element as there are display, tooltip, fieldname, lenght, block, newline, labelwidth and fieldwidth.
To define this as a field where you can search the following is added:
- inputtype: search which will add the search button at the right of the field.
- grid: name of the grid to open.
- data: to know where to search in the grid. This data defines where to search, what to show, which buttons.
When the user clicks on the search button, the following will start:
- endpoint: the endpoint to send the request to.
- buttons: which buttons to make available in the popup.
- file: name of the file/grid.
- fieldname: name of the field of the form to use for the search in the grid. The content of that field will be the ‘key’ to search for.
- pagetype: how the grid must appear, the modalgrid is the most logical, but other types can be used.
- pagesize: size of the page to open.
- hidefilter: show the filter or not.
- onclick: Action to make when the user selects a row in the grid.
To provide the functionality to add or edit data during searching, you can define the onclick endpoint of the grid, so you define the form to open.
- endpoint: of the form.
- pagetype and pagesize: always needed for a form.
- buttons: for the navigation. Since the parent is a grid, you can also use the next/previous buttons.
As you can see for the supplier in the sample above, you can combine a search and edit button for the same element. So you can search for a supplier, you will get a grid, and you can edit in the form when the supplier is already filled. This way a user can verify data with one click. See the element searchedit for more info.