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

[FangQi]

Hi Marc,

I think maybe you can try to put a toggle option in your custom widget like 'Enable/Disable Zoom to' and save the option in something like the 'mutableStore' or 'appRuntimeInfo'. Make sure your widget listens to the changes of the 'mutableStore' or 'appRuntimeInfo'.

After doing this, try to add this option in your action's 'isSupported' checking logic. In this way you can let the end users toggle the action on/off at runtime.

[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>
  );
};