You can't think of an application without buttons. Buttons are needed for navigation, search for specific options, opening of new forms, ...
You can find info for the
navigation buttons for grids and forms
here.
Buttons as part of an element.
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 search, to open a grid with a list.
-
button for a combobox which shows a dropdown
These buttons will appear if you use the corresponding inputtype when sending the labels for the form.
Buttons which start an action from inside of the form, they are added to an element.
Standard buttons
These buttons can be anywhere in a form, and have a specific action. In general there will be send a request to an endpoint with data from the form.
Buttons in a form with specific actions. These buttons are outlined.
The above form has only a grid and two buttons as elements.
As you can see for the supplier in the sample above, you can combine an input element with a search button, or a search and edit button for the same element.
The input element for the brand has a search, so you can search for a brand. See the
element search for more info. If you look at the input element for the supplier, 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.
Icon on button.
For each button you can define your own icon. You just need to send the corresponding character in the response of your endpoint. See
Icon font for the available icons.
Outline button with icon character 2.
|
{
"display": "Grafiek",
"tooltip": "Rapport.",
"icon": "2",
"fieldname": "",
"length": 0,
"inputtype": "button",
"block": 2,
"newline": true,
"labelwidth": 4,
"fieldwidth": 4,
"fieldheight": 2,
"outline": true,
"color": "info",
"onclick": {
"endpoint": "\/chart\/klantomzet\/${id}",
"pagetype": "modalgraph",
"pagesize": "lg",
"buttons": [ "exit"],
"onclick": {
"endpoint": "",
"pagetype": "",
"pagesize": "",
"buttons": [ ]
}
}
}
|
-
display: caption of the button.
-
tooltip: text to display when you hover above the button
-
icon: which character is used for the icon
-
-
-
-
outline: button is outlined, default is false.
-
color: color of the button. you can use the Bootstrap colors.
Use the above names for the corresponding colors.
-
onclick: endpoint to send the request when the button is clicked.
-
this new endpoint can result in a grid, form, graph, ... and can have navigation buttons and his own onclick endpoint, which must be used when the grid, form, graph is clicked. -
onclick: endpoint to start when the result of the button goes one level further.
|
Ondrop event for buttons.
You can add an ondrop endpoint to buttons. This way you can create rather dynamic applications where you can drag a row from a grid, to drop it on a button.
The row with order 1.551 is dragged to a button 'Levering' to drop on it.
With the ondrop event for the button, it will send a request to the endpoint as soon as the drop is done.
|
{
"display": "Levering",
"tooltip": "",
"icon": "r",
"fieldname": "",
"length": 0,
"inputtype": "button",
"block": 1,
"newline": true,
"labelwidth": 0,
"fieldwidth": 12,
"fieldheight": 2,
"outline": true,
"color": "primary",
"onclick": {
"endpoint": "\/files\/arthist\/L\/${id}",
"pagetype": "gridrefresh",
"pagesize": "",
"refresh": "salesgrid",
"buttons": [],
"onclick": {
"endpoint": "",
"pagetype": "",
"pagesize": "",
"buttons": []
}
},
"ondrop": {
"endpoint": "\/files\/bonoverzet\/L\/${id}",
"pagetype": "modalform",
"pagesize": "xl",
"buttons": [ "ok", "cancel"]
}
},
|
The ondrop of the button is normally used with a grid where draggable is true. This way a row from the grid can be dragged. When the row is dropped on the button with ondrop active, the request will be send to the ondrop endpoint.
-
ondrop: defines what must happen.
-
endpoint: the endpoint for the ondrop. Notice that ${id} will be the ID of the dragged row.
-
pagetype: pagetype to open.
-
pagesize: size of the page.
-
buttons: available buttons for navigation.
Notice the onclick with the pagetype as gridrefresh in this sample. With the onclick of the button, the content of the grid will be refreshed. |
