topic Re: AttributeInspector with customField is not working correctly in ArcGIS JavaScript Maps SDK Questions

AttributeInspector with customField is not working correctly

DianaBenedict — Fri, 01 Feb 2013 15:06:01 GMT

Problem:
Require the AttributeInspector to display number values without commas. For example a number value looks as so with the "out of the box" TextBox (11,245) however I need them to look like ID values with NO commas (11245).

Solution:
Create a custom dijit NumberTextbox, set the pattern to display numbers with no commas and set the fieldInfo customField property for the desired attribute field.

Issue:
At first it appears as though the customField that was specified for the desired field displays correctly (no commas). However, after several times of displaying the attributeInspector, the link between the data and customField gets lost and the data for the customField is no longer displayed.

Background:
The following is the constructor for the AttributeInsector: esri.dijit.AttributeInspector(params, srcNodeRef)
The params input allows you to specify a set of Options including layerInfos.
Within the layerInfos options, you can specify the fieldInfos of interest for each featureLayer.
Within the fieldInfos options, you can specify field information such as name, label, isEditable, etc...
There is an additiona fieldInfos option called customField. This option allows you to specify a custom dojo dijit for the selected field.
I essentially followed the similar example as posted on the esri samples page http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/ed_attributeinspectorvalidate

The steps that I followed are:
1) instantiate the FeatureLayer
2) after "onLayersAddResult" I call the initializeEditor code
3) within the initializeEditor method I create the custom digit (see code below)
4) create the fieldInfos array
5) set up the layerInfos and passing in the fieldInfos
6) instantiate the attributeInspector object and passing in the layerInfos

At first everything looked great. The AttributeInspector is configured as I indicated.
The customField that I created looks great.
The number/text within the custom dijit NumberTextbox is formated to my specifications, etc...
However, once I close the AttributeInspector and open it again, the customField is no longer visible.
There is no height .. it just looks like a line. So I figured that I would go ahead and add some CSS to fix the issue, initially I added the class: "atiField" option so that the NumberTextbox renders like all the other textboxes. Then I did a quick "hack" by specifying the following CSS

.esriAttributeInspector .dijitNumberTextBox { width:30em;height:5em;}

This was done to force the NumberTextBox to have a height but there was no data.

I seems to me like at some point the link between the data and the customField gets "lost".
All the other fields that are NOT custom look great .. no problems.
I have tried different ways to force the refresh of the customField and attributeInspector but have had the same results.
I even tried the AMD method of creating the dijit ... nothing.

If I refresh the entire application, and display the AttributeInspector, all looks great again.
But once the AttributeInspector is closed and opened again with new data I get the same issue.

Does anyone have suggestions on what could be causing this? Has anyone encountered a similar issue?
Currently the only solution that I can find is to DESTROY the AttributeInspector
each time it is closed and create it again .. though I think this is very "heavy handed" and would prefer not to have to do this.

Below is the pertinent code that I used to set up the fieldInfos for the AttributeInspector:

  var fieldInfos = [];     var props = {       class: "atiField",       constraints: { 'pattern': "#", 'places':0, 'max':999999999999999, 'min':0 }     };          fieldInfos.push({ 'fieldName': 'GAZ_ID',               'isEditable': true,               'label': 'GAZ ID',               'customField': new dijit.form.NumberTextBox(props)}           );     fieldInfos.push({ 'fieldName': 'NAME', 'isEditable': true, 'label': 'Name' });      var layerInfos = { 'featureLayer': flayer,         'fieldInfos': fieldInfos,         'isEditable': true,         'showDeleteButton': true }          //set up the attribute inspector     var attInspector = new esri.dijit.AttributeInspector({       layerInfos: layerInfos     }, "attributeDiv");

Re: AttributeInspector with customField is not working correctly

DianaBenedict — Mon, 04 Feb 2013 15:57:00 GMT

