nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

In attributeInspector/AttachmentEditor, can I change the dialog header?

TracySchloss

When I use the attributeInspector, in the section for attachments, can you change it to say something besides "Attachments"?

I'm curious if anyone has modified this to include a preview of the actual image. I've added a div below it to show it, but ideally the image would be within the same attachmentEditor div, not tacked on below it.

Find more posts tagged with

Accepted answers

khutchins

All the strings used by the widgets come from a series of files that contain the text translated into the languages supported by the API. As a developer you can modify these strings in your app. Here's a help doc that explains how to do this:

Localization | Guide | ArcGIS API for JavaScript

So once you've loaded the resource bundle into your app you could update the text for the attachment editor as follows:

esriBundle.widgets.attachmentEditor.NLS_attachments = "Manage Image";

All comments

TracySchloss

That fixed it. It didn't occur to me to move these, since the other 2 worked where they were.

Is it true that the navigation buttons are only going to be available when using select from within the Editor widget? Would they turn on with multiple features selected? It seems like it should show anyway, but with the tools that aren't relevant for next, previous etc grayed out.

khutchins

You need to set the new text before creating the attribute inspector. So you'll want to move these lines above your code to create the new attribute inspector in myAttributeInspector.js.

esriBundle.widgets.attachmentEditor.NLS_attachments = "Manage Image";

esriBundle.widgets.attachmentEditor.NLS_add = "Upload Image"

esriBundle.widgets.attributeInspector.NLS_deleteFeature = "Delete Location";

// esriBundle.widgets.editor.tools.NLS_deleteLbl = "Delete Location";

TracySchloss

Yes, this is public facing:

Add Graphic by geocode

khutchins

Do you have a link to your app you can post?

TracySchloss

I think that's what I'm doing in the line

esriBundle.widgets.attributeInspector.NLS_deleteFeature = "Delete Location";

There's always a possibility I have a typo! But this didn't change it, the button still says Delete. Since the entire atiButtons sections isn't displaying, I thought maybe the button this changes was within it.

khutchins

Did you try updating the text for widgets.attributeInspector.NLS_deleteFeature?

TracySchloss

I am using AttributeInspector, and since I have attachments enabled in my featureLayer, then AttachmentEditor is getting loaded as well. It's not surprising that changing esriBundle.widgets.editor.tools.NLS_deleteLbl doesn't do anything, since I don't even have the Edit widget loaded. However, I can't see anything else that looks close.

I don't need TemplatePicker, since I'll only have one layer and it's only points, so I don't need much of what the Edit widget offers. Just using AttributeInspector seems a better option.

This is myAttributeInspector.js file:

define ([
"dojo/on",
"dojo/dom-construct",
"esri/dijit/AttributeInspector",
"dojo/i18n!esri/nls/jsapi",
"dijit/registry"


      ], function ( on,domConstruct,AttributeInspector,esriBundle,registry) { 
    return {
      createAttributeInspector: function(map,featureLayer){
      var layerInfos = [{
          featureLayer: featureLayer,
          showAttachments: true,
          isEditable: true,
          showDeleteButton: true,
            fieldInfos: [
              { fieldName: "Facility",
              tooltip: "Name of the event",
              label: "Name:",
              isEditable: true
              },
              {
              fieldName: "Address",
              tooltip: "Address of the event",
              label: "Address:",
              isEditable: true
              },
              {
              fieldName: "City",
              tooltip: "City of the event",
              label: "City:",
              isEditable: true
              },
              {
              fieldName: "State",
              label: "State:",
              isEditable: true
              },
              {
              fieldName: "ZIP",
              label: "ZIP:",
              isEditable: true
              }
            ]
        }]; 
   
    var attInspector = new AttributeInspector({
      layerInfos: layerInfos
    }, "attributesDiv");
   
    console.dir(esriBundle);
   
  esriBundle.widgets.attachmentEditor.NLS_attachments = "Manage Image";
  esriBundle.widgets.attachmentEditor.NLS_add = "Upload Image"
  esriBundle.widgets.attributeInspector.NLS_deleteFeature = "Delete Location";
  esriBundle.widgets.editor.tools.NLS_deleteLbl = "Delete Location";

     
  on(attInspector, "attribute-change", function(evt) {
      var feature = evt.feature;
      feature.attributes[evt.fieldName] = evt.fieldValue;
      feature.getLayer().applyEdits(null, [feature], null);
      map.enableMapNavigation();
    });
   
  on(attInspector, "delete",function(evt){
      var feature = evt.feature;
      feature.getLayer().applyEdits(null,null,[feature]);
      map.enableMapNavigation();
      map.infoWindow.hide();
    });   
  }
  }
});

khutchins

Tracy Schloss which widgets are you using? Could be in the attribute inspector if you are using that?

TracySchloss

I tried this too - no luck:

esriBundle.widgets.editor.tools.NLS_deleteLbl = "Delete Location";

I read another thread that mentioned some issue with the navigation buttons using AttributeInspector. If I inspect the element that looks like a line right above the Delete button (see my screenshot above), it says its atiButtons, but it's all collapsed. When I set showDeleteButton as true, that's when Delete gets added below these navigation tools. I never see any navigation buttons.

The other thread mentioned that the only way to activate these is if you're using the full Editor widget and use the Select from there.

khutchins

For the delete button look at the strings for the Editor widget.

TracySchloss

I was able to change the attachment prompt. Now I'd like to change the label on the Delete button to say Delete Record. I think it's confusing that when you turn 'showDeleteButton' in the attributeInspector that it falls underneath the attachment section. When I see this:

it makes me think that it is just for deleting the attachment. I know there's a red X next to the image name, but I'd rather it said "Delete Location" or "Delete Record", so it's clearer to the user that they're deleting the whole thing. I don't see that the label for this is listed. Maybe I'm not looking in the right place.

I already added this, but it didn't change the label. I'm not sure what it changed!

esriBundle.widgets.attributeInspector.NLS_deleteFeature = "Delete Location";

Looking at an example where edits are occurring in the infoWindow, it's more clear what Delete does. However, I want my attributes in the sidebar.

kenbuja

Here an example of how to search for them. Using the Create a map sample, add in the reference to the bundle

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
      var map;

      require(["esri/map", "dojo/i18n!esri/nls/jsapi", "dojo/domReady!"], function(Map, esriBundle) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
        console.log(esriBundle);
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

In the console, you can browse through all the different objects in the bundle

You can get the same thing by typing console.dir(esri.bundle) into the console or navigating further into the structure.

TracySchloss

It didn't occur to me that functionality that allowed for localization could easily be used to change the prompts to my preferences. I'll give that a try, thanks!

In the help it says:

To view all the customizable widget strings view any of the samples in a browser with debugging tools open and type console.dir(esri.bundle) in the console. Debugging tools are available as an integrated part of most modern browsers.

I assumed this should be esriBundle, or something like it since that's more AMD style. When I try this, I'm not sure what I'm looking for, Is this just a matter of hunting around? I guess I'll get the hang of it.

khutchins

Localization | Guide | ArcGIS API for JavaScript

So once you've loaded the resource bundle into your app you could update the text for the attachment editor as follows:

esriBundle.widgets.attachmentEditor.NLS_attachments = "Manage Image";

TracySchloss

These lines using dojo/query did what I was looking for:

var attachPrompt = query(".atiAttachmentEditor b");

attachPrompt[0].innerHTML = "Manage Image:";

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.