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.
// 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 Relationship
.
// 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. Text
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.
// 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)**.**"
}),
]
});