# Allow accessing Dependency properties from JS

**URL:** <https://forums.fusetools.com/t/allow-accessing-dependency-properties-from-js/4694>\
**Category:** Feature Suggestions\
**Created:** [October 19, 2016, 9:52pm UTC](https://forums.fusetools.com/t/allow-accessing-dependency-properties-from-js/4694 "2016-10-19T21:52:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [October 19, 2016, 9:52pm UTC](https://forums.fusetools.com/t/allow-accessing-dependency-properties-from-js/4694/1 "2016-10-19T21:52:23Z")

</div>

The following makes a button (`NavButton`) that allows me to navigate easily back and fourth through a `PageControl`

```auto
<App>
	<Panel ux:Class="NavButton" Direction="Next">
		<string ux:Property="Direction" />
		<string ux:Property="Text" />
		<int ux:Property="NavIndex" />
		<PageControl ux:Dependency="Control" />
		<JavaScript>
			var Direction = this.Direction;
			var navIndex = this.NavIndex;
			module.exports = {
				navigate: function (evt) {
					console.log('Index:', navIndex.value)
					if(Direction.value === 'Next') {
						navIndex.value = navIndex.value + 1;
					} else if(Direction.value === 'Previous') {
						navIndex.value = navIndex.value - 1;
					}
				}
			}
		</JavaScript>
		<Rectangle>
			<Text Value="{Property this.Text}" Alignment="Center" />
			<Clicked Handler="{navigate}" />
		</Rectangle>
	</Panel>
	<DockPanel>
		<PageControl ux:Name="nav" Active="page1" ActiveIndex="0">
			<Page ux:Name="page1">
				<NavButton Text="Go To Page 2" Control="nav" NavIndex="{Property nav.ActiveIndex}" />
			</Page>
			<Page ux:Name="page2">
				<NavButton Text="Go To Page 3" Control="nav" NavIndex="{Property nav.ActiveIndex}" />
			</Page>
			<Page ux:Name="page3">
				<NavButton Text="Go To Page 4" Control="nav" NavIndex="{Property nav.ActiveIndex}" />
			</Page>
			<Page ux:Name="page4">
				<NavButton Text="Go Back To Page 3" Control="nav" NavIndex="{Property nav.ActiveIndex}" Direction="Previous" />
			</Page>
		</PageControl>
	</DockPanel>
</App>

```

This could easily be cleaned up if I could access the `PageControl` dependency from JS by dropping the `NavIndex` property and just using the `Control` dependency:

```auto
<App>
	<Panel ux:Class="NavButton" Direction="Next">
		<string ux:Property="Direction" />
		<string ux:Property="Text" />
		<PageControl ux:Dependency="Control" />
		<JavaScript>
			var Direction = this.Direction;
			module.exports = {
				navigate: function (evt) {
					console.log('Index:', Control.ActiveIndex)
					if(Direction.value === 'Next') {
						Control.ActiveIndex = Control.ActiveIndex + 1;
					} else if(Direction.value === 'Previous') {
						Control.ActiveIndex = Control.ActiveIndex - 1;
					}
				}
			}
		</JavaScript>
		<Rectangle>
			<Text Value="{Property this.Text}" Alignment="Center" />
			<Clicked Handler="{navigate}" />
		</Rectangle>
	</Panel>
	<DockPanel>
		<PageControl ux:Name="nav" Active="page1" ActiveIndex="0">
			<Page ux:Name="page1">
				<NavButton Text="Go To Page 2" Control="nav" />
			</Page>
			<Page ux:Name="page2">
				<NavButton Text="Go To Page 3" Control="nav" />
			</Page>
			<Page ux:Name="page3">
				<NavButton Text="Go To Page 4" Control="nav" />
			</Page>
			<Page ux:Name="page4">
				<NavButton Text="Go Back To Page 3" Control="nav" Direction="Previous" />
			</Page>
		</PageControl>
	</DockPanel>
</App>

```

Much cleaner code and I don’t have to create a property in the `NavButton` for each property I want to access from the `Control` dependency.

Right now I get `null` using the last example, I don’t know if this should be possible and a bug or if not this should be possible

---

<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:47pm UTC](https://forums.fusetools.com/t/allow-accessing-dependency-properties-from-js/4694/2 "2016-11-15T12:47:01Z")

</div>

Hmm, I think your second example should be valid. Where do you get `null`? In JS or a null reference exception?

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [November 15, 2016, 9:51pm UTC](https://forums.fusetools.com/t/allow-accessing-dependency-properties-from-js/4694/3 "2016-11-15T21:51:29Z")

</div>

I get the `null` in JS the `ActiveIndex` property

---

<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 29, 2016, 3:45pm UTC](https://forums.fusetools.com/t/allow-accessing-dependency-properties-from-js/4694/4 "2016-11-29T15:45:26Z")

</div>

Ah! My mistake, `<PageControl />` does not have a JS API. So its properties cannot be accessed directly form JS.

I did some changes in your code to get you up and running with observables:

```auto
<App>
    <Panel ux:Class="NavButton" Direction="Next">
        <string ux:Property="Direction" />
        <string ux:Property="Text" />
        <PageControl ux:Dependency="Control" />
        <JavaScript>
            var Direction = this.Direction;
            var self = this;
            module.exports = {
                direction: self.Direction,
            }
        </JavaScript>
        <Rectangle>
            <Text Value="{Property this.Text}" Alignment="Center" />
            <Clicked Handler="{navigate}" />
        </Rectangle>
    </Panel>
    <DockPanel>

    	<JavaScript>

    		var Observable = require("FuseJS/Observable");

    		var activeIndex = Observable(0);

    		var navigate = function (arg) {
    			
    			var direction = arg.data.direction.value;

    			console.log(direction);

    			if (direction == "Next"){
    				activeIndex.value = activeIndex.value + 1;
    			} else if (direction == "Previous") {
    				activeIndex.value = activeIndex.value - 1;
    			}

    		};

    		module.exports = {
    			activeIndex:activeIndex,
    			navigate:navigate,
    		}
    	</JavaScript>

        <PageControl ux:Name="nav" ActiveIndex="{activeIndex}">
            <Page ux:Name="page1">
                <NavButton Text="Go To Page 2" Control="nav" />
            </Page>
            <Page ux:Name="page2">
                <NavButton Text="Go To Page 3" Control="nav" />
            </Page>
            <Page ux:Name="page3">
                <NavButton Text="Go To Page 4" Control="nav" />
            </Page>
            <Page ux:Name="page4">
                <NavButton Text="Go Back To Page 3" Control="nav" Direction="Previous" />
            </Page>
        </PageControl>
    </DockPanel>
</App>

```