Quickly find what the internet has created: https://github.com/search?o=desc&q=%22experience+builder%22&s=updated&type=Repositories
Attempt at creating some Experience Builder widgets.
As-is, none of these are ready to simply be plugged in.
From Jackie Roberts
Just the UI, nothing working in the back end
Works, but the UI needs to be cleaned up This is a good proof of concept of making widgets from Esri JS 4.X API work inside XB
https://developers.arcgis.com/experience-builder/sample-code/js-api-widget/
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Measurement.html
https://developers.arcgis.com/experience-builder/guide/debugging-widget-development/
-
Create a new widget in
client\your-extensions\widgets\your widget
(can copy simple)- Inside
manifest.json
update the name to match the folder name - Add the
jimu-arcgis
as a dependency
- Inside
-
npm start
inclient
-
From XB, create a new Experience, add the new widget. Save
-
To focus on widget, copy
server\src\public\apps\X\config.json
toclient\dist\experience\configs\config.json
-
open localhost:3001/experience?config=configs/config.json
- Open the /client folder as a project
match any properties the config.json and the src\config.ts
>> export interface Config { **** }
- in manifest.json add new locale for language
- create
src\runtime\translations\default.ts
>>export default { varName: "String" }
- create
src\runtime\translations\fr.js
>>define ({ varName: "French String" })
- in
widget.tsx
>>import defaultMessages from "./translations/default.ts"
; - helper function:
return this.props.intl
? this.props.intl.formatMessage({
id:id,
defeaultMessage: defaultMessages[id],
})
: id;
};
- then used by:
this.nls('varName');
- to use: &locale=fr in the URL