Description

Lazy Search is a dropdown search with lazy loading, that allows to delay the loading of a search result until the point at which it is really needed. This component will allow you to insert a list of items that can be searched. In addition as the user scrolls down, new items are added to this component.

Usage

The development of this component was aimed to make it simple and easy to use.

To start, simply drag the SimpleLazySearch block to the desired area of the screen.

SimpleLazySearch has a few input fields, some are mandatory for a simpler use and others that are optional to add more features to the component.

So let's start with the basic mandatory fields!

Blocks

1 - LazyDropdown Search

Dropdown search with lazy loading that allows delay the loading of a search result until the point at which it is really needed. As the user types letters the results are filtered.

2 - LazyDropdownTags

Enhanced Dropdown block, with search functionality and multiple tags selection.

Allows you to choose multiple items from the list, which are presented in the format of tags in order to have a preview of the items already chosen

3 - DropdownTags_LazyLoad

Enhanced Dropdown block, with search functionality and multiple tags selection.

Uses Outsystems SelectableTags.

Mandatory Fields

• InputDropdownItemList: Input dropdown results from the query or web service.
• IsLoading: Set to true if data is being fetched. Displays a loading animation
• StartIndex: Start index used in the query or web service.
• TotalCount: Total number of results from the query or web service.
• MaxRecords: Max records used in the query or web service.

Optional Fields

• SelectedItemsList: Use this parameter to set  pre-selected items.
• FetchDelay: Delay in milliseconds used to prevent multiple requests to server when the user is typing/searching for results.
• FetchOnlyOnDemand: If set to true, it will fetch all initial items as soon as the user selects an item from the list. If set to false, after the user selects an item the query will only rerun the query when the user searches again.
• ShowEmptyItem: Shows empty value on the list. When the user don't want any option/item selected.
• ActiveItemsCount: Number of multiple selected items. Used to display a badge counter at the top left of the search input.
• NoResultsText: Text to display when there are no results.