(Experience Builder) Can I pass custom props into widget from settings?

succip — Tue, 16 Jan 2024 17:39:37 GMT

Hello,

I'm hoping to build a series of customizable widgets. I like the idea of building them in experience builder and offering customizable options in experience builder's WYSIWYG editor.

As a training exercise, I'm trying to extend the latitude/longitude example widget to offer a background colour changing option. Changing something like the map or dataset featured in a widget makes sense to me, but passing a custom prop like background colour seems more difficult.

Is this possible? I'll follow with my setting.tsx and widget.tsx.

Any help is greatly appreciated.

setting.tsx

import { React, appActions, getAppStore } from "jimu-core"; import { AllWidgetSettingProps } from "jimu-for-builder"; import { MapWidgetSelector } from "jimu-ui/advanced/setting-components"; import { ColorPicker } from "jimu-ui/basic/color-picker"; const Setting = (props: AllWidgetSettingProps<any>) => { const onMapWidgetSelected = (useMapWidgetIds: string[]) => { props.onSettingChange({ id: props.id, useMapWidgetIds, }); }; const onColorSelected = (newColor: string) => { // do I pass the new colour here? }; return ( <div className="widget-setting-demo"> <MapWidgetSelector useMapWidgetIds={props.useMapWidgetIds} onSelect={onMapWidgetSelected} /> Background Color: <ColorPicker onChange={onColorSelected} /> </div> ); };

widget.tsx

import { React, AllWidgetProps, IMState, ReactRedux, getAppStore } from "jimu-core"; import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis"; import Point from "esri/geometry/Point"; const { useState } = React; const { useSelector } = ReactRedux; const Widget = (props: AllWidgetProps<any>) => { const [latitude, setLatitude] = useState<string>(""); const [longitude, setLongitude] = useState<string>(""); const widgetState = useSelector((state: IMState) => state); const activeViewChangeHandler = (jmv: JimuMapView) => { if (jmv) { jmv.view.on("pointer-move", (evt) => { const point: Point = jmv.view.toMap({ x: evt.x, y: evt.y, }); setLatitude(point.y.toFixed(3)); setLongitude(point.x.toFixed(3)); }); } }; return ( <div className="widget-starter jimu-widget"> {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 && ( <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler} /> )} <p> {/* I want to change background colour here VVVVVVV */} <div style={{ backgroundColor: "green" }}> Lat/Long: {latitude} {longitude} </div> </p> </div> ); }; export default Widget;

I'd like the user to edit the backgroundColor using something like this:

Re: (Experience Builder) Can I pass custom props into widget from settings?

RalucaNicola1 — Fri, 19 Jan 2024 08:49:48 GMT

First of all, most of the widgets have a background property that users can set in the style panel:

But as I understand, you want to do this for your own learning. Not sure if it's the best way, but the way I did it for a widget I once built, was to have a backgroundColor property in config.json. Then in the ColorPicker component I keep it in sync with the config property: see code. And onChange will update the property whenever the user changes it: see code. We can access this property in the widget props (the config is set on the widget props).

Re: (Experience Builder) Can I pass custom props into widget from settings?

succip — Tue, 23 Jan 2024 21:59:05 GMT

This works as intended and I finally understand how this works. Thank you so much for your help!

topic Re: (Experience Builder) Can I pass custom props into widget from settings? in ArcGIS JavaScript Maps SDK Questions

(Experience Builder) Can I pass custom props into widget from settings?

Re: (Experience Builder) Can I pass custom props into widget from settings?

Re: (Experience Builder) Can I pass custom props into widget from settings?