search

jccartwright / exb-widgets

sandbox for custom widgets to be used in ArcGIS Experience Builder
0 stars 1 forks source link

how to open window using custom button? #26

Closed jccartwright closed 1 year ago

jccartwright commented 1 year ago

A OOTB button allows configuration of a link to open a new ExB window. However, I need a custom button widget in order to get the appropriate Calcite icon.

How can one construct the URL to open a window? Can the OOTB widget be extended to support custom icon? Better to fork (dist/widgets/common/button)? If the latter, not clear how to add SVG since just dropping in the assets folder doesn't work.

shawnmgoulet commented 1 year ago

@jccartwright to open a window via a link, you can use the ?dlg=dialogId: string parameter which is listed in: ./client/jimu-core/lib/types/url-parameters.d.ts > UrlParameters interface. Another option is to use the jimuHistory API, specifically the jimuHistory.changeDialog(dialogId: string) method which is in ./client/jimu-core/lib/browser-history.d.ts.

As explained succinctly here, dialog is the synonym of the window in the UI.

I am following up to see if Calcite or SVG icons can be used with any kind of workaround.

shawnmgoulet commented 1 year ago

@jccartwright

From the ExB team: SVG icons will not be supported and there is no recommended workarounds to use Calcite icons within OOTB buttons.

jccartwright commented 1 year ago

Thanks, I couldn't quite figure out the correct URL construction but the jimuHistory#changeDialog approach works fine.

I Have the custom button constructed and opening the dialog but can't seem to get the tooltime to work. Can you see the problem?

    <CalciteButton id="downloadButton" onClick={onClickHandler}><CalciteIcon id="buttonIcon" ref={buttonRef} icon="download" /></CalciteButton>
    <CalciteTooltip label='download data via ERDDAP' referenceElement={buttonRef.current}>
      <span>download data via ERDDAP</span>
    </CalciteTooltip>
    </>

I've tried using specifying the button and icon ids as the tooltip referenceElement as well as using the React persistent reference to the dom node.

shawnmgoulet commented 1 year ago

@jccartwright

Yes, that is the recommended approach by the ExB team.

For the Tooltip component, the developer edition of ExB v1.9.0 ships with @esri/calcite-components: "^1.0.0-beta.80". image What version is that resolving to in the app's runtime?

From the Tooltip documentation:

Tooltip Manager was deprecated in beta.82. In earlier releases, Tooltip must have a parent element of Tooltip Manager.

👆 could be the issue if it's resolving to v...beta-80-81.

If above doesn't check out (and/or if the CC version at runtime is beta-82+), another approach to try is instead of tying the button and the tooltip via the button component's ref, could you tie them via the button component's id - simple example using beta-97 here.

jccartwright commented 1 year ago

I saw that note but it didn't occur to me that the Calcite version bundled w/ ExB was so far out of date. Tried using the component's ref as well as w/ the TooltipManager but w/o success.

I just use the jimu-ui Tooltip instead until the next version of ExB (presumably w/ updated Calcite) is released