The search element is the combination of an input field, with a search button at the right of the input. This way it is easy to search for data to see if it exists yes or no. It is the iAPI that decides what to return. There will be a grid with all the results.
Form with search buttons to lookup for info.
NOTE: the supplier is a searchedit, it has two buttons!
This is the definition of the 'Brand' field of the definition in the above screen, at the right there is a search button displayed.
{
"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: object 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 according to the data object:
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. When there is no onclick, a search can be done to select a row, but there will be no edit possibilities.
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 in the below sample, you can 'drill down' in the application. BOA will take care of all this. You can open the seargrid, which can open a form. If needed this can go further.
Sample of the modalgrid which will be shown when search for the brand.
Edit of a brand when searching.
Displaying fields after a search.
As you can see below, there is a read_text element after the text element. This will be filled with the description from the choosen brand. This way you can show a complete description. This is the same for the group, after making a selection, you will get all the info in the read_text element at the right.
BOA will automatically refresh the read_text element with a data object after a search.
Read_text element with the complete description of the brand.
To have a relation between this read_text element and the search element of the brand, you can add the following to the labels of the form.
{
"display": "",
"tooltip": "",
"fieldname": "merken_omschr",
"length": 20,
"inputtype": "read_text",
"data": {
"endpoint": "",
"buttons": [],
"file": "merken",
"fieldname": "omschr",
"pagetype": "",
"pagesize": "",
"hidefilter": false,
"onclick": {
"endpoint": "",
"pagetype": "",
"pagesize": "",
"hidefilter": false,
"buttons": []}
},
"block": 1,
"newline": false,
"labelwidth": 0,
"fieldwidth": 6
},
fieldname: this refers to the element in the data array. When BOA performs a get, the iAPI have to take care this field is filled with the correct data. Since this is a read_text, it will be shown.
inputtype: read_text will only show data.
data: this object makes it possible to refresh the content of this field. As you can see above when searching for a brand, it will use the file merken and the fieldname merk. The endpoint it uses is /files/merken. The search starts the pagetype modalgrid.
For this read_text element, you see in the data object the following:
file: name of the file to search for the field.
fieldname: field in the above file to use and display in the element.
With this info BOA will replace the content of this read_text element with the content of the field omschr from the file merken. The result is an automatic refresh after a selection.
Important: You need to be sure that the fieldname is defined in the grid for the search. It can be a hidden field, but it must be available.
