nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Trouver plus de publications taguées avec

Accepted answers

All comments

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.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.