How to get/set observable in JS module in parent page?

How-to Discussions
1

Hello again!
Currently I have a HomePage.ux which has a PageControl that holds a series of pages loaded from individual ux files. Now I have a lot of data being fetched from a server and displayed on those individual pages and therefore need a loading panel on top of the content until all data is fetched and displayed.

I have made this panel and it’s currently located in the MainPage.ux as an overlay. Now what I would like to accomplish is when each page is loaded for the first time and is about to get the data from the server, the loading panel should become visible and disappear when the data is loaded.

But in order to do this I have to be able to get the observable responsible for the loading panel’s visibility in HomePage.ux to change from the individual children’s corresponding JS file (e.g. NotificationPage.js and ProfilePage.js).

I have done some Googlin’ but I’m still confused of how to do this. Any suggestions?

The PageControl in HomePage.ux:

<PageControl Dock="Top" ux:Name="navigation" Height="100%">

		<NotificationsPage ux:Name="notifications" router="router">
			<WhileActive Threshold="0.5">
				<Set tabBar.LayoutElement="notificationsTab" />
				<Set statusAndAppBar.Text="Notifications" />
			</WhileActive>
		</NotificationsPage>

		<SearchPage ux:Name="search" router="router">
			<WhileActive Threshold="0.5">
				<Set tabBar.LayoutElement="searchTab" />
				<Set statusAndAppBar.Text="Search" />
			</WhileActive>
		</SearchPage>

		<EventsPage ux:Name="events" router="router">
			<WhileActive Threshold="0.5">
				<Set tabBar.LayoutElement="eventsTab" />
				<Set statusAndAppBar.Text="Events" />
			</WhileActive>
		</EventsPage>

		<ProfilePage ux:Name="profile" router="router">
			<WhileActive Threshold="0.5">
				<Set tabBar.LayoutElement="profileTab" />
				<Set statusAndAppBar.Text="Profile" />
			</WhileActive>
		</ProfilePage>

		<MorePage ux:Name="more" router="router">
			<WhileActive Threshold="0.5">
				<Set tabBar.LayoutElement="moreTab" />
				<Set statusAndAppBar.Text="More" />
			</WhileActive>
		</MorePage>

		<Page ux:Name="LoadingPanel" Dock="Top" Layer="Overlay" Visibility="{LoadingVisibility}">
			<Panel Background="#D1D2D4FF" Opacity=".75" Layer="Background" />
			<Grid RowCount="2">
				<Image File="../Assets/loading_orange.png" Height="15%" Alignment="BottomCenter">
					<WhileVisible>
						<Spin Frequency=".5" />
					</WhileVisible>
				</Image>
				<Text Alignment="TopCenter" Margin="0,10" TextColor="Black">
					Loading..
				</Text>
			</Grid>
		</Page>

	</PageControl>

Please help! Thanks in advance.

2

In your MainPage.ux you can create a loading observable that you send in to a lodingData.js file. You can do that like this:

var loader = Observable();
var loadingData = require('lodingData.js');
loadingData.init(loader);

In your NotificationPage.js and ProfilePage.js you can require the same file and do something like this:

var loadingData = require('lodingData.js');
loadingData.startFetchingProfile();

in lodingData.js you can then do the following:

var loader = null;

module.exports = {
    init: function(loader_obs) {
        loader = loader_obs;
    },
    startFetchingProfile: function() {
        fetch().then(function() {
            loader.value = // set some value;
        });
    }
};

You can also just create the Observable in your lodingData.js and return it from init.

3

Thank you, but it does not seem to work. Will the loader observable in loadingPage.js become global in a sense that the different JavaScripts attached to the ux pages requires the same file (loadingPage.js)?