topic How to change the labels of the Editor Widget in ArcGIS JavaScript Maps SDK Questions

How to change the labels of the Editor Widget

JohnMDye — Thu, 03 Sep 2020 17:11:52 GMT

Looking into the JSAPI Editor Widget, there do not appear to be properties that I can update to alter the label of the widget itself or the accordion buttons within.

I'd like to make those labels say something else, such as 'Issue Reporter', 'Edit a Report' and 'Create a new report'. Since there are no properties to alter, I thought I might be able to do this by grabbing the elements by their ID or Classname then updating the innerText property for each.

Not sure if that's the best approach and also not sure how to know when call a function to do it since the widget is added after the page has been loaded.

Re: How to change the labels of the Editor Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:29:38 GMT

John,

Direct DOM manipulation is a good route:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Edit features with the Editor widget | Sample | ArcGIS API for JavaScript
      4.16
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      .esri-editor .esri-item-list__scroller {
        max-height: 350px;
      }
    </style>

    <script>
      require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Editor"
      ], function (WebMap, MapView, Editor) {
        // Create a map from the referenced webmap item id
        let webmap = new WebMap({
          portalItem: {
            id: "6c5d657f1cb04a5eb78a450e3c699c2a"
          }
        });

        let view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(function () {
          view.popup.autoOpenEnabled = false; //disable popups

          // Create the Editor
          let editor = new Editor({
            view: view
          });
          editor.viewModel.watch('state', function(state){
            if(state === 'ready'){
              setTimeout(function(){
				document.getElementsByClassName('esri-editor__title esri-heading')[0].innerHTML = 'Blah Editor';
                var actions = document.getElementsByClassName("esri-editor__feature-list-name");
                Array.from(actions).forEach(function(ele){
                  if(ele.innerHTML==='Edit feature'){
                    ele.innerHTML = 'blah blah Edit';
                  }
				  if(ele.innerHTML==='Add feature'){
                    ele.innerHTML = 'blah blah Add';
                  }
                });
              }, 50);
            }
          })

          // Add widget to top-right of the view
          view.ui.add(editor, "top-right");
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="editorDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to change the labels of the Editor Widget

JohnMDye — Thu, 03 Sep 2020 17:58:33 GMT

Thanks Robert! You'll turn me into a half decent JS developer yet!

Re: How to change the labels of the Editor Widget

danbecker — Thu, 12 Aug 2021 20:46:01 GMT

Has anyone got the label property to actually change the Editor Widget label?

See below, it doesn't work, I'm still getting the default "Editor" label...

The filterEnabled property has not effect also.

This is 4.20

const editor = new Editor({ view: view, layerInfos: layerInfos, label: 'Changed', allowedWorkflows: ['create'], container: 'addFeature', snappingOptions: {enabled: false}, supportingWidgetDefaults: { featureTemplates:{ filterEnabled: true, groupBy: 'none' } } });

Re: How to change the labels of the Editor Widget

DouglasJimenez — Fri, 19 Nov 2021 01:24:50 GMT

A little contribution. If you don't want to use Javascript to customise those labels you can use CSS like this:

.esri-editor__feature-list-name { visibility: hidden; color: red; content: none; } .esri-editor__feature-list-item:nth-child(1) .esri-editor__feature-list-name:before { visibility: visible; content: "Edit your picture"; } .esri-editor__feature-list-item:nth-child(2) .esri-editor__feature-list-name:before { visibility: visible; content: "Use your imagination"; }

To create something like this:

Re: How to change the labels of the Editor Widget

ZA1 — Sat, 20 Nov 2021 09:36:44 GMT

hello @RobertScheitlin__GISP

Thanks for the solution.

Could you please explain why it is needed to use setTimeout() to change the labels.

I have seen that without it, the code does not work - but I do not understand why.

Thanks

Re: How to change the labels of the Editor Widget

RobertScheitlin__GISP — Mon, 22 Nov 2021 13:17:46 GMT

@ZA1,

The timeout is required because even though the widgets state is reported as ready the DOM rendering is not always complete, so the DOM objects will not always be found.

Re: How to change the labels of the Editor Widget

ZA1 — Mon, 22 Nov 2021 21:20:31 GMT

Thanks @RobertScheitlin__GISP , much appreciated - also for all the helpful answers on this platform!

Re: How to change the labels of the Editor Widget

RodrigoAbril — Tue, 15 Mar 2022 11:42:39 GMT

You can do it like this, (there are a bunch of messages that you can change similarly) :

editor.when(() => {
  editor.messages.widgetLabel = "new title"; 
})

Re: How to change the labels of the Editor Widget

BruceSchneider2 — Wed, 16 Mar 2022 21:32:37 GMT

I like this solution with using CSS to modify the Editor widget display. I have done so with the label items based on your example and am trying to do so with the title. I have been able to change the color or hide it but am trying to also change the content from "Editor" to something else but content does not seem to do so in the below. Would you know what property can be set to change that label?

Here is the snippet I have:

.esri-editor__title {
text-align: center;
flex: 1 1 auto;
overflow: hidden;
color: blue;
content: "hello";
/*visibility: hidden;*/
}

Re: How to change the labels of the Editor Widget

BruceSchneider2 — Wed, 16 Mar 2022 21:53:00 GMT

Actually I was able to answer my own question in another way. I can change that using the following pattern as shown in another response - I just had a scoping issue that it wasn't working before.

updateEditor.when(() => {
updateEditor.messages.widgetLabel = "My Title";
});

Re: How to change the labels of the Editor Widget

harjinder_trimble — Mon, 20 Nov 2023 22:37:52 GMT

How we do the same task with ESRI API 4.24 and above?