Issue executing custom js in application

[franestra]

I am trying to write custom js functions that activate once a button is pressed. I created the interface using etemplate. I got the basic code structure from https://github.com/EGroupware/example/tree/step6
Once I press the button I get API Exceptions… a warning stating that Legacy JS only supports 2 arguments and an Uncaught TypeError, saying that widget.getInstanceManager().app_obj.MYAPP is undefined…
I haven’t been able to find any documentation that could help me, nor has looking through the code so far… does anyone have an idea what the issue might be?

Also, I don’t understand why there still are both a .js file and a .ts file in other applications… hasn’t there been a migration to TypeScript?

Thanks in advance

[RalfBecker]

Also, I don’t understand why there still are both a .js file and a .ts file in other applications… hasn’t there been a migration to TypeScript?

Yes there has, thought executed in the browser is the JavaScript, not the TypeScript code and we choose to also commit the generated JavaScript, so EGroupware can still run without first having to build the JavaScript parts via Grunt and friends. Also some parts are not yet migrated to TypeScript.

Ralf

[RalfBecker]

I am trying to write custom js functions that activate once a button is pressed. I created the interface using etemplate. I got the basic code structure from https://github.com/EGroupware/example/tree/step6

Once I press the button I get API Exceptions… a warning stating that Legacy JS only supports 2 arguments and an Uncaught TypeError, saying that widget.getInstanceManager().app_obj.MYAPP is undefined…

I haven’t been able to find any documentation that could help me, nor has looking through the code so far… does anyone have an idea what the issue might be?

Two ways to do this:

<button id="button" label="Click me" onclick="app.myapp.method"/>

or more explicit

<button id="button" label="Click me" onclick="app.myapp.method(this, widget)"/>

Calling the following myapp/js/app.ts:

class MyApp extends EgwApp
{
// ...
   method(_node : DOMButtonElement, _widget : et2_button)
  {
    // you click-handler
  }
}

a warning stating that Legacy JS only supports 2 arguments

That can be safely ignored.

Ralf

[franestra]

Thanks so much for your fast response!

That is precisely what I have so far… however no matter what I change in myapp/js/app.ts, I always get

Uncaught TypeError: widget.getInstanceManager().app_obj.MYAPP is undefined

Almost as if my script isn’t getting loaded?

[RalfBecker]

Almost as if my script isn’t getting loaded?

If the script is called app.js and stored in the js folder of you app, it get loaded automatic.
If it’s called different, that is NOT the case and you have to load it manually:

Api\Framwork::includeJS('/myapp/js/other.js');

Have you created an app.js from your app.ts? Not having done so, could also lead to the error you mentioned.

Probably more helpful would be, if you post some code fragments, or a link to your code on GitHub, if it’s public.

Ralf

[RalfBecker]

Found and fixed the issue with Step 7:

fix not working app.ts/js

Ralf

[franestra]

Thank you for investing your time to look into this!
I managed to get it to work now, it was a mix of only having a .ts file and there being errors in the script… I imagine that error message probably meant the called methods didn’t get recognized because of syntax errors… I also used your updated base code from step 7