Advanced Attribute Editing

Explore in the sandboxView live

This sample uses the FeatureForm widget to update attributes of existing features by calling the applyEdits function when a user selects a feature on the view.

Instead of displaying all of the specified fields in various form elements, certain fields display based on whether they meet a specified condition. It does this using the visibilityExpression property found on both FieldElement and GroupElement classes. This property takes an Arcade expression, and if it resolves to true, the field renders within the form.

The first field element displays a field labeled Issue status. If the value is Completed and the Resolution field is not empty, the second field labeled Resolution will display. Based on the status field, one or two grouped fields display.

Prior to version 4.16, formatting fields and groupings was handled via FieldConfig and/or FieldGroupConfig configurations. Moving forward, the preferred way is through setting a feature layer and/or form's formTemplate property. This property accepts an array of field and/or group elements.

// This snippet sets individual field elements within the form's template
// Individual field elements to display
const fieldStatus = new FieldElement({
  fieldName: "status",
  editable: false,
  label: "Issue status",
  description: "E.g. submitted, received, in progress, or completed.",
});

const fieldResolution = new FieldElement({
  fieldName: "resolution",
  label: "Resolution",
  editable: false,
  description: "Resolution if status is set to Completed",
  visibilityExpression: "($feature:any.status == 'Completed') && (!(IsEmpty($feature:any.resolution)))",
});

// The following sets field elements and passes it into a group element

const fieldCat = new FieldElement({
  fieldName: "category",
  label: "Category"
});

const fieldAnimal = new FieldElement({
  fieldName: "AnimalProbType",
  label: "Animal problem type",
  visibilityExpression: "$feature:any.category == 'Animal'",
  description: "E.g. barking dog, bite, etc."
});

const fieldBlight = new FieldElement({
  fieldName: "BlightProbType",
  label: "Blight problem type",
  description: "E.g. graffiti, abandoned vehicle, etc.",
  visibilityExpression: "$feature:any.category == 'Blight'"
});

//Create the group element and pass in the field elements from above
const groupUpdate = new GroupElement({
  label: "Update issue",
  description: "If work has not yet begun on issue, categorize and detail the problem",
  visibilityExpression: "($feature:any.status == 'Submitted') || ($feature:any.status == 'Received')",
  elements: [fieldCat, fieldAnimal, fieldBlight]
});

// Create the feature form and pass in the elements from above into the form template
const form = new FeatureForm({
  container: "form",
  groupDisplay: "sequential",
  formTemplate: {
    title: "Report issues",
    description: "Provide information to the questions below",
    elements: [fieldStatus, fieldResolution, groupUpdate, groupPOC]
  }
});