Dropdown list with already selected value

I am working on a dropdown list. But I have a problem about set already selected value into dropdown list when dropdown list is displayed first time. I dont know how to do it. Can you help me ?

Here is my component “selectbox” code:


- <object ux:Property="Values" /> : dropdown Options
- <object ux:Property="Value" /> : already selected option

<Panel ux:Class="SelectBox" ZOffset="1">
  <object ux:Property="Values" />
  <object ux:Property="Value" />
  <UserEvent ux:Name="onChange" />

    function handleSelect(args) {
        id: args.data.id

    module.exports = {
      handleSelect: handleSelect

  <Panel ux:Class="DropdownOption" ux:Name="self" Height="45" Margin="40,0" Padding="10,0">
      <string ux:Property="Text" />
      <Rectangle Layer="Background">
          <SolidColor ux:Name="bgCol" Color="Snow" />
      <Text ux:Name="tCol" Alignment="CenterLeft" Value="{Property self.Text}" FontSize="16" Margin="10,0"/>
          <Change bgCol.Color="#db5b05" />
          <Change tCol.TextColor="#FFF" />

  <Rectangle CornerRadius="5" Alignment="VerticalCenter">
      <Each Items="{Property this.Values}">
          <DropdownOption Text="{name}" Clicked="{handleSelect}" ZOffset="2" Opacity="1"/>
  <Rectangle Background="#000" Opacity="0.8" Layer="Background" Clicked="{handleOverlayClicked}"/>


All properties are available as observables in JS, so you can do something like:

this.Value.value = "this is the value";

Hi Anders !

I don’t quite understand. My question is “how to display option is already selected before. Example: the option is already selected before will have background orange and text color is white like above image”

Do a remap in your JS:

module.exports = {

    values : this.Values.map(function(v) {
        return {
            name: v.name,

            isSelected: Observable(function() {
                return v === this.Value.value;

    ... other exports

And then bind to {values} instead of {Property this.Values}, and do a <WhileTrue Value="{isSelected}">

Ok. I got it. But when I do that “values” just return null or I console.log(this.Value.length) it return 0. I don’t know why?

My proccess is:

  • create an variable in js file:


  • in .ux file I get that variable and pass it into a component class

  • in component class file .ux I try console.log values which I passed from ux page obove but it return 0 and null


As JS and UI are async, the properties will be null initially, you have to wait for a value to arrive:

this.SomeProperty.onValueChanged(function(newValue) {

Yeah. But:

var values = Observable();

this.Values.onValueChanged(function(OptionValues) {
  values = OptionValues
  console.log('values in: ', values.length) // return 2 

console.log('values out: ', values.length) // return 0 when out function

Have way to fix this problem? I need to use it outside function in Javascript tag

Nope. You can’t access the value before it is available. The function is called later when the property value is ready. As long as you rely on observable logic, you should never need the value though.

Can you please explain what you are trying to do? That way we can help find the best way to acheive it.

Yes. I am trying do a dropdown list with already selected option as I mentioned at this topic.

Yes, then do as I proposed earlier: https://www.fusetools.com/community/forums/permalink/014b7678-c020-4e6d-a93b-31accdc963c1

Also, check out this video where I build a dropdown list step by step:


Hi !

Sorry to take your time. I’m a newbie Fusetools so have many issuses I can’t resolve. So I need help from you.

This issue we discussed yesterday about create a dropdown option with already selected options .

This is my code after I viewed your video on youtube.


Please go through and tell me why the values I get to handle in … from component always are null.

If have any question, let ask me. Hope to hear answer from you. Thanks so much !


It seems you forgot to do .inner() on your observable properties. Does that help?

var selected = self.Selected.inner();
var values = self.Values.inner();

I additional .inner() but it throw an error

LOG: InternalError: JavaScript dispatching error: Fuse.Scripting.ScriptException: Name: ScriptError
    Error message: Uncaught TypeError: Cannot read property 'id' of undefined
    File name: Components/SelectBox.ux
    Line number: 22
    Source line:         if(v.id && selected.value){
    JS stack trace: TypeError: Cannot read property 'id' of undefined

seem like values is null

if release inner(), code run ok, not error but values = null