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; } } }

Help breaking down widget api references (widget.tsx)

PLadd

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.

Find more posts tagged with

Accepted answers

Jeff.Thompson@arlingtontx.gov_arlingtontx

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))

All comments

TimWestern

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/

PLadd

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?

TimWestern

@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.

Jeff.Thompson@arlingtontx.gov_arlingtontx

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))

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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