You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {i18n.unsupportedBrowser.chrome}
  • Firefox
  • Safari
  • undefined
Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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

Sample search results

TitleSample
Loading...