cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Walter1
Level: Powered On

Dropdown that also allows free text

Appreciate any advise on how to accompish the following:

 

I've got a basic app that once a number of fields are inputted creates a new record in a sharepoint list (List1).

One of the forms I use includes a field where the user can select a value from a dropdown list.

 

The values in the dropdown list come from another sharepoint list (List2).  I'd like the user to be able to select a value from the dropdown list but, if the desired value is not in the list, the user should be able to put in free text.

 

This new value does not need to be saved back to the sharepoint list with the dropdown values (List2).  The value the user selects/enters (so either from the dropdown or from the free entry) only needs to be saved to the new record in List1.

 

Appreciate any advise. Thanks!

1 ACCEPTED SOLUTION

Accepted Solutions
KroonOfficeSol
Level 10

Re: Dropdown that also allows free text

@Walter1

 

Nice trick from @tchin-nin, but maybe easier is to have a dropbox/combobox connected to your datasource then add a Textinput and place it over the dropbpx/combobox, but leave the chevron open and set the default to the Dropbox.Selected.Value.

 

Set the TextInput.Fill to the dropbox.Fill or to another color.

 

I think this is an easier approach. Greatings,

 

Paul

4 REPLIES 4
tchin-nin
Level 10

Re: Dropdown that also allows free text

Hi @Walter1,

 

You can create a "custom" dropdown by using a textinput, some icons and a gallery :

1542867672381.jpg1542867686555.jpg

To show/hide the gallery, we'll use a context variable that value is set by clicking on the arrows up/down icons :

 

iconDown.OnSelect : UpdateContext({expandDDL:true})
iconDown.Visible : !expandDDL
iconUp.OnSelect : UpdateContext({expandDDL:false})
iconUp.Visible : expandDDL
Gallery.Visible : expandDDL

To display the selected value into the textinput, we'll use context variable again :

TextInput.Default : selectedValue
Gallery.OnSelect : UpdateContext({selectedValue:ThisItem.Title,expandDDL:false});Reset(TextInput)

Then you to clear the textinput, use the X icon : 

iconClear.OnSelect : UpdateContext({selectedValue : "", expandDDL:false});Reset(TextInput)

Théo

 

Walter1
Level: Powered On

Re: Dropdown that also allows free text

Great, thanks, that works like a charm!

 

The only thing I can't seem to work out is how to change the background color when the user hovers over one of the dropdown items.  Changing the background color once a value is selected is no problem though and can be done through TemplateFill.  Changing font color when hovering is no problem either as it has a HoverColor attribute.

 

Any suggestions on how to change the background color though when hovering?

KroonOfficeSol
Level 10

Re: Dropdown that also allows free text

@Walter1

 

Nice trick from @tchin-nin, but maybe easier is to have a dropbox/combobox connected to your datasource then add a Textinput and place it over the dropbpx/combobox, but leave the chevron open and set the default to the Dropbox.Selected.Value.

 

Set the TextInput.Fill to the dropbox.Fill or to another color.

 

I think this is an easier approach. Greatings,

 

Paul

Walter1
Level: Powered On

Re: Dropdown that also allows free text

Great, thanks @KroonOfficeSol , that works as well!  And this option has the benefit of having the hovercolor in the dropdown.

 

Cheers.