How to change the labels of the Editor Widget

JohnMDye · ‎09-03-2020

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.

RobertScheitlin__GISP · ‎09-03-2020

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎09-03-2020

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JohnMDye · ‎09-03-2020

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

ZA1 · ‎11-20-2021

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

RobertScheitlin__GISP · ‎11-22-2021

@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.

ZA1 · ‎11-22-2021

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

harjinder_trimble · ‎11-20-2023

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

danbecker · ‎08-12-2021

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

DouglasJimenez · ‎11-18-2021

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:

BruceSchneider2 · ‎03-16-2022

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;*/
}