Calling javascript function out of scope

[snorrith]

Hi all.
I was just noticing a big problem when I started testing my large web application which I have been working on for many months...
When I call javascript function from let say button click. it is �out of scope� if I have open another window with same function name.
I build my webapp as tabbed ui.
Does anyone know the solution how to call a function in the same scope?

I attach a demo to show the problem.
Create new project and add the two files in the zip to it.
Open it in Alpha and preview �tabTest� to run the program
The problem is in the code in �dlgTest�

Thanks in advance.
Snorri.

[RichCPT]

Re: Calling javascript function out of scope

Yep, this is a serious problem that I do not believe has been fully addressed by Alpha yet. They have offered solutions, but both solutions fail to work for JavaScript functions used by conditional client-side expressions setup by the genie builders!

The problem, as you have discovered, is that anything declared in the "JavaScript Functions" property in an UX or Grid will get loaded as a global function in the browser. The only concept of a "local" function in JavaScript would be a function that has been attached to an Object. So, if you want to define a "local" function you have to attach it to an instance of the Grid or UX JavaScript Object. In a Grid you can do this by putting something like the following in the "client-side" "onObjectInitialize" event:

{grid.object}._functions.setGridPageHeadings = function ( GridObj ) {
//Your function
}

The "_functions" is a convention established by Alpha; you could omit that level or make a different name at that level.

To run the function you would call it from the appropriate place. In my case I want it to run when the grid is opened, either the first time or a subsequent time. So, I put the following in "onGridRender" event.

if( {grid.object}._functions.setGridPageHeadings ) {grid.object}._functions.setGridPageHeadings({grid.object});

The "if" statement is there to ensure the function has been attached / declared. If for some reason the function has not been attached yet, I don't want the Javascript to bomb out.

I have a similar function "setDetailPageHeadings" that I want to run when the detail view is opened. I declare the function in the same place as the first function. I call the function from the following two embeds:

afterDetailViewNewRecord
afterDetailViewOpen

You could also just leave the js functions where they are and prefix their names, to be unique. This is done by prefixing the function names with the {Grid.ComponentName} placeholder. Example:

function {Grid.ComponentName}_myFunction() { /* Function definition */ }

This solutions is simpler than the first solution, but it does not keep the global name space from getting polluted like the first solution does. With either solution, you have to go through your component and change all the calling lines.

I have found that both of these solutions fail when trying to use Client-Side Conditional Styling expressions that need to make JavaScript function calls. The condition itself might include a custom JavaScript function or when the condition evaluates to true it is supposed to call a custom function. Either way, you will probably run into problems as the genies do not know how to handle the placeholder "{Grid.ComponentName}" when used with conditional styles. When this happens the choice is to ensure your function names are unique without using placeholders (and hopefully you don't have a problem if multiple instances of the same component are opened)!

[snorrith]

Re: Calling javascript function out of scope

Thank you for this answer Rich.
I will try your suggestion.

[CharlesParker]

Re: Calling javascript function out of scope

hmm, thoughts on a UX? I have a javascript function I want to run as a calculated field expression (Client side) AFTER the UX loads

[lilmofo812]

Re: Calling javascript function out of scope

So just curious if anyone knows if Alpha is working on a true fix for this issue. I feel like at this point it would make more sense for them to create a web projects section where global javascript functions could be created (similar to user defined functions) and then have anything within a component be localized to that component automatically (just like the javascript you create using action javascript and select the inline option). I'm on the verge of using option two ({Dialog.ComponentName}) but not looking forward to changing all the function calls (but I have a feeling since this is still an issue after v4 has just been released a fix isn't happening anytime soon), but would love to find out I'm wrong?