How to add radio buttons and check box in the ESRI editor widget?

782
7
09-25-2023 04:21 AM
EHQAdmin
New Contributor II

Hello,

I am currently in the process of integrating the editor widget, and I've encountered some challenges. Specifically, I am seeking guidance on how to incorporate various question types, such as radio buttons and checkboxes, within the widget. Additionally, I am interested in attaching event listeners to buttons like "submit," "update," and "delete" to facilitate calls to our application's API.

Any assistance or insights you can provide on these matters would be greatly appreciated.

Thank you.

Best regards,

Ankit Kumar


Screenshot 2023-09-25 at 4.44.33 PM.pngScreenshot 2023-09-25 at 4.50.23 PM.png

Tags (1)
0 Kudos
7 Replies
CraigGillgrass
Esri Regular Contributor

hello Ankit, 

With respect to your question 
"Specifically, I am seeking guidance on how to incorporate various question types, such as radio buttons and checkboxes, within the widget"

The all of the properties and configurations set on the feautreForm are handled via the formTemplate property.  You can configure the formTemplate through the the Forms command available in Map Viewer.  The formTemplate contains form elements that define if a fields appear as radio buttons or checkboxes.

0 Kudos
EHQAdmin
New Contributor II

Thank you, Craig, for your prompt response. I was actually attempting to utilize a form template, but I came across a syntax element that suggested adding a container: 'some DOM ID.' It appears this might be an attempt to place the form outside of the editor, depending on the container's placement. Could you please clarify this for me? I have also included the code snippets below to provide further context.

    const layer = new FeatureLayer({
      source: featureData,
      objectIdField: "ObjectID",
      geometryType: "point",
      renderer: {
        type: "unique-value",
        field: "style", // Field used for unique values (your "color" attribute)
        uniqueValueInfos: [
          {
            value: "bar", // Match this value in your "color" attribute
            symbol: barStyleSymbol, // Use the default symbol
          },
          {
            value: "atm", // Match this value in your "color" attribute
            symbol: atmStyleSymbol, // Use the default symbol
          }
        ],
        defaultSymbol: defaultStyleSymbol, // Use the default symbol
      },
      fields: [
        {
          name: "ObjectID",
          alias: "ObjectID",
          type: "oid",
        },
        {
          name: "Name",
          alias: "Name",
          type: "string",
        },
        {
          name: "Place",
          alias: "Place",
          type: "string",
        },
        {
          name: "color",
          alias: "Color",
          type: "string",
        },
        {
          name: "style", // Field for selecting Web Style Symbol
          alias: "Style",
          type: "string",
          domain: {
            type: "coded-value",
            name: "style",
            codedValues: [
              {
                name: "ATM",
                code: "atm",
              },
              {
                name: "Bar",
                code: "bar",
              },
            ]
          }
        },
        {
          name: "gender",
          alias: "Gender",
          type: "string",
          // editorType: "radio",
          domain: {
            type: "coded-value",
            name: "gender",
            codedValues: [
              {
                name: "Male",
                code: "Male",
              },
              {
                name: "Female",
                code: "Female",
              },
            ],
          },
        },
      ],
    });

    const editor = new Editor({
      view: view,
    });
0 Kudos
EHQAdmin
New Contributor II

It would be greatly appreciated if you could provide a code sample that includes an editor, a feature layer, and a form template containing various types of questions. This would help in better understanding and addressing our specific needs and requirements.

0 Kudos
EHQAdmin
New Contributor II

Thank you! I was able to load various input types using the form template. What is the input element used for checkboxes in ESRI?

0 Kudos
CraigGillgrass
Esri Regular Contributor

Unfortunately, checkboxes are not supported in the Form Template at this time; only combo boxes or radio buttons are supported.  I know the team responsible for this has checkbox support on their roadmap but I don't know what their timeframe is for support.

0 Kudos
EHQAdmin
New Contributor II

It's unfortunate, but is it possible for us to integrate our own custom form or the Calcite framework inputs into the editor?

0 Kudos
CraigGillgrass
Esri Regular Contributor

No, the Form Template follows the spec that is outlined here, so using your own is not possible.  It's not possible to insert custom inputs into the Editor, at least, not for what you're trying to do - you would need a custom widget for this I believe.

The SDK does have several examples demonstrating what is possible with the Editor widget; if you haven't looked at these, they may help with what you're trying to do:
https://developers.arcgis.com/javascript/latest/sample-code/widgets-editor-configurable/