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

TracySchloss · ‎10-21-2015

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.

KellyHutchins · ‎10-28-2015

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

View solution in original post

TracySchloss · ‎10-28-2015

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

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

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

KellyHutchins · ‎10-28-2015

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

TracySchloss · ‎10-29-2015

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.

KenBuja · ‎10-29-2015

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 · ‎10-29-2015

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.

KellyHutchins · ‎10-29-2015

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

TracySchloss · ‎10-29-2015

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.

KellyHutchins · ‎10-30-2015

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

TracySchloss · ‎10-30-2015

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