Store settings in HCL Engagement Center widgets

I had the task to create a new Highlights widget. The documentation has some examples on how to create a new widget https://help.hcl-software.com/connections/v8-cr4/connectors/icec/cec-custom-widget-api.html

To add properties to your widget you simply provide a customEditor in the registerCustomWidget command.

function editSampleConfig(container$, widgetData) {
   var instanceID=XCC.T.getXccPropertyValue(widgetData,"widgetinstanceid");
   return [
      XCC.U.createTextInputOnTheFly('Title', widgetData.title, 'title'),
      XCC.U.createTextInputOnTheFly('Height', widgetData.height, 'height'),
      XCC.U.createTextInputOnTheFly('InstanceID', instanceID, 'instanceid'),
  ];
 }

And a simple save function

function saveSampleConfig(container$, widgetData) {
      
      widgetData.title = container$.find('input[name=title]').val();
      widgetData.height = container$.find('input[name=height]').val();
      var instanceid = container$.find('input[name=instanceid]').val();
    

      XCC.T.setXccProperty(widgetData, {
        "propKey": "widgetinstanceid",
        "propValue": instanceid,
        "propType": "string"
      });
}

And the register function looks like

  XCC.W.registerCustomWidget({
      id: 'cloud.collab.view-sample.widget',
      name: 'View Sample Widget',
      icon: 'th-large',
      createCustomWidget: render,
      customEditor: editSampleConfig,
      synchUiToWidgetDataObject: saveSampleConfig,
    });