Has anyone worked with attempting to customize the fields in the AttributeInspector? All I need is to format the number value for integer ID fields. By default the AttributeInspector formats any integer values with commas This does not work for us since the users are not accustomed to viewing ID values as comma seperated integer values.

It seems to me like there is an issue with maintaining a constant display of the values when implementing the customField using a dijit textbox (as described in the original post). Since my last post I have attempted to get this to work consistently and have had NO success.

In an attempt to provide you more information I am attaching some screen shots.

AttributeInspector_Default.png
The defualt state of the attributeInspector if I do not set a custom field. Note the following:
1) GAZ_ID and FCode fields are inteteger fields in the database. These are the ID values and I would like to format without commas
2) I set the GAZ_ID field as not editable in the FieldInfos

fieldInfos.push({ 'fieldName': 'GAZ_ID', 'isEditable': false, 'label': 'GAZ ID'});

AttributeInspector_SetCustomField_Good.png
This how the AttributeInspector looks like when I set a customField as described in the post above using a new dijit.form.NumberTextBox and passing in the pattern/formatting. Note the following:
1) The ID fields mentioned above display correctly (without commas)
2) looks like something is "wrong" with the setting of the customField because I have indicated that the GAZ_ID field is not editable, YET the input box allows editing .. it is not greyed out (I have tried both editable and not just incase).
3) After closing the UI and opening again, I loose the link between the data and the customFields (see below).

AttributeInspector_SetCustomField_Bad.png
This is how the AttributeInspector looks like after I close it and open it again for the second time (or anytime after). Note the following:
1) The ID fields mentioned above no longer have any data displayed
2) I have reviewed the objects and have confirmed that the data is still there (graphic.attributes.GAZ_ID and graphic.attributes.FCODE)
3) I thought that there was an issue with CSS so I forced a height on the custom dijit and I confirmed that there was no data being displayed
4) I must close the entire applicaiton and open it again in order to view the attributes again.

ESRI/Others, have you seen similar results? If not, can someone please point me in the correct direction on how to format an integer value in the AttributeInspector? I am aware that the PopupTemplate has the .format option for the fieldInfos but the AttributeInspector is lacking this option. However I am assuming that is why they have exposed the .customField option. Is this a bug or just some formatting/properties that I am missing?

Any help is much appreciated.

Re: AttributeInspector with customField is not working correctly

DianaBenedict — Wed, 06 Feb 2013 15:19:27 GMT

Sorry, but I had to add a reply to this thread so it can be promoted back to the top.

If this issue is not resolved, I will not be able to use the AttributeInspector and will need to develop our own custom form. I have already customized the interface (by adding the attribute inspector to a TabContainer within a floating Pane and adding additional controls to the UI) but I was hoping to leverage some of the built in functionality available with the AttributeInspector. Diplaying integer ID fields with comma seperated text is not acceptable to our users so I need to find a solution and currently I have exhausted all my options...so I look to you for help.

Re: AttributeInspector with customField is not working correctly

KellyHutchins — Wed, 06 Feb 2013 23:08:34 GMT

Diana,

Do you see this issue happening with the sample that uses the custom validation box? If not can you modify the sample to match your scenario? Having a simple test app to work with will make it easier to test and debug this issue.

Kelly

Re: AttributeInspector with customField is not working correctly

DianaBenedict — Thu, 07 Feb 2013 15:03:14 GMT

Kelly

Thank you for your response. I just looked at the attribute inspector sample

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/ed_attributeInspectorValidate/index.html

And and it looks like I was able to reproduce a similar display issue with the customField (hone) in the AttributeInspector window. I did the following:
1) created a new notes - did this a couple of times
2) added attributes for the new record (btw: I noticed that the data field is empty when you first create a record, but is present when you display the attributes anytime after it is initially created)
3) selected an existing note and edited the values
4) closed the window and did the same for other notes
5) added a new note
6) eventually I get the display issue

I have attached 2 screen shots to show you my issue. I did the tests above using IE 9 on a windows 7 desktop.

