topic Wrapping custom js api widget as ExB widget fails on dojo/i18n in ArcGIS Experience Builder Questions

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

MatejVrtich — Wed, 20 May 2020 13:31:14 GMT

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

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

DavidMartinez — Thu, 21 May 2020 18:07:04 GMT

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

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

MatejVrtich — Thu, 21 May 2020 21:01:36 GMT

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

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

DavidMartinez — Thu, 21 May 2020 23:16:46 GMT

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

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

DavidMartinez — Thu, 21 May 2020 23:17:50 GMT

Correction above your TypeScript transpile.

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

MatejVrtich — Fri, 22 May 2020 08:17:39 GMT

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

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

DavidMartinez — Tue, 26 May 2020 19:19:42 GMT

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

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

MatejVrtich — Wed, 27 May 2020 12:36:04 GMT

Hi David,

I am looking forward to your reply.

Thanks,

Matej

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

MatejVrtich — Tue, 09 Jun 2020 09:50:35 GMT

Any update on this?

Thanks,

Matej

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

DavidMartinez — Thu, 11 Jun 2020 20:55:00 GMT

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

David

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

DavidMartinez — Mon, 15 Jun 2020 20:09:11 GMT

Matej Vrtich‌ please check out this post from Gavin Rehkemper https://community.esri.com/people/GRehkemper-esristaff/blog/2020/06/15/using-an-arcgis-javascript-api-style-widget-within-a-custom-experience-builder-widget

Cheers,

David

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

MatejVrtich — Thu, 18 Jun 2020 07:47:08 GMT

David Martinez‌ and Gavin Rehkemper‌, thank you for your help in this.

The main issue in my case was missing the arcgis dependency in the ExB widget's manifest file.

"dependency": ["jimu-arcgis"]

After adding this dependency, I can use my custom js api widget in the ExB widget.

However, if I my custom js api widget uses the dojo/i18n module for localization, the ExB cannot load the localization files of the custom js api widget. The "Template" widget from the sample project attached at the beginning of this thread is an example of custom js api widget with localization files.

Anyway, I already rewritten my js api widget as ExB widget and have to say, it was the best learning experience.

I'm just curious, if there is some way to solve this without the rewrite.

Thanks,

Matej