topic Copying Esri developer widget to Enterprise in Experience Builder Custom Widgets

Copying Esri developer widget to Enterprise

clc — Mon, 16 Oct 2023 16:11:37 GMT

Hi,

I am using Experience Builder Enterprise Edition for production work and I would like to use the Timeline widget. This widget is available in the online and developer versions but not in the enterprise.

I found the folder for this widget in my developer environment and I tried to upload it on my portal (the same way I do it for my own custom widget) but it was not working. Any insights?

Thanks.

Catherine

Re: Copying Esri developer widget to Enterprise

clc — Mon, 16 Oct 2023 16:31:46 GMT

Forgot to add the error message:

Cannot read properties of undefined (reading 'useEventCallback')

Re: Copying Esri developer widget to Enterprise

JeffreyThompson2 — Mon, 16 Oct 2023 17:31:17 GMT

I have not done this before, so you are ahead of me. Here is the guide in case you need it.

https://www.esri.com/arcgis-blog/products/arcgis-enterprise/developers/add-experience-builder-custom-widgets-in-arcgis-enterprise/

Possible issues:

In Developer Edition, copy the ESRI source code and rename the widget before trying to upload it. (I don't think this will fix your immediate problem, but if you don't rename your widget you will have issues when the ESRI Timeline widget comes out.)
Make sure you are uploading the dist folder, not the src folder.
There could be version compatibility issues. Maybe try downgrading the version number in the manifest.json.

Re: Copying Esri developer widget to Enterprise

clc — Mon, 16 Oct 2023 18:24:46 GMT

Thanks for your answer, but I thought I did all that:

First I copied the Esri timeline widget folder from the client/dist/widgets/common to client/your-extensions/widgets folder. I renamed the widget clcTimeline, updated the manifest.json file for the name, label. I also deleted the test and dist folders. I tested this widget in the developer version and it worked. One thing bothered me, in the insert widgets custom section of the builder, it still showed up as Timeline...

I then run 'npm run build:prod' in the client/your-extensions/widgets folder just like for my own custom widgets. Finally I copied on my server the clcTimeline folder from client/dist-prod/widgets.

I also thought of version compatibilities, so on my server I changed version and exbVersion from 1.12.0 to 1.10.0. It did not change anything, maybe I should have done these changes in the developer environment?

Re: Copying Esri developer widget to Enterprise

JeffreyThompson2 — Mon, 16 Oct 2023 18:44:53 GMT

You can set the name of a widget in the Builder mode using the "label" property of manifest.json.

You should get the best results by letting webpack do it's thing in Developer Edition.

Each version of Experience Builder is linked to a specific version of the JavaScript API, so if the Timeline widget incorporates features from one of the latest versions of the API, there may not be an easy way of bringing it into Enterprise.

Re: Copying Esri developer widget to Enterprise

clc — Mon, 16 Oct 2023 19:04:53 GMT

Thanks again for your remarks. It is most likely a problem of versions. I suppose I'll have to wait.

Just one more question about the label of the widget. I don't understand why in the builder of my developer version, the widget still shows up in the custom section as Timeline (the label of Esri) even though I modify its manifest.json. When I add the widget to an experience, the setting panel shows my updated label as expected.

Re: Copying Esri developer widget to Enterprise

JeffreyThompson2 — Mon, 16 Oct 2023 19:13:52 GMT

Have you restarted your client server since adding the label property?

Re: Copying Esri developer widget to Enterprise

clc — Mon, 16 Oct 2023 19:33:21 GMT

Yes. I checked my webpack console and I have the 2 entries:

Entrypoint widgets/clcTimeline/dist/runtime/widget 496 KiB = widgets/clcTimeline/dist/runtime/widget.js
Entrypoint widgets/clcTimeline/dist/setting/setting 319 KiB = widgets/clcTimeline/dist/setting/setting.js

as expected.

Re: Copying Esri developer widget to Enterprise

JeffreyThompson2 — Mon, 16 Oct 2023 19:40:11 GMT

Try this:

Remove the clcTimeline folder from your file structure.
Restart your client server.
Re-add the clcTimeline folder to the file structure.
Restart your client server.

Re: Copying Esri developer widget to Enterprise

clc — Mon, 16 Oct 2023 19:53:03 GMT

Tried your steps, cleared the cache...still Timeline

I will wait for the next Enterprise release, it is just puzzling! Thanks again for all your suggestions.

Re: Copying Esri developer widget to Enterprise

clc — Mon, 16 Oct 2023 20:01:30 GMT

One more thing: I brought the clcTimeline folder to the developer edition 1:11 and it showed the same error than the one in the enterprise, so it is definitely a problem of missing features in previous versions of Javascript API.