I went ahead and did similar tests in Firefox and it looks like I am unable to reproduce this issue. Also noticed that the field that has the following property set (STRING_FIELD_OPTION_TEXTAREA) displays slightly different between IE and Firefox. In firefox, you get a resize handle (nice) but noy in IE (interesting).

OK, so I just went back and looked at my results and it looks like I ONLY see this display issue with IE 9. However, in both cases, the isEditable flag is NOT honored if I set a customField.

Thanks for looking into this issue and for any help you can provide.

Re: AttributeInspector with customField is not working correctly

DianaBenedict — Wed, 13 Feb 2013 13:58:38 GMT

Hello all, sorry to keep replying to this post but I was really hoping that I can find a solution to this issue. It seems to me like something is not set up correctly since customFields do not appear to honor the isEditable flag therefore not disabling the control as well as all the other issues I have posted above.

Any help and or guidance is greatly appreciated.

Re: AttributeInspector with customField is not working correctly

KellyHutchins — Thu, 14 Feb 2013 21:31:26 GMT

Hi Diana,

I was able to reproduce this problem and submitted a bug for this behavior. I'll reply back to this thread with the bug number once I have a public link for the bug.

Kelly

Re: AttributeInspector with customField is not working correctly

DianaBenedict — Thu, 14 Feb 2013 21:33:54 GMT

Hi Diana,

I was able to reproduce this problem and submitted a bug for this behavior. I'll reply back to this thread with the bug number once I have a public link for the bug.

Kelly

Thank you so much for looking into this issue Kelly. You have saved me a lot of time.

Re: AttributeInspector with customField is not working correctly

DianaBenedict — Tue, 09 Jul 2013 21:49:59 GMT

I was wondering if ESRI has fixed this bug? Do we have a bug report number on it?

I would like to implement using the numberTextBox in the attribute inspector as a customField but the read-only/disabled property is completely ignored and users get the impression that they are able to make edits to this field.

Re: AttributeInspector with customField is not working correctly

ArthurAbbie — Wed, 17 Jul 2013 13:09:45 GMT

Hi,

Has anyone solved this yet? Diana?

I am having the same problem using api v3.5 ValidationTextBox (plus am unable to control whether the box is editable or not)...

Thanks,
Arth.

Re: AttributeInspector with customField is not working correctly

DianaBenedict — Mon, 22 Jul 2013 20:00:09 GMT

Hi,

Has anyone solved this yet? Diana?

I am having the same problem using api v3.5 ValidationTextBox (plus am unable to control whether the box is editable or not)...

Thanks,
Arth.

No, it looks like it is still an ESRI bug and does not appear to be fixed in JS api 3.5 either. I had to resort to a different work around since it seems to me like the CSS is getting all messed up when using the customField option. From what I can see, the CSS for ReadOnly properties is not honored with any fields in the AttibuteInspector FieldInfos that implement the customField poperty. I hope ESRI can post a fix soon. I had to change my UI and add a "label" to accomodate for that bug.

Re: AttributeInspector with customField is not working correctly

ArthurAbbie — Mon, 29 Jul 2013 10:07:38 GMT

No, it looks like it is still an ESRI bug and does not appear to be fixed in JS api 3.5 either. I had to resort to a different work around since it seems to me like the CSS is getting all messed up when using the customField option. From what I can see, the CSS for ReadOnly properties is not honored with any fields in the AttibuteInspector FieldInfos that implement the customField poperty. I hope ESRI can post a fix soon. I had to change my UI and add a "label" to accomodate for that bug.

Ok, not what I hoped to hear but thanks for replying Diane 🙂

I've decided to give up on the attributeInspector, now just using dijit/form/validationtextbox etc directly with the feature.attributes. Next to replace will be the attachmentEditor.

So much time wasted on faffing around with things we're led to believe will work out-of-the-box but either they don't or the implementation is naff... sigh :rolleyes:.

