0

I am creating a custom widget in ArcGIS experience builder and am trying to get a list of all the widgets currently defined in 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 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 uses it to grab just the map components, but it's code isn't open and I can't find how it's done.

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

1 Answer 1

1

I found the answer in the actions/query-action-setting.tsx file of the message subscriber example.
Apparently the ArcGIS Experience builder seperates between the app you are building and the builder app you are using to build it, but they have some communication between them. It is possible to get the internal app state, and through that its app config, and through it the pages, layouts and widgets through:

getAppStore().getState().appStateInBuilder.appConfig

And after that you can just grab any widget you want by its ID, like shown in the example at the getInitConfig function:

const messageWidgetId = this.props.messageWidgetId
const config = getAppStore().getState().appStateInBuilder.appConfig
const messageWidgetJson = config.widgets[messageWidgetId]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.