Sample ImageViewer close ViewerVisible from JS

im following this tutorial: ImageViewer, i want to close the image with JS,
so i have this:

	<Panel Alignment="TopRight" Padding="10" ux:Name="CloseButton" Margin="5" Clicked="{closePreview}">	
			<Translation Vector="1.5,-1.5,0" RelativeTo="Size" ux:Name="TheTrans"/>
			 <Rectangle Layer="Background" Fill="1,1,1,0.8" CornerRadius="5"/>
			<Image File="../Assets/cancel.png" Color="0,0.1,0.2,1" Clicked="{closePreview}" />	
			<!-- <Clicked>
					<Set ViewerVisible.Value="false"/>
			</Clicked>		-->	
		</Panel>

Inside my Js i have a method called closePreview with his respective export:

function closePreview(){
	console.log("Close Preview");
	console.log(ViewerVisible.Value);
	ViewerVisible.Value = "true";
}

The log return null on the first time, how do i access to the uxName or tag?

LOG: Close Preview
LOG: null
LOG: true

PD: everything work fine with the tag and clicked tag.

Regards.- :+1:

Hi,

Sorry for the late reply.

You cannot manipulate arbitrary properties on UX element from JS (due to the async execution nature of Fuse).

That means, this is not possible:

    ViewerVisible.Value = "true";

Instead, use an Observable in JS and data-bind ViewerVisible Value="{obs}" to the observable.

Hope that helps. Thanks!