# How to use global components with behaviors

**URL:** <https://forums.fusetools.com/t/how-to-use-global-components-with-behaviors/4567>\
**Category:** How-to Discussions\
**Created:** [June 18, 2016, 10:55am UTC](https://forums.fusetools.com/t/how-to-use-global-components-with-behaviors/4567 "2016-06-18T10:55:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rishav.sharan](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rishav.sharan](https://forums.fusetools.com/u/rishav.sharan)\
**Post date:** [June 18, 2016, 10:55am UTC](https://forums.fusetools.com/t/how-to-use-global-components-with-behaviors/4567/1 "2016-06-18T10:55:23Z")

</div>

I am creating a simple page based app with 2 components that i need to use in all pages: round menu button on the top left and a sidepanel page which slides in when the menu button is clicked. You can think my project as having the following compoonents:

when the user clicks the menuButton component a set of animations happen: menubutton is animated and the sidepanel slides in.

```auto
    <MenuButton Alignment="TopLeft" Offset="10,10">
        <Clicked>
            <Toggle Target="animateMenuButton" />
            <Toggle Target="showSidePanel" />
        </Clicked>
    </MenuButton>

```

My probelm is that i dont understand how to structure my code in separate modules. I want to put menubutton UI, and the animateMenuButton behavior in a single ux file (menubutton.ux) and the sidepanel Ui + showSidePanel behavior in another ux file (sidepanel.ux)

The instance call

```auto
<MenuButton /> 

```

is in the ux file for the page.

Now, no matter how i structure the ux files, i keep getting exceptions like “object reference not set to instance…” and “x cannot be accessed from y. to make this work consider ux:InnerClass” etc.

So, to sum up; I want to make a global component which can be used accross pages The ux file where i define the coponent should also have the behavior of the component

and I need to be call any behavior from any otehr place in the project. Any ideas?

My code is here;

[https://github.com/rishavs/Fuse\_Scroogify](https://github.com/rishavs/Fuse_Scroogify)

---

<div class="post-metadata">

**Author:** ![Fernando\_Lins](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/fernando_lins/32/597_2.png) [@Fernando\_Lins](https://forums.fusetools.com/u/Fernando_Lins)\
**Post date:** [June 22, 2016, 4:34pm UTC](https://forums.fusetools.com/t/how-to-use-global-components-with-behaviors/4567/2 "2016-06-22T16:34:19Z")

</div>

Hello,

In my app I solved this in two ways:

1. Using `UserEvent`s to describe actions and animations that needed to be called from aroung the app. Place the `UserEvent` as “high” as you can in your structure so that it reaches all the children it needs to target. Then inside your reusable control, invoke that UserEvent with `RaiseUserEvent`.

2. The second way is to use `WhileTrue/WhileFalse` blocks that listen to an `Observable` in JavaScript. So for example if you have `var animateMenuButton = Observable("false");` in your JS, you can listen to it from your component with `<WhileTrue Value="{animateMenuButton}" ux:Name="animationToggle"> ...` and control it with `<Toggle Target="animationToggle />` similar to your example above.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [June 22, 2016, 6:42pm UTC](https://forums.fusetools.com/t/how-to-use-global-components-with-behaviors/4567/3 "2016-06-22T18:42:18Z")

</div>

Hi,

When splitting things into classes, each class has no knowledge of the rest of your app. This is to isolate it into a reusable and testable component.

You can use `ux:Dependency` to inject dependencies on “global components” into `ux:Class`.

It’s hard to show you the exact code you need without seeing more of your projec,t but here is an approximation:

```auto
 <MenuButton ux:Class="Foo" Alignment="TopLeft" Offset="10,10">
    <WhileTrue ux:Dependency="animateMenuButton" />
    <WhileTrue ux:Dependency="showSidePanel" />
    <Clicked>
        <Toggle Target="animateMenuButton" />
        <Toggle Target="showSidePanel" />
    </Clicked>
 </MenuButton>

```

Then when instantiating Foo, pass in the objects:

```auto
<Foo animateMenuButton="animateMenuButton" showSidePanel="showSidePanel" />

```

Hope this helps!

---

<div class="post-metadata">

**Author:** ![rishav.sharan](https://avatars.discourse-cdn.com/v4/letter/r/8baadc/32.png) [@rishav.sharan](https://forums.fusetools.com/u/rishav.sharan)\
**Post date:** [June 24, 2016, 9:35am UTC](https://forums.fusetools.com/t/how-to-use-global-components-with-behaviors/4567/4 "2016-06-24T09:35:48Z")

</div>

Thanks to both of you. I will explore all these ideas now. 🙂