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

Can we modify the attribute inspector?

LizDaRos

I'd like to change the setup of how the attribute inspector displays, such as position the delete button on the top of the page, not at the bottom under attachments.
I'm using the mobile attribute editing sample from ESRI.
Any help would greatly be appreciated. Thanks.

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

LizDaRos

I've done some testing using the Attachment Editor sample from the help on other phones such as the droid 2 version 2.3.3, fascinate version 2.2.2, and a incredible version 2.2.2 and all are having the same issue with the android browser. It almost seems like the site doesn't wait for the phone to upload a picture before it times out. Then the page just refreshes and the point doesn't get created. I'm not sure what else I can do? I'm going to try and add the attachment editor that you used in 'Volunteered Geographic Information' and see if I can get that working.

khutchins

I ran a quick test using an older Motorola Droid (Android version 2.2.2) using the Attachment Editor sample from the help and was able to successfully browse to a photo and add it as an attachment.

http://help.arcgis.com/en/webapi/javascript/arcgis/demos/ed/ed_attachments.html

Perhaps this is an issue with certain phones?

Kelly

LizDaRos

I was just about to say something to you about the VGI; I was looking at that site a few months ago and just realized you were the one who contributed to it. Great work!
Mine and many of my users devices are androids. I had seen this issue with the iphone prior, I just didn't think there was a problem with the Android browsers as well. Especially since sometimes it does work on my phone.

khutchins

Many mobile browsers, including Safari for iPhone, do not support file upload so you won't be able to use the attachment editor. There are some third party apps that can help you add this functionality to your app. See the 'Volunteered Geographic Information' section of this blog post for details on one potential solution:

http://blogs.esri.com/Dev/blogs/arcgisserver/archive/2010/09/01/Building-Web-applications-for-iOS-and-Android-using-dojox.mobile.aspx

LizDaRos

Kelly... or maybe someone else knows too,
I just noticed this issue; when I'm using my mobile phone and I browse to add an attachement I get redirected to another page after selecting the image. Sometimes this isn't the case but most of the time it is. When I'm testing this on a computer or Motorola Zoom I do not have this problem. It stays on the same page and just adds the image name to that section.
Anyone else come across this issue or is this something wrong in my code? Or something wrong with my feature?

LizDaRos

Kelly,
Thank you so much. That helped a lot!
Liz

khutchins

Liz,

