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

[succip]

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: 

[RalucaNicola1 · Accepted solution]

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

[succip]

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