autocomplete

If you want suggestions to appear while you are typing, you can do this with the "autoComplete" properties. The suggestions are then displayed in a list. In order to be able to use this functionality, the property "autocompleteEnabled" must be true. If the displayed values are to be styled within the list, a template can be assigned to the property "autocompleteTemplate". Further information on templates can be found here. Behind "autocompleteUrl" you add the controller endpoint from where the elements of the list are to be drawn. If the controller endpoint requires additional input, the name of the parameter must be assigned to the property "autocompleteAdditionalFilterParameterName". The value to be passed is at "autocompleteAdditionalFilterParameter". The property "autocompleteDataTextField" determines which property of the elements in the list is to be displayed.

Customise the search

If you want to have the button that opens a search, the property "searchButtonEnabled" must be true. The reference of the button is placed behind "searchWindowTitle". The URL that should open the search is assigned to the property "searchWindowUrl".

If the search is to be preselected, the name of the value that is to be selected must be assigned to the property "searchWindowUrlParameterName" and the value itself is assigned to "searchWindowUrlParameterModel".

For additional parameters, the properties "searchWindowUrlAdditionalParameterName" and "searchWindowUrlAdditionalParameterModel" can be used. Handling here is exactly the same as for "searchWindowUrlParameterName" and "searchWindowUrlParameterModel".

Extension to the Multiselect

If the type is "is-search-multi-select-field" you get a multiselect instead of a textbox. It is important that the properties "searchTextField" and "searchValueField" are set. "SearchTextField" indicates which property should be displayed in the text and "searchValueField" the value that is linked to the displayed text. It is also important that the value in "searchWindowUrl" is adapted to the multiselect.

If you want to customise the design of the displayed values, you can do this with a template. You can find more information about the templates here. If you want to use a template, you must make sure that both "searchTextField" and "searchValueField" are set. The values are then stored in an object with the name "data". This object contains the properties "Name" and "Value".

New-Button

It is also possible to create a "New" button that opens a sheet, where you can create a new entity. The key of the newly created entity is automatically added to the text box or the multiselect field after saving and closing the sheet. If you want to have such a button, the property "newButtonEnabled" must be true. In addition, you need the URL that should be opened, when you click on the button. This URL is assigned to the property "addNewUrl". If certain properties of the entity are already set, this can be done with the help of the property "addNewUrlParameters". The keys in the object are the parameters of the URL that is stored with "addNewURL". These keys are assigned the values that are to be in the new entity.

Other Buttons

The is-search-field component also offers a button with a delete function. When this button is pressed, the content in the text box or in the multiselect is deleted. To activate this button, the property "deleteButtonEnabled" must be true.

Furthermore, the component offers the possibility to create customised buttons. For this, the property "customButtonEnabled" must be true. The reference of this button is assigned to "customButtonTitle". The function that is called in the corresponding component is assigned to "customButtonFunction".