# Observable in separate .js file to update element

**URL:** <https://forums.fusetools.com/t/observable-in-separate-js-file-to-update-element/7203>\
**Category:** How-to Discussions\
**Created:** [May 24, 2018, 1:59am UTC](https://forums.fusetools.com/t/observable-in-separate-js-file-to-update-element/7203 "2018-05-24T01:59:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin\_Byrne](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@Colin\_Byrne](https://forums.fusetools.com/u/Colin_Byrne)\
**Post date:** [May 24, 2018, 1:59am UTC](https://forums.fusetools.com/t/observable-in-separate-js-file-to-update-element/7203/1 "2018-05-24T01:59:33Z")

</div>

Hi,  
I am trying to design a landing page for my app where if they are not logged in, the login page is displayed using WhileFalse. The Login page has a login.js file. In there is an Observable that is initially set to ‘false’. When successfully signed in, this is updated to ‘true’. A DockPanel inside a WhileTrue on the same page should now be displayed. How do I get the “isLoggedIn” Observable on the landing page to be aware of the change to the ‘loggedIn’ Observable? I have tried a few things like ‘onValueChanged’ and ‘addSubscriber’. Thank you for any help.  
Here is the code from the LandingPage.ux file.

```auto
<Page ux:Class="LandingPage">
    <Router ux:Dependency="router" />

    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var Login = require('./login.js');
        var isLoggedIn = Observable(false);

        module.exports={
            isLoggedIn: Login.loggedIn
        }

    </JavaScript>

    <WhileTrue Value="{isLoggedIn}">
        <DockPanel>
            <Text Dock="Top" Value="Welcome" FontSize="20" Color="#fff" />
        </DockPanel>
    </WhileTrue>

    <WhileFalse Value="{isLoggedIn}">
            <LoginPage />
	</WhileFalse>
</Page>

```

a snippet from the login.js file

```auto
var loggedIn = Observable(false);
....					
if(res && res.status===true){
	console.log("LOGGED IN");
	loggedIn.value = true;
}

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [May 24, 2018, 8:45am UTC](https://forums.fusetools.com/t/observable-in-separate-js-file-to-update-element/7203/2 "2018-05-24T08:45:59Z")

</div>

Hey mate,  
please follow the links in [this forum post](https://forums.fusetools.com/t/global-observable-from-parent-to-children/6010/2) which answers the exact same question you’re asking.

---

<div class="post-metadata">

**Author:** ![Colin\_Byrne](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@Colin\_Byrne](https://forums.fusetools.com/u/Colin_Byrne)\
**Post date:** [May 24, 2018, 9:56pm UTC](https://forums.fusetools.com/t/observable-in-separate-js-file-to-update-element/7203/3 "2018-05-24T21:56:52Z")

</div>

Thank you so much @Uldis. That worked. I am sure you are sick of answering the same question over and over though 🙂

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [May 25, 2018, 7:58am UTC](https://forums.fusetools.com/t/observable-in-separate-js-file-to-update-element/7203/4 "2018-05-25T07:58:09Z")

</div>

No worries 🙂