Search code examples
javascriptvisual-studio-lightswitchlightswitch-2013

Lightswitch HTML global JS file to pass variable


I know how this works in C#, however not so much in javascript so I am hoping it is similar.

With Javascript can I create say a master.js, with a variable (var defaultValue = "1234"), which I can reference in all other javascript files associated with the project?

so in terms of Lightswitch HTML, each screen has the ability to have a js file, and on the screen I want to be able to retrieve this defaultValue.

  1. Can this be done?
  2. If yes, how can I get this value onto the current screen?

so far I have created a main.js file, added this function:

function getDefaultValue(value) {

    var value = "1234";

    return value;
}

and declared the js file in the default.htm file:

<script type="text/javascript" src="Scripts/main.js"></script>

I know this is how i am using other JavaScript files like blob.js, lsWires.js etc...

using this method in by screen.js doesn't work so one of these stages is causing an error...

window.alert(main.getDefaultValue(value));

ideally i would like to use this defaultvalue for setting a value, i.e. var test = main.getDefaultValue(value)


Solution

  • This is certainly possible, and the script declaration you've used in your default.htm appears correct.

    However, as the approach you've described creates a global getDefaultValue function (added to the global window object context) you wouldn't specify a main 'namespace' prefix like you would in c#.

    Instead, rather than calling the function using main.getDefaultValue, you'd use the the following approach within your LightSwitch screens:

    myapp.BrowseProducts.created = function (screen) {
        window.alert(window.getDefaultValue("123")); // This will display 1234
    
        // As window is a global object, its window prefix can be omitted e.g.
        alert(getDefaultValue("123")); // This will display 1234
    };
    

    Or, if you want to define a global defaultValue variable in your main.js (probably the approach you're looking to implement) you would have the following code in your main.js file:

    var defaultValue = "5678";
    

    Then you'd access it as follows in your LightSwitch screens:

    myapp.BrowseProducts.created = function (screen) {
        alert(defaultValue); // This will display 5678
        defaultValue = "Hello World";
        alert(defaultValue); // This will now display Hello World
    };
    

    Also, if you'd like to organise your functions/properties in a main 'namespace', you could use the following type of approach in your main.js file: -

    var main = (function (ns) {
    
        ns.getDefaultValue = function (value) {
            var value = "1234";
            return value;
        };
    
        ns.defaultValue = "5678";
    
        return ns;
    })(main || {});
    

    These would then be called as follows in your LightSwitch screens: -

    myapp.BrowseProducts.created = function (screen) {
        alert(main.getDefaultValue("123")); // This will display 1234
        alert(main.defaultValue); // This will display 5678
        main.defaultValue = "Hello World";
        alert(main.defaultValue); // This will now display Hello World
    };
    

    This type of approach is covered in the following posts: -

    How to span javascript namespace across multiple files?

    JavaScript Module Pattern: In-Depth