topic Re: Get Other Widgets in ArcGIS Experience Builder setting UI in ArcGIS Experience Builder Questions

Get Other Widgets in ArcGIS Experience Builder setting UI

bogind — Wed, 27 Dec 2023 08:40:10 GMT

I am creating a custom widget in ArcGIS experience builder and am trying to get a list of all the widgets currently defined for a page or for the entire app inside the setting UI.

I tried using the widget state to transfer the list, as well as create it in a similar way to the one used in the Control the Widget State example, but when I use the same code in setting.tsx I get the widgets that are used to create the settings UI sidebar, and not the current app/page widgets.

For example, when I run:

import { React, getAppStore } from 'jimu-core'; const { useState, useEffect } = React let state = getAppStore().getState(); const [appWidgets, setAppWidgets] = useState({} as unknown) const [widgetsArray, setWidgetsArray] = useState([] as any[]) // Update the appWidgets property once, on page load useEffect(() => { const widgets = state.appConfig.widgets setAppWidgets(widgets) }, [state]) // Update the widgetsArray and sidebarWidgetsArray properties every time appWidgets changes useEffect(() => { if(appWidgets) { const widgetsArray = Object.values(appWidgets) setWidgetsArray(widgetsArray) } }, [appWidgets])

Then widgetsArray is supposed to contain all of the widgets in the app, which works if run inside widget.tsx, but in setting.tsx I get a list of the setting UI components.

I know the process should be possible, because the MapWidgetSelector component from 'jimu-ui/advanced/setting-components' uses it to grab just the map components, but its code isn't open and I can't find how it's taking the widgets defined for a page.

Is there an efficient way to get all of the widgets in a specific app/page into the settings UI?

Re: Get Other Widgets in ArcGIS Experience Builder setting UI

JeffreyThompson2 — Tue, 02 Jan 2024 14:47:08 GMT

Did you know that Experience Builder actually uses two simultaneous React applications, one for the build mode and one for the page you are building? I think this is the core of your problem. What are you trying to accomplish?

If you want to see how a widget is configured, it's possible to open up the config.json file in your text editor and read the information directly. Go to /server/public/apps/yourAppNumber/config.json to see the published version and /server/temp/yourAppNumber/cdn/yourVersionNumber/config.json to see the current working version.

Re: Get Other Widgets in ArcGIS Experience Builder setting UI

bogind — Tue, 09 Jan 2024 05:07:38 GMT

I didn't know that, but it makes sense in a way, though I still don't understand how the instance for the build mode is getting the information about specifically the map widgets added.

What I want to create is a logger widget which will allow setting logs for actions for multiple widgets.
The idea being you could set an address for an API, set a call method (ie. GET/POST), and allow users to log specific events which will be preset for every widget or map tool.
I know that I can let users set everything for it through the config.json, but I wanted to allow selection of widgets through the widget settings UI.

Re: Get Other Widgets in ArcGIS Experience Builder setting UI

JeffreyThompson2 — Tue, 09 Jan 2024 14:04:41 GMT

https://community.esri.com/t5/experience-builder-custom-widgets/feature-panel-widget-1-7-1-9-8-22/ta-p/1147687

You might be able to get some inspiration from looking at Robert Scheitlin's Feature Panel. Much of the code is dedicated to auto-detecting a sidebar widget.

Re: Get Other Widgets in ArcGIS Experience Builder setting UI

MichaelLev — Wed, 10 Jan 2024 08:49:20 GMT

@JeffreyThompson2 , you mentioned EXB uses 2 simultaneous React Apps. It seems I know almost nothing on how EXB (Developer Edition) works... I worked much on WAB and now I am preparing to start develop custom widgets for EXB. It will help me to "understand" how EXB code works...

Can you please elaborate, and also direct me to proper documentation?

Re: Get Other Widgets in ArcGIS Experience Builder setting UI

bogind — Tue, 16 Jan 2024 11:12:18 GMT

I fount the solution by chance, in the message subscriber example.
It is possible to get the state and config of the internal app through:

import { getAppStore } from 'jimu-core'; // The app state getAppStore().getState().appStateInBuilder // The app config getAppStore().getState().appStateInBuilder.appConfig

It is then possible to get all of the pages, layouts and widgets that are already defined in the app

const internalAppConfig = getAppStore().getState().appStateInBuilder.appConfig const appWidgets = internalAppConfig .widgets