Shared Observable that can be updated from 2 separate Views(ux)

I’m working on reusable custom component Modal/Dialog window, https://github.com/tlarevo/custom-fuse-dialog-component

I need to have a shared Observable to control the status of the modal window so that from the main view we can set modal status isDialogShowing = true and show the modal and from modal window close modal window close itself by setting observable value isDialogShowing = false.

As per the documentation, https://www.fusetools.com/docs/ux-markup/properties, this should be possible but its not working as expected as modal windows doesn’t get closed(move animation doesn’t work). But this works fine when all the code in the same view.

What is the correct way to achieve the desired functionality? Thanks :slight_smile:

Hi Tharindu,

it seems you’ve done quite a lot of research, and thank you for that. What you want to do is create a stand-alone JavaScript module.

The JS files you use in UX, by directly referring to them via <JavaScript File="somefile.js" /> are viewmodels and they get instantiated every time the particular view is created. The data context for those then, as you might imagine, is component-local to that particular view. Doesn’t help much with global variables, eh?

So you need to create a somemodule.js file, and NOT include it in ANY UX file. Instead, you want to require("somemodule.js") from the viewmodel JS files, and that will give you the desired shared, global interface to things inside of that module.

Take a look at this Tutorial section where the hikes.js module is created. It’s the same exact concept.

Hope this helps!

Oh it worked like a charm :slight_smile: , thanks a lot (y). Silly me, I didn’t figure it out. I just plunge into UX code without properly understanding how JS modules work. Thanks again (y)