How to set multiple items using onSettingChange

[KenBuja]

I'm attempting to set two items in the config file in my Settings widget using this code, but it's only setting the second item ('templateLayerId').

  function onDoneClicked(): void {
    onSettingChange({
      id: id,
      config: config.set('templateLayerName', selectedItem.title),
    });
    onSettingChange({
      id: id,
      config: 
        config.set('templateLayerId', selectedItem.id),
    });
  }

What's the proper syntax for setting multiple items?

[JeffreyThompson2 · Accepted solution]

I recently went through this and I found that I could not set more than one setting at a time. The setting changes needed to be separated by a user interaction. I believe what was happening was whenever a setting is changed it triggers a re-render which wipes the data from the first change before the user can click the save button in the Builder to permanently save the changes. I had five interrelated settings, so I needed to make them all change together. My solution was to bundle all of my related settings into a single JSON object in the config file, so each onSettingChange call was just changing one object. Looking at the config.json files in the Server, this appears to be how the Dev team also deals with multiple setting changes at once. 

[KenBuja]

Thanks @JeffreyThompson2 

I modified the config to create a new setting of this type

export interface Config {
  //other settings
  templateLayer: TemplateLayer;
}
export type TemplateLayer = {
  id: string;
  name: string;
};

and used this code to update it

onSettingChange({
  id: id,
  config: config.set('templateLayer', {
    id: selectedItem.id,
    name: selectedItem.title,
  }),
});

[JeffreyThompson2]

Have you tested this code? Did it work? I see a dangling comma in your config.set() call. And dangling commas break JSON.

[KenBuja]

Yes, this does work properly. That dangling comma is added by the VS Code Prettier and didn't have an effect on it