UX Visibility attribute from Observable does not update with variable change

How-to Discussions
1

Hello again!
I have a couple of JS Observables which will represent Visibility.Hidden and Visibility.Visible for several ux panels.
For what I have researched and with no compiling errors I think my syntax is right:

<StackPanel ux:Name="LogoPanel" Visibility="{LoginPanelsVisibility}">
...
<Panel ux:Name="LoadingPanel" Visibility="{LoadingPanelVisibility}">

JavaScript:

var LoginPanelsVisibility = Observable("Visible");
var LoadingPanelVisibility = Observable("Hidden");

...

function logIn() {

LoginPanelsVisibility = "Hidden";
LoadingPanelVisibility= "Visible";

...

module.exports = {
LoginPanelsVisibility: LoginPanelsVisibility,
LoadingPanelVisibility: LoadingPanelVisibility
};

Although everything looks in order when the screen is loaded (LoginPanels are visible and the LoadingPanel is not) it does not seem update the Visibility on the ux panels when he order is inverted by the LogIn() function. Am I missing something? Please help!

2

Hi!

You are overwriting the entire observable variable. You need to just update the .value of the observables:

LoginPanelsVisibility.value = "Hidden";
LoadingPanelVisibility.value = "Visible";
3

Thank you! :slight_smile:

4

Been here, done that :slight_smile:
I was struggling with the same issue, and could not think that I should only update the value.
Great direction, thanx…