How to change the labels of the Editor Widget

1492
10
Jump to solution
09-03-2020 10:11 AM
JohnMDye
Regular 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 Esteemed Contributor

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

10 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

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

0 Kudos
ZA1
by
New Contributor III

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

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

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

0 Kudos
danbecker
Regular 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
New Contributor II

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

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

0 Kudos