Select to view content in your preferred language

How to change the labels of the Editor Widget

3847
11
Jump to solution
09-03-2020 10:11 AM
JohnMDye
Frequent Contributor

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.

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

11 Replies
RobertScheitlin__GISP
MVP Emeritus

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
Frequent Contributor

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

0 Kudos
ZA1
by
Occasional Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
ZA1
by
Occasional Contributor

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

0 Kudos
harjinder_trimble
New Contributor

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

 

0 Kudos
danbecker
Frequent Contributor

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
New Contributor

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:

DouglasJimenez_0-1637285083035.png

 

0 Kudos
BruceSchneider2
Emerging Contributor

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

0 Kudos