topic Re: Help breaking down widget api references (widget.tsx) in ArcGIS Experience Builder Questions

Help breaking down widget api references (widget.tsx)

PLadd — Fri, 13 Sep 2024 12:33:18 GMT

I'm trying to breakdown the coding in a widget.tsx file so I can customize to meet my own needs. In the sample "control-the-widget-state" the first line in the widget.tsx file is this:

import { React, type AllWidgetProps, getAppStore, appActions, ReactRedux, type WidgetProps, WidgetManager, type IMState, WidgetState } from 'jimu-core'

I understand what this line is doing but I can't find any documentation for some of these references. Take "appActions" for example. If I go to the jimu-core reference page here, there is no reference to a method, class, enumeration, or function called "appActions." I also looked in the React API library but found nothing.

Where is the API documentation for some of this stuff? It goes a long way in helping modify examples to meet my own needs.

Re: Help breaking down widget api references (widget.tsx)

JeffreyThompson2 — Fri, 13 Sep 2024 12:49:08 GMT

Honestly, inadequate documentation, especially on the developer side, is one of the biggest problems holding Experience Builder back. I have learned far more by reading through other people's code than I have the official documentation.

As for the appActions, it is an object with a number of methods for sending data between widgets. For example, this line of code can be used to close a Sidebar Widget.

getAppStore().dispatch(appActions.widgetStatePropChange(`widget_${sidebarId}`, 'collapse', false))

Re: Help breaking down widget api references (widget.tsx)

TimWestern — Fri, 13 Sep 2024 13:20:52 GMT

@JeffreyThompson2 is right, the documentation at times is not just sparse and limit, but silent on many of these tasks.

I find it sometimes useful to go in with an IDE like Visual Studio (Community or Code), or WebStorm create the code, and than use the tools in them to trace the references down.

That allows me to look at the code file it originates in, so that I can have some idea what its doing.

SO appActions traces to a app-actions.d.ts file under /client/jimu-core/lib/app-acftions.d.ts

However, I'll admit its not obvious if you search that file for appActions that what you are getting is not a 'class' but a module which contains a bunch of 'functions', so in a way the appActions name kind of acts like a namespace? for that file which defines that type.

Re: Help breaking down widget api references (widget.tsx)

PLadd — Mon, 23 Sep 2024 16:33:08 GMT

Thanks @TimWestern . This is very helpful in finding some of the nitty-gritty details that can't be found due to the lack of documentation. Perhaps it's obvious how you found the reference to appActions under lib/app-actions.d.ts (given the similarities in names), but how would you find others, such as getAppStore?

Re: Help breaking down widget api references (widget.tsx)

TimWestern — Fri, 11 Oct 2024 13:51:27 GMT

I may be wrong on this but I believe getAppStore is part of react-redux, which is bundled/imported in jimu-core:

the asterisk '*' means its importing all of it, but you won't find a react-redux folder under jimu-core

Any library that you install with npm (or that is installed by default via imports via the Exb/Jimu/Esri libraries ) but aren't written ESRI will likely be found in the node_modules folder somewhere.

of course, if you find it there, there's a possibility that library may have documentation outside of ESRI's site somewhere, so you can probably search for and find it.

IIRC this one might be at: https://react-redux.js.org/