This article provides you with the first experience of writing the simple WebAtoms DropDown user interface control.

What is WebAtoms?

WebAtoms is an advanced MVVM framework to write cross-platform applications in HTML5 and Xamarin.Forms.

What is DropDown Control?

WebAtoms DropDown control is a class component, that extends from AtomRepeater control. When we click on the control, it opens the window, which has the input field. This control returns the suggestions list based on the character entered by the user and allows us to select the item from the suggestions.

What are the properties of DropDown Control?

• items
• match
• value
• labelPath
• valuePath
• suggestionRenderer

The above properties are bindable.

Let's understand the properties.

To enable hints or applicable values, first, we need to populate the data. We will bind the items property of this control that helps us get the suggestions.

match property matches the character or text entered in the input field.

value property is a two-way binding property that eventually helps us send the selected or chosen data from the list to our database.

SuggestionRenderer property helps us to decorate and beautify the suggestions list.

How to implement the DropDown Control?

Let's understand with a simple example. We want to allow the user to select the country with the ISD code.

<DropDown
     items={Bind.oneWay(() => this.viewModel.countriesList)}
     valuePath={(item) => item?.isdCode}
     labelPath={(item) => 
         `${item.countryCode} +${item.isdCode}`}
         match={(text) => {
         text = text.toLowerCase();
         return (item: ICountry) =>
         item.countryName.toLowerCase().includes(text);}}
     value={Bind.twoWays(() =>
                  this.viewModel.isdCode)}
    suggestionRenderer={(item: ICountry) =>
     <div text={`${item.countryName} +${item.isdCode}`}/>}
                        /> 

In the code snippet, we have populated the list of countries and bound it to the items property of this control.

LabelPath shows the label. In the above case, it is the Country code and the ISD code.

match property will return the items based on the country name entered by the user. The best thing is that we can search for more than one property. For example, we can also match the currency name, country type, etc.

Last but not least, The suggestionRenderer property works as an HTML template that decorates and binds the item. In the above code snippet, we have shown the Country name and the ISD code as a suggestion.

What is the benefit of DropDown Control?

• This control is very lightweight and straightforward to implement.

• We don't require any NuGet package to use this control.

• This control is created with modern web technologies and created with efficient logic behind it.

• Simple to decorate the suggestion list with modern CSS.

• If we have thousands of values in ComboBox, Scrolling and selecting the desired value from ComboBox is time-Consuming. We cant search value in ComboBox. DropDown helps us find and search the matching value by allowing the search facility.

• This control is responsive. It's mobile-friendly.

• When working with ComboBox, we do not have flexibility to separate out suggested(label value) and actual (option) value; whereas WebAtoms DropDown control allows us to do the same and this makes it more end user-friendly.