topic Re: Address Search Auto Populate in Web AppBuilder Custom Widgets Questions

Address Search Auto Populate

MeganWirth — Tue, 26 Apr 2016 02:17:08 GMT

Any suggestions on how I might be able to replicate this flex auto populate address search? I have tried using Roberts eSearch and setting the address field to unique value but with 78k records it takes awhile Thanks!

http://maps.evansvillegis.com/APC/

Re: Address Search Auto Populate

RobertScheitlin__GISP — Tue, 26 Apr 2016 12:46:41 GMT

Ryan,

I create a .Net web service to query mySQL Server Database and return matches for the characters typed. Do you have access to visual studio?

Re: Address Search Auto Populate

MeganWirth — Tue, 26 Apr 2016 13:27:29 GMT

Robert thanks for the reply. I do not currently have access to visual studio but can def look into it. I'm afraid what you have created is outside my level of knowledge but i would be willing to try.

Re: Address Search Auto Populate

RobertScheitlin__GISP — Tue, 26 Apr 2016 13:42:20 GMT

Ryan,

It will take some effort but I can try and walk you through it. First things first download VS 2013

Download Microsoft Visual Studio Express 2013 for Windows Desktop with Update 4 from Official Microsoft Download Center

Re: Address Search Auto Populate

RodWoodfordOld — Thu, 28 Apr 2016 08:33:36 GMT

I would also be interested in a resolution to this. A predictive text or typeahead is what we had for property address searching in our flex app, but I cant seem to get this to work successfully with eSearch, it's to slow returning the unique listing. I'm very interested in what Robert's advice will be re the setup process on this one.

Rod

Re: Address Search Auto Populate

MeganWirth — Thu, 28 Apr 2016 14:42:59 GMT

Ok Robert. I have installed VS 2013....I'm fearless and ready to proceed whenever you have the time sir. I appreciate it.

Re: Address Search Auto Populate

RobertScheitlin__GISP — Tue, 03 May 2016 14:36:18 GMT

Guys,

I have not forgot you just need to find some free time.

Re: Address Search Auto Populate

RodWoodfordOld — Wed, 04 May 2016 01:01:35 GMT

Hi Robert,

When your free just document a step process and I'll give it ago.

cheers

Rod

Re: Address Search Auto Populate

MeganWirth — Wed, 04 May 2016 13:20:52 GMT

No worries sir. Whenever time permits.

Re: Address Search Auto Populate

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:40:38 GMT

Guys,

Here is what I have. Attached you will find the LookupRestService.zip which contains the VS 2013 VB.net project. Make sure that you open VS2013 by right clicking the program icon and choosing "run as administator". When you open that project in VS on your end the main code file is called Lookup.vb. In there you will see the GetAddress function this is the only function in this project. You will see the UriTemplate:="/suggest/address?address={oAddress}". This is the back half of the url that you will use to access the function (i.e. http://gislap183/LookupRestService/suggest/address?address=%Dremie). The response from the web service will look like this: {"suggestions":["155 DREMIE DR","78 DREMIE DR","21 DREMIE DR","160 DREMIE DR","46 DREMIE DR","75 DREMIE DR"]}

In the function you will see the SQL query that is used:

cmd.CommandText = "select [STREET ADDRESS] from dbo.Main where " & "[STREET ADDRESS] like @SearchText + '%'"

So [STREET ADDRESS] is the name of the field that will be queried in the DB and dbo.Main is the table that will be queried and the "like @SearchText + '%" means that the users text with the wild card (%) at the end meaning begins with. You can add a % to the front if you wish to do a contains.

To get this connected to your database you need to edit the Web.config file. In the Web.config there is a connectionStrings parameter and the actual connection string text. This is where you have to know your data. I use SQL Server and thus the connection string is for SQL Server and the user is and password are specified in the connection string text.

If you need help with connection strings contact your DB Admin or use ConnectionStrings.com - Forgot that connection string? Get it here!

You will see that in the Web.config there is also a identity tag that have a username and password. This needs to be a user that has access to the DB and will be the user that the app runs as.

Once you have the web service up and running now you just need to consume it from your WAB app. I created a Suggest_TextBox.js dijit to do this and I added this dijit to my Parcel Search widget (just the eSearch widget customized). When you open the Suggest_TextBox.js you will see that my webservice has a couple of other suggestion functions. There is a need to have a proxy setup on your end as the request to the web service uses the proxy.

The Suggest_TextBox.js gets added to the SingleParameter.html in the eSearch (lines 23 commented out and 24 added):

<div>
  <table style="width:100%;">
    <colgroup>
      <col width="100px" />
      <col width="auto" />
    </colgroup>
    <tbody>
      <tr data-dojo-attach-point="uniqueMessageTR" style="display: none;">
        <td colspan="2">
          <div style="margin-bottom: 8px; height: 18px;">
            <div class="uniqueBusy"></div>
            <div class="uniqueMessage" data-dojo-attach-point="uniqueMessageNode"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="prompt" data-dojo-attach-point="promptNode"></div>
        </td>
        <td>
          <div data-dojo-attach-point="allValueBoxContainer" style="width:100%;padding-bottom:2px;">
            <div data-dojo-attach-point="stringTextBoxContainer" style="display:none;">
              <!--<input data-dojo-attach-point="stringTextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props="trim:true" style="display:none;width:100%;height:30px;" class="dijit-form-TextBox" />-->
              <input data-dojo-attach-point="stringTextBox" data-dojo-type="widgets/eSearch/Suggest_TextBox" data-dojo-props="trim:true" style="display:none;width:100%;height:30px;" class="dijit-form-TextBox" />
              <div data-dojo-attach-point="stringCodedValuesFS" data-dojo-type="dijit/form/FilteringSelect"
                   data-dojo-props="searchAttr:'name',intermediateChanges:true" class="dijit-form-FilteringSelect"></div>
            </div>

You also need to add the require to the SingleParameter.js file as well (line 27):

///////////////////////////////////////////////////////////////////////////
// Robert Scheitlin WAB eSearch Widget
///////////////////////////////////////////////////////////////////////////
/*global define, dojo*/
define([
  'dojo/_base/declare',
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  'dijit/_WidgetsInTemplateMixin',
  'dojo/text!./SingleParameter.html',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/json',
  'dojo/on',
  'dojo/query',
  'dojo/Deferred',
  'dijit/form/FilteringSelect',
  'dijit/form/ValidationTextBox',
  'dijit/form/DateTextBox',
  'dijit/form/NumberTextBox',
  'dojo/store/Memory',
  'esri/request',
  './PagingQueryTask',
  'dojo/keys',
  'dojo/Evented',
  'widgets/pSearch/Suggest_TextBox'
],

As you can see this is not simple cut and paste stuff all of it will require development knowledge and modifications to suit your needs.

Re: Address Search Auto Populate

MeganWirth — Mon, 16 May 2016 13:51:52 GMT

Thank you Robert! this is beyond my level at the moment. Thanks you for putting in the time to explain. Im sure people will make use of it.

Re: Address Search Auto Populate

RodWoodfordOld — Tue, 17 May 2016 00:32:24 GMT

cheers Robert,

I'll have a go at this when I get a moment. Thank you very much for this information.

Rod

Re: Address Search Auto Populate

KrishV — Tue, 17 May 2016 03:36:14 GMT

Robert,

This is awesome!

Regards,

Krish