The sample makes use of both the Popup and Editor components. It does this by demonstrating how to add a custom edit action to a PopupTemplate. The popup displays a custom Edit feature action. It works by starting an Editor workflow for editing attribute data. Edits can then be made and updated. Once this happens, the popup’s content is updated to display these feature edits. One thing to note is that the Editor works with feature layers that are editable. In this case, we have a service that is set to allow only attribute editing.

In addition to showing a custom editing action, this sample also demonstrates how you can use a custom function to generate two popup content elements. In this example, we show how to display custom TextContent and AttachmentsContent. If a specific field value is updated, the text displays this as a certain color in the popup.

Since this sample is a customized workflow using two separate components, we need to watch if the user backs out of updating the feature attributes. In order to do this, we watch the Editor component’s state to become ready. The Editor is ready when it is initially opened. The state is updated to this after clicking the back button. Once this happens, we remove the Editor and show the popup.

To use this sample, simply click a location on the map to see its corresponding location in a popup. Once the popup displays, click on the custom Edit features action. You should notice the attribute editing workflow display. You can now update some of the attribute values for this selected feature. Once you update these edits, the popup displays again with the updated content.