Setting UI Inputs programmatically

Community Help
1

My goal is to be able to allow a user to save and restore all the UI Input settings on a page. My current approach is to create an object containing all the current UI values and save a stringified version of it to a local file. To restore I load that object and programmatically set each UI Input using

 const setInput = (input, value) => {
    input.value = value;
    input.dispatchEvent(new Event("input"));
  };

(as detailed in synchronised inputs).

This works fine for most inputs, but I have the following questions:

  1. How do you reference and set an Input inside a Form?
  2. How do you reference and set a selected table row?

The following illustrates the approach and the problem:

And if there is a better pattern for saving/restoring a page’s UI settings, I’d love to know.

2

Afaik the more common approach is to store the settings as query parameters in the URL, with some variations:

You can cram quite a lot of information into a URL, and if that’s still not enough there are additional steps you can take (gzip compression, or more efficient encoding schemes like protobuf).

Values must be set on the top-level view only. So instead of referencing group.gTable, you store the value of group, and assign it to viewof group.value.

This particular case seems to be a bug in Inputs.table() though. With multiple: false, assigning a new value will update the view’s selection, but it won’t update the individual row inputs. (cc @mbostock)

1 Like
3

Really helpful answer - thanks.