topic Re: is it possible to create input forms within pop-up's? in ArcGIS JavaScript Maps SDK Questions

is it possible to create input forms within pop-up's?

SorinCiolofan1 — Thu, 21 Apr 2016 20:35:34 GMT

Hi!

I would like to offer a user the possibility to insert some input values in a submit form in a pop-up. As far I saw just how to configure pop-up's to display some attributes or a chart, but is possible to create a form inside a pop-up? If not what would be the alternatives for submitting input data in a dialog? Some examples/tutorials on how to do this would be highly appreciated.

Thanks

Sorin

Re: is it possible to create input forms within pop-up's?

RobertScheitlin__GISP — Thu, 21 Apr 2016 20:40:40 GMT

Sorin,

As far as I know it is. Popups can have all kind of content Dijits, Widgets, Charts, Images, etc.

Re: is it possible to create input forms within pop-up's?

SorinCiolofan1 — Thu, 21 Apr 2016 20:45:16 GMT

I am working with arcgis online and with pop-up's from a layer.

Configure-pop up option does not show anything to create a form here. Do you know any example I can read on how to do this?

Re: is it possible to create input forms within pop-up's?

RobertScheitlin__GISP — Thu, 21 Apr 2016 21:07:12 GMT

Sorin,

It is not going to be possible using the AGOL popup configurator. But you can add just about anything to a popup using the JS API.

InfoTemplate | API Reference | ArcGIS API for JavaScript

Re: is it possible to create input forms within pop-up's?

RolleyTickner — Wed, 30 Nov 2016 01:11:19 GMT

Yes mate it is perfectly possible.

Set your popup.content to your designed HTML including the form elements. Then take advantage of the actions of the popup to process any user input on those form elements. Capture the values of the form elements by using the built in Dojo api or use native js querySelector to capture what you need.

Very doable, I just did it this morning.

Re: is it possible to create input forms within pop-up's?

RolleyTickner — Wed, 30 Nov 2016 01:18:33 GMT

for example: .. I wouldn't code it exactly like this but its just to illustrate the concept at an easy level (and take note that dom.byID would require the relevant Dojo lib in the includes, alternatively, just use querySelector):

layer.popup.content = "html including form inputs, lets pretend there's an input with the ID of 'input'";

layer.popup.actions = [ { title: "Submit", id: "submit", className: "seri-icon-upload" } ];

layer.popup.on("trigger-action", function(event){

if (event.action.id === "submit") {

var x = dom.byID("submit").value;

... and ..?? do what ever else needs to be done with it.

}