Observable in separate .js file to update element

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.

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

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

            isLoggedIn: Login.loggedIn


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

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

a snippet from the login.js file

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

Hey mate,
please follow the links in this forum post which answers the exact same question you’re asking.

1 Like

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

No worries :slight_smile: