Edit FeatureLayers with form elements

How it works

This sample demonstrates how to setup form elements to edit a FeatureLayer using the Editor widget. The form elements are configured through the FormTemplate, and the elements determine what fields and content will be displayed in the Editor’s form.

FieldElement

The sample utilizes FieldElements to display only a subset of the total number of fields on the layers. The following code snippet illustrates two of the field elements used in the sample. One of the field elements uses a ComboBoxInput and the other field element uses a RadioButtonsInput to display the list of domain values for their corresponding fields.

Use dark colors for code blocksCopy
// Initialize a FormTemplate with two FieldElements
const formTemplate = new FormTemplate({
  elements: [
    new FieldElement({
      fieldName: "TYPE_OF_HAUNTING",
      label: "Type of haunting",
      input: {
        type: "combo-box" // Displays a combo box for the domain values
      }
    }),
    new FieldElement({
      fieldName: "TEMPERATURE_DROP",
      label: "Was there a drop in temperature?",
      input: {
        type: "radio-buttons", // Displays radio buttons for the domain values
        showNoValueOption: false
      }
    })
  ]
});

RelationshipElement

The data in the sample contains a one-to-many relationship between its two layers. To view a layer’s related records in the form for Editor, a RelationshipElement is required as an element in the layer’s FormTemplate. The following code example demonstrates how to initialize a RelationshipElement.

Use dark colors for code blocksCopy
// Initialize a FormTemplate with a RelationshipElement
const formTemplate = new FormTemplate({
  elements: [
    new RelationshipElement({
      description: "Reported hauntings in this county.",
      orderByFields: [{
        field: "TYPE_OF_HAUNTING",
        order: "desc"
      }],
      relationshipId: 0
    })
  ]
});

TextElement

TextElements are used to add additional text content to a form. TextElements support “plain-text” and “markdown”. The code example below illustrates three text element examples that utilize markdown. One of the text elements displays a heading and italicized text, the second element displays bold and an ordered list, and the third text element displays linked text. Take a look at the TextElement.text documentation for a list of supported markdown syntax elements.

Use dark colors for code blocksCopy
// Initialize a FormTemplate with three TextElements
const formTemplate = new FormTemplate({
  elements: [
    // This text element uses markdown to display a heading and italicized text
    new TextElement({
      textFormat: "markdown",
      text: "# Report a haunting experience\n _This survey is anonymous_"
    }),
    // This text element uses markdown to display bold text and an ordered list
    new TextElement({
      textFormat: "markdown",
      text: "**Most common hauntings** \n1.  Residual\n2.  Objects\n3.  Shadows"
    }),
    // This text element uses markdown to display linked text
    new TextElement({
      textFormat: "markdown",
      text: "**Article containing a list of haunted locations in the United States:** [_List of Reportedly Haunted Locations in the United States_](https://en.wikipedia.org/wiki/List_of_reportedly_haunted_locations_in_the_United_States)**.**"
    }),
  ]
});

MapView

Editor