# Accessing UX components and their properties in JS?

**URL:** <https://forums.fusetools.com/t/accessing-ux-components-and-their-properties-in-js/5138>\
**Category:** How-to Discussions\
**Created:** [November 6, 2016, 9:59pm UTC](https://forums.fusetools.com/t/accessing-ux-components-and-their-properties-in-js/5138 "2016-11-06T21:59:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ted.ekeroth](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@ted.ekeroth](https://forums.fusetools.com/u/ted.ekeroth)\
**Post date:** [November 6, 2016, 9:59pm UTC](https://forums.fusetools.com/t/accessing-ux-components-and-their-properties-in-js/5138/1 "2016-11-06T21:59:17Z")

</div>

If I have a timeline in UX, how can I access it in JS? If I have a timeline like:

```auto
<Timeline ux:Name="timeline" >
   ...
</Timeline>

```

and I try to access it in JS:

```auto
<JavaScript>
    function test()
    {
        console.log(timeline.Progress); // <-- prints NULL
    }
</JavaScript>

```

It doesnt seem to find it, I get a null and undefined. What am I missing? I dont need module.exports (as it comes from UX–JS), so whats wrong? =)

---

<div class="post-metadata">

**Author:** ![ted.ekeroth](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@ted.ekeroth](https://forums.fusetools.com/u/ted.ekeroth)\
**Post date:** [November 7, 2016, 8:05pm UTC](https://forums.fusetools.com/t/accessing-ux-components-and-their-properties-in-js/5138/2 "2016-11-07T20:05:54Z")

</div>

Any help would be appreciated =)

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [November 8, 2016, 7:43am UTC](https://forums.fusetools.com/t/accessing-ux-components-and-their-properties-in-js/5138/3 "2016-11-08T07:43:26Z")

</div>

`Timeline.Progress` is a two-way bindable property, so `Progress="{jsProgress}"` should work.

Not all properties are two-way bindable however, generally only `Value` parameters and special ones like this. Unfortunately we don’t have a good way to mark them yet in our documentation.

---

<div class="post-metadata">

**Author:** ![ted.ekeroth](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@ted.ekeroth](https://forums.fusetools.com/u/ted.ekeroth)\
**Post date:** [November 8, 2016, 9:04am UTC](https://forums.fusetools.com/t/accessing-ux-components-and-their-properties-in-js/5138/4 "2016-11-08T09:04:11Z")

</div>

Thanks,  
this is all very confusing, to say the least =(

What I discovered now, if I make the change as you said above:

I have a TextView to display the jsProgress:

```auto
<TextView ux:Name="tv1" Value="{jsProgress}" TextColor="#fff" Width="50" Height="20" Alignment="TopLeft"/>

```

then I have the timeline:

```auto
<Timeline ux:Name="timeline" Progress="{jsProgress}" >

```

and then the js code:

```auto
<JavaScript>
	
        var Observable = require("FuseJS/Observable");
        var jsProgress = Observable(0);
        module.exports = {
		    jsProgress : jsProgress
		};

	</JavaScript>

```

And lastly, the button to start the animation:

```auto

	<MyButton ux:Name="btnStart" Text="START" Width="100" Height="100">
		<Clicked>
			<Set timeline.TargetProgress="1" />
		</Clicked>
	</MyButton>

```

What happens if I press the button is that the animation “steps” through the animation, it doesnt smoothly go from start to finish. first time I click, it looks like this:

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/Tr9L37T3R1qO-image-1478595745366.png)

So, its on Progress 0.006

If I keep pressing, eventually the animated stuff comes into view:

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/bjd51cbcSjFm-image-1478595791077.png)

This behaviour disappears if I remove the textview\_

```auto
<TextView ux:Name="tv1" Value="{jsProgress}" TextColor="#fff" Width="50" Height="20" Alignment="TopLeft"/>

```

Is this expected behaviour? Why? Isnt the textview just displaying the value?

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [November 15, 2016, 12:52pm UTC](https://forums.fusetools.com/t/accessing-ux-components-and-their-properties-in-js/5138/5 "2016-11-15T12:52:01Z")

</div>

Try using a `<Text />` instead. `<TextView />` is the multiline equivalent to `<TextInput />` and is meant for editing text. I guess that there is a valuechanged feedback loop between the Timeline and the TextView causing the animation to misbehave