So I’ve adapted the fuse-samples repo here to make the dropdown menu easier to just import and use quickly in you project. The files are here
Please have a look at the readme.
Thanks 
Cool stuff! I took the liberty of moving the thread to Show and Tell.
This is great but I dont see how this would work in a situation where multiple drowndowns are required without doing a lot of duplication of markup which in turn would make the ux file super bloated.
When will these functionalities be included in the Fuse Core?
Hi,
You can re-use any UX Markup component by extracting it into a ux:Class
I’m not the person to ask about anything to do with what Fuse will include haha! This is just a kind of proof or just an example of how you may encorporate something like a dropdown in your app. And to have multiple dropdowns all you have to do is download the UX file into your project directory and then to use it just call the class : <DropdownMenu />
The only thing you might have to is change the name of the Observable that holds the data as they’ll get mixed if you have more than one dropdown.
I’ll fix that now if you like.
Haven’t tested this yet, but looking at the code it doesn’t seem that one can easily edit the colors via properties? could you make that possible? or am I missing something?
Which github repo are you looking at? In mine I removed the colours of each item just to make it barebones so others can do whatever they like to it.
Lines 24,25,30,37,45 all have set colors
in https://github.com/williamshoops96/fuse-dropdown/blob/master/DropdownMenu.ux
btw this line is commented out, should get deleted if not used
It’d be good to be able to:
<DropdownMenu SelectedColor="..." HoverColor="..." />
etc
Okay I understand, I’ll do that now thanks:)
I’ve gone from scratch again to try and make this work. 80% sure it’s probably the wrong way to go about it but this is what I’ve got:
<Panel ux:Class="DropdownMenu" ux:Name="Menu" >
<!-- PROPERTIES -->
<object ux:Property="ListItems" />
<object ux:Property="Selected" />
<float4 ux:Property="TextColor" />
<Brush ux:Property="BackgroundColor" />
<Brush ux:Property="BorderColor" />
<Brush ux:Property="HoverColor" />
<float4 ux:Property="OptionsHeight" />
<float4 ux:Property="TextSize" />
<!-- JAVASCRIPT -->
<JavaScript>
var Observable = require('FuseJS/Observable');
</JavaScript>
<!-- THE LIST PANEL (when dropdown is open) -->
<Panel ux:InnerClass="DropdownOption" ux:Name="Option" Height="30" >
<string ux:Property="Text" />
<Rectangle Layer="Background" Fill="{Property Menu.BackgroundColor}" >
<Stroke Brush="{Property Menu.BorderColor}" Width="1" />
</Rectangle>
<Text FontSize="{Property Menu.TextSize}" TextColor="{Property Menu.TextColor}" Alignment="CenterLeft" Value="{Property Option.Text}" />
<WhileHovering>
<Change Menu.BackgroundColor="#000" />
</WhileHovering>
</Panel>
<!-- THE FIRST PANEL (when dropdown is closed) -->
<Panel ux:InnerClass="DropdownSelectedItem" ux:Name="SelectedItem" Height="40" >
<string ux:Property="Text" />
<Text Alignment="CenterLeft" Value="{Property Menu.Selected}" FontSize="{Property Menu.TextSize}" TextColor="{Property Menu.TextColor}" />
<Panel Layer="Background">
<Rectangle Fill="{Property Menu.BackgroundColor}" Height="100%" Alignment="Top" />
</Panel>
</Panel>
<!-- PANEL CONTAINING EVERYTHING -->
<Panel Width="200" Height="40">
<Rectangle>
<Stroke Brush="{Property Menu.BorderColor}" Width="1" />
</Rectangle>
<DropdownSelectedItem />
<Clicked>
<Toggle Target="expandDropdown" />
</Clicked>
<WhileTrue ux:Name="expandDropdown">
<StackPanel Offset="0,40" >
<Each Items="{Property Menu.ListItems}" >
<DropdownOption Text="{name}" />
</Each>
</StackPanel>
</WhileTrue>
</Panel>
</Panel>
I get an error though when I’m previewing that says:
Type not found:
DropdownMenu.DropdownSelectedItem
I was able to do something like this that worked for me.
<Panel ux:Class="DropdownMenu" >
<object ux:Property="Options"/>
<string ux:Property="SelectedText"/>
<Panel ux:Class="DropdownOption" ux:Name="self" MinHeight="30">
<string ux:Property="Text" />
<string ux:Property="ItemName" />
<Rectangle Layer="Background">
<SolidColor ux:Name="bgCol" Color="#FBFDFD" />
<!-- <Stroke Brush="#BFD8DD" Width="1"/> -->
</Rectangle>
<Text Alignment="CenterLeft" Value="{Property self.Text}" FontSize="14" Margin="10,0" TextWrapping="Wrap"/>
<Text Value="{Property self.ItemName}" Visibility="Collapsed"/>
<WhileHovering>
<Change bgCol.Color="#D9E1E4" />
</WhileHovering>
</Panel>
<Panel ux:Class="DropdownSelectedItem" ux:Name="self" MinHeight="40">
<string ux:Property="Text" />
<Text Alignment="CenterLeft" Value="{Property self.Text}" FontSize="16" Margin="10,0"/>
<Panel Layer="Background">
<Rectangle Fill="#FBFDFD" Height="100%" Alignment="Top"/>
</Panel>
</Panel>
<Panel MinHeight="40" >
<DropdownSelectedItem Text="{Property this.SelectedText}" />
<Clicked>
<Toggle Target="expandDropdown" />
</Clicked>
<WhileTrue ux:Name="expandDropdown">
<StackPanel Offset="0,40">
<Each Items="{Property this.Options}">
<DropdownOption Text="{text}" ItemName="{name}" Clicked="{onSelected}" />
</Each>
</StackPanel>
</WhileTrue>
<DropShadow/>
</Panel>
</Panel>
Then use it like
<DropdownMenu SelectedText="{selectedItem}" Options="{options}"/>
Ah I see why mine didn’t work now! Many thanks Donald! Where is the on selected function?
sorry I forgot to post that
var options = Observable({name:'item1_id', text:'Item 1'},{name:'item2_id', text:'Item 2'});
var selectedItemName = Observable("");
var selectedItemText = Observable("");
var selectedItem = Observable(function(){
return selectedItemText.value;
});
function onSelected(args){
selectedItemName.value = args.data.name;
selectedItemText.value = args.data.text;
}
These were defined in the MainView.ux. This was just using the limited knowledge I have on Fuse. Maybe there is a better way to do this. I am open for suggestions.
can I have more than 1 dropdown menu on the screen? if can then Should I copy the whole code again to make 2 dropdown menu?
Thank You
@indra No you would use it like so:
<DropDown SomeProperty="someValue"></DropDown>
Yet those properties I believe are still being worked on, I don’t think he’s updated the code yet so not sure what properties to set, and hopefully he’ll be making some small docs on the properites you can set
Yeah Edwin is right. Sorry I haven’t updated the code yet I will give it a go today.
So I’m literally finished, apart from there’s a small bug with Fuse that won’t allow it to work haha. I’ll post on here when it does.
Post it on the github repo, and some small documentation on the README of the repo, then post here that its been updated and complete
Will do 
Finished:) Pretty much as customizable as you get apart from I removed the hover color haha. Check the repo: https://github.com/shnupta/fuse-dropdown.git
One other thing I’m working on is getting the selected properties value so you can use it for other things (like send it off in a fetch request or use it with the storage API).