Select to view content in your preferred language

Help breaking down widget api references (widget.tsx)

349
4
Jump to solution
09-13-2024 05:33 AM
PLadd
by
Frequent Contributor

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.
1 Solution

Accepted Solutions
JeffreyThompson2
MVP Regular Contributor

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

 

GIS Developer
City of Arlington, Texas

View solution in original post

4 Replies
JeffreyThompson2
MVP Regular Contributor

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

 

GIS Developer
City of Arlington, Texas
TimWestern
Frequent Contributor

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


PLadd
by
Frequent Contributor

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?

0 Kudos
TimWestern
Frequent Contributor

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

TimWestern_0-1728654449256.png



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


TimWestern_1-1728654567707.png

 




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/ 

0 Kudos