Tag: Input Controls

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding Input

What is it about Google maps? This little example of a JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding was often requested by customers and students alike. Whether it be in the Siebel Hub or the OPA Hub Websites, Google Maps always seems to be a popular topic!  When I did a Google maps customlabel in Oracle Policy Modelling a few months ago, it was one of the most downloaded examples we have ever had.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding

And so, all I have decided to revisit the example.  This time however we will create a custom input control, and the user will click on the map to show where they are located.  These might be useful in an emergency situation, or something far more mundane such as simply be able to say what your address is, quickly.

To do this, we’re going to use the Google Maps JavaScript API once again.  We will use the same functionality as before, with new twists:

  • Marker on the map to display their browser-reported location (seen previously)
  • Information window to display text  (seen previously)
  • From the latitude and longitude obtain the Street Address
  • The possibility to drag the marker to another location if incorrect 
  • A button to confirm the selection of the address
  • The chosen the address will be passed to an attribute in the  Project

In this example therefore, we will need to use reverse geocoding.  Specifically, we need to convert the latitude and longitude into an address.  Using this Google service will normally provide us with a close match.  There may be multiple matches, or indeed no match at all.

For simplicity we will only handle the case where at least one match is found, and we will take the first match which is typically the closest.  We will not look at the other cases where there are multiple choices.  We are reserving that for another post in a little  bit!

In the example provided, which is as usual for education and amusement purposes only, the information from Google goes to our interview and is passed into an attribute.  Of course, what happens after that, it’s you that decides!

To keep things simple, the initial part of the script is the same.  We use your location to plant the marker on the map.  The exact icon used, depends entirely on what you chose in the interview : we used a simple example where the user declares an accident or a fire or some other emergency.  The marker is planted on the map. Then we introduce drag and dragend handlers, as well as a click handler.

The first page of the Interview is shown below.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding 1

Then we have a typical page displaying only a single Input Control for our demo.

OPA 12 - JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding 5

Our code will handle a few events. The marker click handler will display the address of the location in an infowindow. The drag and dragend handlers manage the user dragging the marker to a new location: maybe they didn’t get it right first time, so we let them do it again.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding 2

The two main functions in this code are the confirm_my_address function, which lets the user click a button in the marker and pass the address to Oracle Policy Automation to confirm that the marker is in the correct location, and the geocodeLatLng function, which does exactly what it says.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding 3It takes the latitude and longitude of the marker and queries Google to find the address of the marker before it is pushed to our attribute.

JavaScript Custom Extension Google Maps for Addresses and Reverse Geocoding 4

Because it doesn’t always work, we also have to manage the situations when had no address is returned. In this case we handle it with nothing more than an alert, which is fine for our little test. Regarding geocoding and so on you can find much more information of course on the Google Maps JavaScript API Documentation page.

Enjoy the video and if you are interested, you can download the code example for free, with no warranties and just for fun, from the OPA Hub Shop as usual. Remember to use Ctrl+F5 to run it in a real browser.

video

OPA – Dynamic Visibility

Dynamic Visibility

In certain situations, it is necessary to display or hide elements of the Policy Automation Interview. The easiest way to obtain this OPA – dynamic visibility is to create rules, whose conclusion can act as a basis for the Visibility. For example, if the color is red, then show the size question. And inversely – If the color is not red, then do not show the size question.

Such a method is simple and the result is attractive to the End User. It can be implemented with the Question displayed during the Interview, referencing the rule you have created. In the following screenshot you can see an example with the relevant Boolean Attribute referenced in the Attribute Input Control properties.

Question-with-Visibility-Rule

Mandatory and Read-Only

A similar approach can be taken to render a Question mandatory, or when a Question should have it’s Value displayed as read-only. The existence of a Boolean Attribute to reflect your business logic is once again a pre-requisite, but the process of aligning it with an Input Control is the same.

Mandatory-Question-using-Dynamic-Boolean

 

List of Values – Dynamic Values

A further area where such dynamic visibility can be useful to make the end user experience more enjoyable, is in the area of Lists of Values. If a Attribute has a List of values, some Values may need to be hidden in certain circumstances. The same dynamic effect can be achieved by associating each Value with a Boolean Attribute in much the same way as the previous examples.

 

Visibility-of-Pick-List-Value

Better for the End User

Simple logic such as this can increase the engagement of an End User – after all, the easier it is to complete something with the minimum of irrelevant questions or data the more likely you are to see happy End Users. Until next time, see you soon.

Rich@ard

 

Worldwide
Logo by Southpaw Projects LLC