Toggle action at runtime in custom widget

MarcBateEA

I have a custom widget that uses the zoom to features when my data filtering changes, but sometimes I want to disable this zooming at runtime.  How do I allow users to toggle this off and on?  Do I save the action for my particular widgetId and then remove it from the list of actions (no disable/.enable property?)  and then add it back if they want the zooming functionality back?

DataActionManager.getInstance().getActions()

JarrettGreen

Hey Marc,

Here's a sample of what I did. Similar to FangQi's suggestion, I added a component in my widget intended to allow the user to change the widget behavior at runtime. As a user flips the Switch, I capture the current state and pass it up to the widget state to be used elsewhere in the application.

const UserOptions = (props: AllWidgetProps<IMConfig>) => {
  const [isRotateImages, setIsRotateImages] = useState<boolean>(props.config.rotateImagesOnByDefault);

  useEffect(() => {
    // to immediately handle changes when the settings panel is re-configured
    // and pass up this value to the parent widget on initial load
    setIsRotateImages(props.config.rotateImagesOnByDefault);
    props.dispatch(appActions.widgetStatePropChange(props.id, 'isRotateImages', props.config.rotateImagesOnByDefault));
  }, [props.config.rotateImagesOnByDefault]);

  const handleIsRotateImagesChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setIsRotateImages(event.target.checked);
    props.dispatch(appActions.widgetStatePropChange(props.id, 'isRotateImages', event.target.checked));
  };

  const style = getStyle(props);
  return (
    <div css={style}>
      <div className="action-bar">
        <div className="options-header">User Options</div>
        <div>
          <Switch
            checked={isRotateImages}
            onChange={handleIsRotateImagesChange}
          />
          <Label className="option-label">Rotate Images</Label>
        </div>
      </div>
    </div>
  );
};