nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

EHQAdmin

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.png Screenshot 2023-09-25 at 4.50.23 PM.png

Find more posts tagged with

Accepted answers

All comments

cgillgrass

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.

EHQAdmin

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,
    });

EHQAdmin

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.

EHQAdmin

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

cgillgrass

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.

EHQAdmin

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

cgillgrass

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/

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.