Wrapping custom js api widget as ExB widget fails on dojo/i18n

[MatejVrtich]

Hi,

I have a custom widget written in JS API 4.x and I followed the https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/samples/js-api-widget to wrap the widget inside an ExB widget.

Let's assume the custom JS API widget is called Template and the build/transpiled files structure is:

- \Template.js

- \Template\TemplateViewModel.js

- \Template\nls\Template.js

- \Template\css\Template.css

Then I followed these steps to add the widget into the ExB: 

- added the custom widget's transpiled files into the ExB widget's lib folder (your-extensions\widgets\my-custom-widget\src\runtime\lib)

- imported the custom widget inside the ExB widget class (import Template from "./lib/Template")

- create the widget instance as showcased in the sample mentioned above

Then, in runtime of the ExB application, loading the widget fails on systemjs.js fetching nls/localization files of the custom JS API widget.

As my custom JS API 4.x widget imports its localization files using dojo/i18n!./Template/nls/Template, this does not work while wrapping the widget inside an ExB widget.

What is the best practice to wrap custom JS API widgets inside an ExB widgets?

Thanks,

Matej

[DavidMartinez]

Hi Matej,

Do you mean using one of the JS API widgets or a custom widget that is written using the JS API? Did you convert your code to a React widget seems like it is a Dojo widget because of the system.js file?

Thanks,

David

[MatejVrtich]

Hi David,

Yes, it is a custom widget written using the JS API.

As the JS API has its own widget framework, the idea is to encapsulate the custom functionality using this framework to use it in custom JS API apps outside the ExB scope. However, it would be handy to reuse this custom JS API widgets in ExB by wrapping them.

Do you say that using custom JS API widgets (no React, just JS API widget framework) in ExB is not supported, because of dojo?

Thanks,

Matej

[DavidMartinez]

Hi Matej,

It has to be a react component-based widget to work in ExB.  You would have to take your JS API widget and take the output of our TypeScript transpile and then take that output and include/import it into an Experience Builder widget. Similar to the sample you pasted above from our SDK.  We import the types from the JS API, which allows us to use the widgets from JS API widgets in the builder and those they may not be included. For example, to use the editor widget you would do something like:

import Editor = require('esri/widgets/Editor');

const newEditor = new Editor({

view: jmv.view,

container: container

});

Cheers,

David

[DavidMartinez]

Correction above your TypeScript transpile. 

[MatejVrtich]

Hi David,

I understand that the widget for ExB has to be a React based widget. That's the reason why I wrap my custom JS API widget inside an ExB widget as showcased in the sample from your SDK.

I took my custom JS API widget transpiled files (no webpack, just tsc compiler), placed them in my custom ExB widget folder (your-extensions\widgets\my-custom-widget\src\runtime\lib) and then imported my custom JS API widget inside the ExB widget:

import Template from "./lib/Template";

const template = new Template({

  view: this.mapView,

  container: this.apiWidgetContainer

});

When I run the ExB app in a runtime mode and open the widget, systemjs error is logged in a console as it fails to load a dojo/i18n module from my custom JS API widget. My custom JS API widget is using dojo/i18n module to load nls files (JS API widgets use dojo/i18n to manage localization files).

So, I did another test.

I created second JS API widget without nls files (no dojo/i18n module) and wrapped it inside the ExB widget.

Then, in a runtime of the ExB app, this error message is logged in a console: "WidgetWithoutI18n_1.default is not a constructor" (WidgetWithoutI18n is my custom JS API widget).

It seems that ExB's module loader has some problems loading my custom JS API widget files.

I attach my custom JS API widgets project, you can have a try.

There are two widgets inside:

- Template - widget with nls files

- WidgetWithoutI18n - no nls files

Thank you,

Matej

[DavidMartinez]

Hi Matej,

We will need some time (this week) to go through this specific example to see what is the best way to make this type of widget work in Experience Builder. 

Thanks,

David

[MatejVrtich]

Hi David,

I am looking forward to your reply.

Thanks,

Matej

[MatejVrtich]

Any update on this?

Thanks,

Matej

[DavidMartinez]

Matej Vrtich‌, apologize for the delay, one of us is going to look at it tomorrow.

David