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

Mobile editing functionality using Instant Apps Sidebar template

Tiff

I am creating an Instant App editor using the Sidebar tool. The purpose is for people to drop points onto the map around their current location, and many non-GIS users will be using this tool so we would like this process to be as easy as possible. We want to use Instant Apps over, for example, Field Maps so that it is lower barrier and just requires a link to access the map.

Unfortunately there are a few functionality issues I am experiencing when it comes to editing.

1) When clicking on a dropdown menu, the editor/map zooms in more so it is harder to navigate in the editor tab. The keyboard (I am using Apple/iPhone) also takes up half the screen so that the fields are more difficult to fill in.

2) When you click the back button (left facing carrot) next to Create features, the entire screen is grayed out. Only if you scroll all the way down do you see the "Discard edits" window. This is not very intuitive and required me to refresh the page and test it out a few times to figure it out.

Any suggestions or ways to make this more user friendly? Is this better suited as an idea enhancement?

Find more posts tagged with

Accepted answers

All comments

Tiff

Hi @SarahMcDonald_Esri, I looked into the edit settings too. For some reason my layer is set to add-only and "Select features" is still showing. It is also the only editable layer in the map.

SarahMcDonald_Esri

Hi @Tiff

I saw the video that you attached, I am not sure if there is additional custom CSS that can be added to adjust that behavior. I have made a note of it and will work with the team to see if there is a way to improve the behavior.

To address the follow up questions that you had:

1. When I have data in my app that has Add only editing privileges I see that the "Select" button goes away, do you by chance have additional layers in your map that are not add only?

2. The behavior you are seeing is the standard batch add behavior with the editing tool. The behavior is the same in Map Viewer. I will look into it to see if there is any way that can be disabled, but for now that is the default behavior.

Thanks!

Sarah

Tiff

Hi again, @SarahMcDonald_Esri! Just wanted to check in on a couple more questions if possible:

1) If I have the layer editing privileges set to add-only, can I remove the "Edit features Select button" above "Create features"? We would only need the latter.

2) It looks like if you click "Create features" and press on the map multiple times, it creates multiple points at once (once you fill the form and submit). Is this intentional behavior? I think it may cause confusion and extraneous points on the map, which may be quite difficult to scale to more users. Also, looks like that behavior is not replicated with directly editing in Map Viewer.

Tiff

Hi @SarahMcDonald_Esri, thanks for looking into it! I did that custom CSS part and it seems to remove the zoom as you mentioned. unfortunately, it still seems a bit glitchy where interacting with the list and the form itself is not very easy to use. Please see the attached video I recorded. It may look a bit confusing, but shows where I am having issues scrolling up and down the list based on whether the list shows above or below the dropdown bar.

It also seems a bit difficult to have an editing workflow since the form and the textbox takes up the entire mobile screen, so I wonder if increased mobile functionality could be included in improvements as well.

Instant Apps Editing Issue compressed.mp4

SarahMcDonald_Esri

Hi @Tiff

For the discard edits issue, that is something that will need to be looked at a bit more in depth but we are looking into it.

For the issue with the zooming, I was able to find a workaround for that. In the Sidebar app configuration if you add custom CSS, and add:

.esri-input {
font-size: 16px;
}

The automatic zoom on the phone should go away. The auto zoom is happening because mobile devices have a text size limit that if not met when typing into a text box, the phone will zoom into. The custom css I added above is just making the text a size larger so the auto zoom doesn't occur. Let me know if you have any questions.

Thanks!

Sarah

Tiff

Hi @SarahMcDonald_Esri, thanks for your response! You have exactly replicated the issues that I am seeing - and I agree with the "Discard edits" message being right in the center so that no matter where the user is in the form, they will be prompted to discard. And same with the coded values, unfortunately it's not ideal because you can also zoom back out with two fingers but it's also not very intuitive for folks who are not as tech-savvy.

Please let me know if you are able to find workarounds and/or implement a future improvement for this!

SarahMcDonald_Esri

Hello!

Thanks for reaching out about this. I was testing this in Sidebar and was seeing some of the behavior that you are as well.

I tested editing in Sidebar on an iPhone and I think I am seeing the behavior you described. When I click into a field my phone automatically zooms/centers on the field, making it slightly difficult/tight to add. Especially when I have coded values. Is this what you are seeing?

For the "Discard edits" message, I think it would be better if we had the message appear at the top of the edit tool on a mobile device. Right now, I see what you described where the edit form "grays" out and you have to know to scroll down to find the discard edits message. I will look into if there are any immediate ways around this, but long term this seems like something we can look into adjusting.

Thanks!

Sarah

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.