Arth.

Re: AttributeInspector with customField is not working correctly

AmericanData — Thu, 05 Sep 2013 21:41:59 GMT

Same problem here. Using a dojox.widgit.ColorPicker and tracking input via the events. The data is being placed into the value property correctly. But never gets to the Graphic's corresponding attribute value. Something to do with pushing the update to the graphic.

I've noticed that Dojo's documentation is off in many ways though. This could be a bug based on how ESRI gets the value. Some dijits work well with...

myDijit.set('value', somevalue);

...while others prefer...

myDijit.value = somevalue;

...and still others like...

myDijit.attr('value', somevalue);

And the documentation is very unreliable. For instance, ColorPicker doc says to use attr('value') to assign values. But in truth, only value = somevalue works.

It's no wonder this breaks the link in the AttributeInspector. Which way does ESRI get/set the value? Luckily the set TO the dijit works. Dodgy consistency.

Re: AttributeInspector with customField is not working correctly

DavidBlanchard — Wed, 06 Nov 2013 12:49:11 GMT

Just an update for those finding this forum thread in 2013, it is still a bug; but at least it now logged as an official bug (NIM089109). It appears to have been assigned but no resolution yet.

Re: AttributeInspector with customField is not working correctly

AlexMerkulov — Thu, 06 Feb 2014 09:44:34 GMT

Hi all,

The problem is in AttributeInpector.js, in _destroyAttributeTable() function, in line "this._attributes && h.destroy(this._attributes)". The _attributes contains custom widgets you created. Just comment this line and it will work.

Alex Merkulov

Re: AttributeInspector with customField is not working correctly

AlexMerkulov — Thu, 06 Feb 2014 10:43:24 GMT

There is one more problem with AttributeInspector.js. No matter if field editable or not, the custom control always will be editable.
Two bugs in one *.js. Thanks God I can change it!!!!

Re: AttributeInspector with customField is not working correctly

MatthewMiller — Sat, 11 Dec 2021 08:05:04 GMT

Hi all,

The problem is in AttributeInpector.js, in _destroyAttributeTable() function, in line "this._attributes && h.destroy(this._attributes)". The _attributes contains custom widgets you created. Just comment this line and it will work.

Alex Merkulov

Is this line in the AttributeInspector.js for the JavaScript API Version 3.8? I have downloaded AttributeInspector.js and can't find it. The closest I can find is the line:

            if (this._attributes) {
                _9.destroy(this._attributes);
            }

That line is part of the _destroyAttributeTable function.

Thanks!

Re: AttributeInspector with customField is not working correctly

deleted-user-YYhuCJuuEn9L — Mon, 24 Mar 2014 22:04:36 GMT

@alexmarkolov

Thanks! That solved the issue for me.

Re: AttributeInspector with customField is not working correctly

deleted-user-YYhuCJuuEn9L — Fri, 23 May 2014 15:03:13 GMT

I spoke too soon. Commenting out this code:

if (this._attributes) {
         _9.destroy(this._attributes);
}

Working in Chrome but not IE. It seems that when a custom field is added it's DOM is being wiped out during the _createTable method with this line:

this.attributeTable.innerHTML = "";

Only the parentNode remains. To get around this I had to assign the layerInfo.customField to a function and make the following changes in the _createField method:

if (c.customField) {
       if (typeof(c.customField)==='function') {
               f=c.customField();
               h.place(f.domNode, h.create("div", null, b), "first");
       }
       else {
               h.place(c.customField.domNode || c.customField, h.create("div", null, b), "first"), f = c.customField;
       }
}

This worked form me with some custom DateTextBoxes. For number formatting without commas, I made the following changes to the _createIntField method:

return new s({
      "class": "atiField",
      constraints: {
            places: 0
      },
      _formatter: function (value) { return value; },
      invalidMessage: this.NLS_validationInt,
      trim: !0
}, h.create("div", null, c))

Hope this helps