Creation of Custom Widget Issue

[itg-assistant]

Gerald Lemay asked 2025-08-04 16:34:11 UTC

Hi,

I've been working with WiseJ for a few years and just updated to WiseJ-4.  I've never tried to tackle using Widgets, but latency issues have forced me to try now.  I have a Windows Desktop vb.net app working on an Azure Server as a Web App.  I recently discovered the benefit of using ChatGPT to help with coding, so I started there.  The AI seemed to be well informed on WiseJ and I thought I had discovered a shortcut as I am not well versed in javascript.  Instead, the result has been disappointing with the AI  suggesting conflicting strategies and despite me pointing it to the WiseJ API, it seems to take its own path to helping me.  Admittedly, I'm being lazy, but I am in a time crunch as I have employees who depend on the app and some drawing functions are too slow.  I created a test project and it is failing by not finding the .js file.  The test  solution is attached.

I'm not asking for you to build my app but a few pointers would be appreciated.

Gerry

[itg-assistant]

Julie (ITG) answered 2025-08-04 16:48:46 UTC

Try setting the InitScript of the widget to your js code
https://docs.wisej.com/api/wisej.web/content/widget#initscript

[itg-assistant]

Gerald Lemay answered 2025-08-04 18:49:11 UTC

Thanks Julie!  As I mentioned, this is my first try at this.   The code make this look simple, add the widget, .js file, and a call, but I'm still unsure.

I added the "init" file OverlayCanvasWidget.js. In it's Properties I set the Build Action to "Embeded Resource" and the Copy to Output Directory to "Copy if Newer".

In the actual Widget I placed on my page I set the Package Name and Source, however in the InitScript, I'm not sure of the syntax of identifying the "init" file, which is "Scripts/Widgets/OverlayCanvasWidget.js".  I assume this is what it is looking for, but it doesn't work.  I can't find in the documentation how to do this specifically.

Another suggestion or two would be helpful.

Thanks much!

Gerry

[itg-assistant]

Julie (ITG) answered 2025-08-05 15:32:17 UTC

See attached test case.

You need to put all of the js code in a single file, in this case I put it in a file called startup.js.

If you want to load the js code from a file instead of setting it as a string in the InitScript, you need to create a new class that derives from Widget.

Public Class NewWidget
Inherits Wisej.Web.Widget
Public Overrides Property InitScript As String
Get
Return GetResourceString("WidgetTestApp.startup.js")
End Get
Set(value As String)
End Set
End Property
End Class

Note this line of code:

Return GetResourceString("WidgetTestApp.startup.js")

is where you are telling it where to find the js code. In VB.NET you don't need to include the folder name like you do in c#. See https://docs.wisej.com/docs/concepts/embedded-resources#resources-and-platform-folders

[itg-assistant]

Gerald Lemay answered 2025-08-06 13:39:50 UTC

Hi Julie,

I added a class OverlayCanvasWidget as per your suggestion, which contains Return GetResourceString("OverlayCanvasWidget.js").   "OverlayCanvasWidget.js" is set to Embedded Resource. I'm getting an error message on form load:

Error: "Unknown function: drawFurnishingsMovement"

I initialize the widget like this: Private WithEvents OverlayWidget As New OverlayCanvasWidget() and on load make a call to clear it:

OverlayWidget.Call("drawFurnishingsMovement", New Dictionary(Of String, Object) From {
{"dx", 0},
{"dy", 0},
{"objects", New List(Of Object)()}
})

Do I need a line in Default.html like: <script src="Scripts/Widgets/OverlayCanvasWidget.js"></script>?  What else could I be missing?

Thanks very much for you help!!

Gerry

[itg-assistant]

Julie (ITG) answered 2025-08-06 14:00:09 UTC

Can you attach a test case please?

[itg-assistant]

Julie (ITG) answered 2025-08-06 14:02:06 UTC

Actually I think the issue is this: You did Return GetResourceString(“OverlayCanvasWidget.js”). It should be GetResourceString(“WidgetTestApp.OverlayCanvasWidget.js”) You need the namespace.

[itg-assistant]

Gerald Lemay answered 2025-08-06 16:39:16 UTC

Hi Julie,

You suggestion about the GetResourceString was very helpful.  I'm still having problems with streamlining this application, I created a test project (attached).

• I used Button1 to draw a rectangle which fires the method "Test".  It didn't draw and the error: Unknown function: drawFurnishingsMovement showed, but with a second click and any subsequent clicks it worked fine.  Not sure what's happening there.  I thought I had initialization covered.

• I added some mouse handlers.  They don't seem to be working.  I created a test "TestWidgetSetup" method to use with the button for this and it failed as well.

In my real project, I simply want to drag some boxes across the widget that is superimposed on a picture box. The app uses GDI+ to draw the objects on the picture box but dragging them by redrawing via GDI+ is too slow.  The idea is do a final redraw of the scene without the objects stored in the picture box, with the objects I want to move then drawn on the widget superimposed on the background scene in the picture box.  I simply want to select an object and drag it to another position.  Perhaps there's an existing javascript out there that already can do this.

On a side note:  In the test project I tried to use Application.MainPage.top and similar to position my pictureboxes added to simlate my real project.  It showed Application.MainPage was nothing despite the call in Program.vb (Application.MainPage = new Page1()).  This works in my real project upgraded from WiseJ 2.5 but not in the new WiseJ4 project.  Just curious.

Thanks again,

Gerry

[itg-assistant]

Julie (ITG) answered 2025-08-07 13:44:13 UTC

To drag a control you can use Movable = true and the events StartMove and EndMove. Unfortunately, you have reached the limits of what we can provide as free support and you need to purchase a support package if you want further assistance. You can find more details here: https://wisej.com/services-packages/

[itg-assistant]

Gerald Lemay answered 2025-08-07 14:32:26 UTC

I realize you aren’t going to fix basic coding errors at this level. I got the project working with the aid of GitHub CoPilot. Once you figure out its limitations, it is amazing. ChatGPT, not so much. Thanks again!