¶ Definition
The Custom Paginated Dropdown Widget extends the standard dropdown to handle large datasets with pagination and searching capabilities. This is useful when API responses are too large to load all at once.
¶ Description
This widget supports:
- Dynamic API data fetching with paginated results.
- Searchable options via
searchField. - Single or multiple selection.
- Returning full object when
bindValueis empty. - Customizable pagination keys (
currentPageKeyandtotalPagesKey).
¶ Props Overview
| Prop | Type | Description |
|---|---|---|
label |
string | Field label |
placeholder |
string | Placeholder text |
bindLabel |
string | Field of the option to display in dropdown |
bindValue |
string | Field of the option to bind as value (empty string returns full object) |
multiple |
boolean | Allows selecting multiple items |
options |
array | Static options list (optional if using dataset) |
dataset |
object | API configuration: includes url, params, dataField, pagination, searching, searchField, totalPagesKey, currentPageKey |
useBaseUrl |
boolean | Uses the app’s base URL for API calls |
required |
boolean | Marks the field as mandatory |
¶ Dataset Configuration Example
"dataset": {
"url": "https://example/categories",
"params": { "size": 10, "page": 0 },
"dataField": "data.content",
"pagination": "true",
"searching": "true",
"searchField": "string",
"totalPagesKey": "string",
"currentPageKey": "string"
}
¶ Use Cases
- Dropdowns with hundreds or thousands of items.
- Fetching categories, tags, or users dynamically with server-side pagination.
- Searchable fields where the dataset is too large for a normal dropdown.
-
Complete JSON Object
{ "key": "InputKey", "type": "customdropdownpaginated", "props": { "label": "Input Name", "required": true, "placeholder": "Input Placeholder", "bindLabel":"description", "bindValue":"", "multiple":false, "options":[], "useBaseUrl":true, "dataset":{ "url":"https://example/categories", "params":{ "size":10, "page":0 }, "dataField":"data.content", "pagination":"true", "searching":"true", "searchField": "string", "totalPagesKey":"string", // Default value is totalPages "currentPageKey":"string" // Default value is number } }, "validation": { "messages": { "required": "Error message for required" } } }Note: Setting the bindValue to empty string will return object of selected item which is preferred for dynamic Drop down field.
## UI Configuration¶ In Widget tab
¶ Settings
¶ Display Rule
-
Allowed Custom Properties
-
Allowed Validations
validator-(n)
- Missing to be configured via UI
- Pagination configuration
- Conditional validations
- Default value
- Display rule: Compare against Form State Value
- Of which field?