I think the easiest option would be to disable the attribute inspector's delete button by setting showDeleteButton to true:

 var layerInfo = [{ 
          'featureLayer': results[0].layer, 
          'showAttachments':true, 
          'showDeleteButton':false, 
          'isEditable':true, 
          'fieldInfos':[ 
            {'fieldName':'requesttype','label':'Type','isEditable':true}, 
            {'fieldName':'address_num','label':'Issue Address #','isEditable':true},
            {'fieldName':'streetname','label':'Issue Street Name','tooltip': 'Start typing the street name for the list to populate','isEditable':true},
            {'fieldName':'email','label':'Contact Info','isEditable':true}, 
            {'fieldName':'comment','label':'Comments','isEditable':true,'stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA} 
          ] 
        }];

Then add a jquery mobile button to the attribute inspector dialog and style this to suit your needs. When users click this new delete button you can use featureLayer.applyEdits to delete the current feature. Here's an example of code you could add to the delete button's onclick event

      function deleteFeature(){
      var graphics = citizenRequestLayer.getSelectedFeatures();
       if(graphics.length > 0){
        //remove any features
        citizenRequestLayer.applyEdits(null,null,graphics,function(){
          console.log('Features deleted');
           $.mobile.changePage("#mapPage",null,true,true);
        });
       }
        
      }

And here's an example of adding the jquery button.

 <div data-role="page" id="attributeDialog"   data-theme="c">
    <div data-role="header" data-backbtn="false"> 
      <h1>Report</h1> 
    </div> 
    <div data-role="content" data-inset="true"> 
    <!--<center><h6>(Please use the delete button to restart if the estimated location is incorrect)</h6></center>-->
      <div> 
          Estimated Location:
        <div id="currentAddress" title="Estimated Location" style="font-weight:bold;text-align:center;width:100%;"></div> 
      </div> 
      <br>
        <a href="#" data-role="button"  onclick="deleteFeature();" data-inline='true'>Delete</a> 
      <br>
      <div id="attributeDiv"></div>      
     <br>
      <a href="http://gis.manchesterct.gov/MObile/IssueRequests.html" onclick="alertsubmit();" data-role="button">Finish</a> 
    </div> 
  </div>

LizDaRos

http://gis.manchesterct.gov/mobile/issuerequests.html

khutchins

Liz without seeing more of the code its hard to know where the 'bubble' is coming from. Is your application public? If so can you provide the url. If not can you post your code?

LizDaRos

Using the mozilla firebug, this is what comes up for the "bubble"

<div class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" data-theme="c" aria-disabled="false">

I'm not very familar with what I need to change here to remove this bubble.

khutchins

The easiest way to find out what that bubble is so you can remove it is to use Firebug or Chrome Developer tools to inspect it. Both Chrome Dev Tools and Firebug have a tool that allows you to inspect elements on the page. Click the tool then click the 'bubble' and you can find out information about the HTML and CSS classes associated with the element.

LizDaRos

Kelly I was able to change the page that appears after selecting the delete button. I guess I didn't think it would be as simple as adding a line like

$.mobile.changePage("#deleteDialog",null,true,true)

Thanks though.
I am still having an issue trying to change my delete button icon. I am attaching a picture of the button and you can see there is something underneath it that I can't get ride of. Any ideas?

DeleteButton.png

HemingZhu

I was able to move the delete button to the top of the page using
position:absolute !important;top:20% !important;margin-left:30% !important;
I would now like to modify the delete icon since it has a strange bubble underneath it. I've been trying to use the atiDeleteIcon but not having much success. I've tried it a few different ways such as
.esriAttributeInspector .atiDeleteIcon{
but nothing seems to change. Has anyone else changed an icon yet of either the previous, next, or last icon?

Also has anyone been able to change the screen that shows up after you click the delete button? I'd like to add some information on that page but all it displays is the geocoded address and "No Features Selected".

I have set up icon for the save button like the following:

.esriAttributeInspector .atiLayerName {display:none;} 
      .saveButton { 
        margin:0px;
        width:16px; 
        height:16px;
        background-image:url('save.png')!important;
        background-repeat:no-repeat; 
       } 
....
var saveButton = new dijit.form.Button({"iconClass":"saveButton"});

khutchins

It sounds like the page with the geocoded address is specific to your application. Can you post a link to your app?

I was able to move the delete button to the top of the page using
position:absolute !important;top:20% !important;margin-left:30% !important;
I would now like to modify the delete icon since it has a strange bubble underneath it. I've been trying to use the atiDeleteIcon but not having much success. I've tried it a few different ways such as
.esriAttributeInspector .atiDeleteIcon{
but nothing seems to change. Has anyone else changed an icon yet of either the previous, next, or last icon?

Also has anyone been able to change the screen that shows up after you click the delete button? I'd like to add some information on that page but all it displays is the geocoded address and "No Features Selected".

LizDaRos

I was able to move the delete button to the top of the page using

position:absolute !important;top:20% !important;margin-left:30% !important;

I would now like to modify the delete icon since it has a strange bubble underneath it. I've been trying to use the atiDeleteIcon but not having much success. I've tried it a few different ways such as

.esriAttributeInspector .atiDeleteIcon{

but nothing seems to change. Has anyone else changed an icon yet of either the previous, next, or last icon?

Also has anyone been able to change the screen that shows up after you click the delete button? I'd like to add some information on that page but all it displays is the geocoded address and "No Features Selected".

LizDaRos

Thanks for the tip; !important helped but these CSS settings seem to only allow it to move around in just the area at the bottom with the finish button. I used:
margin-top:2% !important;
and
top:5% !important;
but neither moved it to the top of the entire page.

I saw a sample that inserts a save button-
dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");
Is there something I could do like this to the delete button?

JohnGrayson

I'm not sure if this will help, but depending on how a particular style attribute is set in the original widget definition you might have to use !important. Try this:

.esriAttributeInspector .atiDeleteButton {
  color:red !important;
}

LizDaRos

Thanks for getting back to me.

I added-
      .esriAttributeInspector .atiDeleteButton {
        color:Red;
       }
to the style section of my code which makes the delete button text color red. I've tried a bunch of other settings for this like margin-left and etc. but haven't had much success in moving the button. Is there something else I should try?

derekswingley1

You might be able to do what you want with CSS. Check out the attribute inspector's CSS classes.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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