Adding Widget Settings to Custom Widgets.

I am trying to add widget settings to my custom widget using these methods, but I do not see any settings when I am in form builder.

JFCustomWidget.getWidgetSetting(parameterName)

Here is the snippet of code from my project. My widget is used to calculate AMI based on county, income levels and household size. I have precoded 3 counties, but I would like to allow users to adjust the numbers and counties since they change every year and differ so much across locations.

  JFCustomWidget.subscribe("ready", async ()=>{





    /* fetch user-supplied matrix (if any) */

    const url = JFCustomWidget.getWidgetSetting("MatrixURL");

    if(url){

      try{

        const json = await fetch(url).then(r=>r.json());

        if(json.counties) amiTable = json.counties;

      }catch(e){ console.warn("Matrix fetch failed, using fallback."); }

    }

'MatrixURL' is replaced with a URL to a JSON file storing the settings.

Please guide me on how to set up settings. I have several other widgets that need toggle settings and other features.

Hi HRDC Compliance,

Thanks for reaching out to us for help. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

To add widget settings to your custom widget so they appear in the form builder, you need to define the settings in your widget's configuration properly. The getWidgetSetting method retrieves settings, but you must first set up those settings in the widget's settings panel.

Let me walk you through it:

1. Define your widget settings schema: In your widget's code, create a settings configuration that specifies the parameters users can adjust, such as counties, income levels, and household size.
2. Expose these settings in the form builder: Ensure your widget's settings are registered so they appear in the form builder's widget settings panel. This usually involves defining the settings in the widget's manifest or configuration file.
3. Use getWidgetSetting to retrieve values: In your widget's runtime code, use JFCustomWidget.getWidgetSetting('settingName') to access the user-configured values.

For toggles and other features, you can add boolean or other input types in your widget settings schema to allow users to enable or disable features.

If you want to allow users to update data dynamically (like your counties and income levels), you can provide a URL setting (like your 'MatrixURL') where users can specify a JSON file, which your widget fetches and uses.

Make sure your widget's settings are properly defined and registered to appear in the form builder UI. This setup is essential for the settings to be visible and editable.

Give it a try and let us know how it goes.

Hi hsgcompliance,

Thanks for reaching out to Jotform Support. Just to clarify, when you say settings, are you referring to the right properties panel as shown on the screenshot?

If yes, unfortunately, there is no method mentioned on this page on how to create one for your custom widget. We can forward this to our Developer Team as a feature request once we confirm this. If not, can take a screenshot of what’s happening, that'll help us to understand better what’s going on. Let me show you how to post a screenshot to our Help Center:

1. On the Help Center page, scroll down to the Your Answer section and click on the Image icon.

2. Drag and drop your image into the Upload box, or click on it and select your file.

3. Then, click on the Add button in the bottom-right corner of the window.

4. To resize it, click on your screenshot and then click on one of the boxes in the corners, and drag it inward.

5. Once you're finished, click on the Post Answer button at the bottom right of the Your Answer section.

That's it. Once we hear back from you, we'll be able to help you with this.

I need more explanation on how to register widget settings.

Sorry I replied to the AI, not you.

For Widget settings, I mean the magic wand. For example with the calculate form field:

Hi hsgcompliance,

Can you specifically tell us what you want to learn more about adding a Widget Setting on your Custom Widget so we can check it on our end? As of this time, we only have the Jotform API Widgets documentation that lays down all the details you need when building custom widgets.

If your question is not addressed by the documentation, you can tell us its details so we can check if it is possible with the current setup of custom widgets.

Once we hear back from you, we'll be able to help you with this.

I think I have figured out that I am looking to add parameters to my widget during registration. And then I get those parameters with getWidgetSetting('parameterName').

Hi hsgcompliance,

When you Register Your Widget, you can add your parameters that will be displayed when clicking the Wand icon of the widget. Take a look at the screenshot below to see the Parameters section:Check out the screenshot below to see how it works when testing on a form:Reach out again if there’s anything else we can help you with.

Thank you!