topic Re: How to pass search query into ArcGIS Online url? in ArcGIS Web AppBuilder Questions

How to pass search query into ArcGIS Online url?

jasonramsey1 — Wed, 20 Apr 2016 21:48:31 GMT

Hello I am attempting to add a form to an existing html that allows the user to type in a search term and query and existing ArcGIS Online map. For example, a person would enter a coordinate into the form such as:

The resulting url should be (unencoded) : www.arcgis.com/apps/webappviewer/index.html?find=-112.111 33.3456

encoded it should look like: www.arcgis.com/apps/webappviewer/index.html?find=-112.111%2033.3456

The problem is that because the parameter (find) is after the "?" the whitespace in the url is encoded with a "+" instead of "%20". The url becomes: www.arcgis.com/apps/webappviewer/index.html?find=-112.111+33.3456

This causes the feature search to search for : which results in not finding the coordinate.

My question is how can I get a url form to pass the search query either unencoded, or having the whitespace encoded as "%20" instead of "+"? I am using the get method and have tried having a javascript function replace the whitespace with "%20", but the % symbol gets encoded. Any suggestions would be greatly appreciated!

-Jason

Re: How to pass search query into ArcGIS Online url?

BillGrow — Wed, 20 Apr 2016 22:20:11 GMT

Hi Jason,

Could you just replace the search input content with JavaScript, after the page has been loaded?

document.getElementById("search_input").value = document.getElementById("search_input").value.replace("+", ", ")

Re: How to pass search query into ArcGIS Online url?

jasonramsey1 — Wed, 20 Apr 2016 23:14:50 GMT

Hello Bill. Your response sounds promising, but I am not sure how to go about doing that. Would the JavaScript be in the original html that contains the form? Or would the replacement function somehow be passed in the url? I am pretty novice when it comes to javascript and the HTML. Any direction/guidance would be appreciated!

Re: How to pass search query into ArcGIS Online url?

BillGrow — Thu, 21 Apr 2016 00:28:03 GMT

If you're using WAB Developer edition, you can use the . replace(a, b) method in the Find widget JavaScript code (After it parses the URL params).

If, however, you don't have access to the code (arcgis.com), and are passing the data from another form, you'll probably want to encode the URI before sending, and submit the form using JavaScript. Something like:

var findParam = document.getElementById("lat-lon-input-field").value

var rootAppURL = "https://myapp.com/app"

encodedURL = encodeURI( rootAppURL + "?find=" + findParam)

window.location = encodedURL

Hopefully one of those methods answers your original question.

Ref: http://www.w3schools.com/jsref/jsref_encodeURI.asp

*There are cleaner ways to write this code, but that should get you started.

Re: How to pass search query into ArcGIS Online url?

RobertScheitlin__GISP — Thu, 21 Apr 2016 02:01:18 GMT

Jason,

Why are you using a space between the lat and lon? The documentation states use a comma or semicolon:

You can use commas or semicolons as separators. Use semicolons if your numbers use colons as their decimals.

Use URL parameters—Web AppBuilder for ArcGIS | ArcGIS

Re: How to pass search query into ArcGIS Online url?

jasonramsey1 — Thu, 21 Apr 2016 02:12:29 GMT

Thanks Robert for the input on the spaces. Spaces are accepted and that is the way that non-GIS personnel are used to. In addition, spaces are needed to enter an address in to the HTML form which is then passed incorrectly into the query string of the URL. Basically, if the attribute that is needed to be entered into the URL after the ?find= has a space in it then it will fail to find the feature with the + symbol substituted for the space.

Jason

Re: How to pass search query into ArcGIS Online url?

RobertScheitlin__GISP — Thu, 21 Apr 2016 02:18:12 GMT

Jason,

I am really confused where the plus is coming from. The substituting of a space with a plus is not a normal encoding method that I am aware of. What does your from html and or JS look like?

Re: How to pass search query into ArcGIS Online url?

BillGrow — Thu, 21 Apr 2016 02:18:48 GMT

You could also use my code above, to clean up user input before sending it correctly on to the application; as long as you don’t need to do any server side stuff.

JavaScript String Methods

Re: How to pass search query into ArcGIS Online url?

jasonramsey1 — Thu, 21 Apr 2016 02:29:17 GMT

Thanks Bill. I definitely will experiment with your code tomorrow when I am back at work.

Jason

Re: How to pass search query into ArcGIS Online url?

jasonramsey1 — Thu, 21 Apr 2016 02:34:41 GMT

Robert,

The plus is normal encoding in the query string (?)when using the "get" method in an HTML form.

Jason

Re: How to pass search query into ArcGIS Online url?

jasonramsey1 — Thu, 21 Apr 2016 18:59:24 GMT

Thanks Bill and Robert for your input so far. The following code almost works, but it somehow includes the file path to the html in the url passed to window.open. I am not sure what I need to do to correct it.

<!DOCTYPE html>

<html>

<head>

function getURL(val){

base = 'www.arcgis.com/apps/webappviewer/index.html?find=';

uri=base +val;

//location2 = encodeURI(uri);

window.open(uri);

}

</script>

</head>

<body>

<label>

</label>

<label>

</label>

</form>

</body>

</html>

so if somebody enters 1616 W. Adams, Phoenix, AZ into the form, the url becomes:

file:///W:/GIS_Scratch/www.arcgis.com/apps/webappviewer/index.html?find=1616%20W.%20Adams,%20Phoenix,%20AZ

instead of: www.arcgis.com/apps/webappviewer/index.html?find=1616%20W.%20Adams,%20Phoenix,%20AZ

I am not sure what I need to do to correct it.

Re: How to pass search query into ArcGIS Online url?

RobertScheitlin__GISP — Thu, 21 Apr 2016 19:43:41 GMT

Jason,

You just need to add http:// to the uri.

base = 'http://www.arcgis.com/apps/webappviewer/index.html?find=';