Global variables

How-to Discussions
1

Hey guys,

Is there a way to declare global variables across a complete application? Or at least throughout a .ux file?

Ideally, I want to be able to grab a JSON file, pluck out some variables using JavaScript and make them accessible throughout the app.

If I redeclare module.exports at any point, I have to redeclare my variables.

Example:

<JavaScript File="questions.json" ux:Global="qs" />
<JavaScript>
    var json = require("qs");

    module.exports = {
        quizname: json.data.quizname
    }
</JavaScript>

Is there a way to make “quizname” accessible throughout the .ux file? I.e. without declaring it in every use of module.exports?

2

Any solution to this?

3

I’m fairly certain that there is no way to do this currently. Fuse team: Can you at least give us a “maybe”, or “not happening”?

This is a core concept of JS and the platform seems broken without it.

4

Hi!

DataContexts are cascading down the UI three, so as long as you export quizname in one of your topmost <JavaScript> tags, e.g. direclty inside your <App> like this:

<App>
    <JavaScript>
        ...
        module.exports = {
            quizname: something
        }
    </JavaScript>

Then it will be available in the entire app using {quizname}

Hope that helps!

5

> **Anders Lassen wrote:** > >

Then it will be available in the entire app using {quizname}

Hope that helps!

Is {quizname} also available from child component JavaScript code?

6

Hi,

No, not in JavaScript.

You could use this.findData("quizname") which will return an observable of the value. This is however not recommended practice as it introduces hidden dependencies for your child component.

The best practice is to declare a ux:Property on the child component and databind {quizname} to that property from the parent scope.

7

Hi Anders,

I am trying to have Two Way binding on Observable (Array type) that is declared in main App Javascript and then being passed as object property to a Class. After it is passed on to a class ux, the Javascript under its is retrieving the Observable Property using this.PropertyName.inner() function. After retrieval, on some action the observable is changed by adding or deleting values. This change is not being reflected on the main App Observable. Please assist. Ultimately my goal is to have a Global Observable to access and modify on any Page in app.

8

Reading your comments on other post I realized that such variables would be good to be places in separate model JS file. So I kept the needed Global Observable in Model.js file and accessing this by importing using require. This helps having a Global Javascript observable. This fixed my issue.

Thank you.