HTML script integrate with RPG program

mrojek · Post by **mrojek** » Wed Jun 19, 2013 11:44 am

I have a simple html file that I want to implement into my RPG program (attached). Basically the html file retrieves latitude and longitude coordinates. I am trying to get the latitude and longitude coordinates into text fields in the display program, but I am not sure how to do this. Is there anyway you can do this without using RPGsp, maybe just using javascript? Any information would be great.

Thanks

Post by **David** » Wed Jun 19, 2013 12:09 pm

Yes, you can use any JavaScript you'd like in RPGsp pages. JavaScript code is handled entirely by your web browser, and is not dependent on or affected by RPGsp in any way.

This means that you can use any 3rd party JavaScript code, components, tutorials, etc., and there are absolutely no special requirements for RPGsp. If your web browser supports the code, you can run it in an RPGsp page!

You can integrate this code using the following general steps, please see JavaScript references/tutorial for exact coding concepts and syntax:

1. You can place the 'getLocation()' function into a JavaScript file inside your http server document root directory.

2. You can place a <script> tag into the <head> section of your RPGsp page to link in the file.

3. Then you can call the 'getLocation()' function as needed.

4. JavaScript code can manipulate HTML elements on screen, for example this code will change the value in a text box:

Code: Select all


// Here we are referring to the "id" attribute on the <input tag...

document.getElementById("theId").value = "My new value";

Scott Klement · Post by **Scott Klement** » Wed Jun 19, 2013 5:58 pm

You could certainly do this from a Profound UI Rich Display file (or converted DDS screen.) You don't need to use RPGsp.

What you'd do is put your JavaScript file in the /www/YOUR-INSTANCE/htdocs/profoundui/userdata/custom/js directory. (Or a similar location.) The Handler will automatically load code that's under userdata/custom/js.

Instead of using document.getElementById() and x.innerHTML, you'd want to use the changeElementValue() API to change the value of a text box. This would put the coordinates into a regular field on the display that would be read by your RPG program when the screen is submitted.

Does that help? Would you like me to put together a quick example program?

Post by **David** » Thu Jun 20, 2013 4:57 pm

Sorry, about that. For some reason I read your post as saying that you were or wanted to use RPGsp, but I see now that you had said the opposite. :-).

mrojek · Post by **mrojek** » Mon Jun 24, 2013 7:13 am

Hey guys, thanks for responding to my question so fast!

Scott, can you do a quick example program? I am still having trouble getting the value of the text box to change for some reason.

Any information would be great.
Thanks

Scott Klement · Post by **Scott Klement** » Mon Jun 24, 2013 6:28 pm

Okay, I decided rather than creating a separate JS file to just put the logic under the "onclick" of my button. So here's the screen I came up with:

: 6-24-2013 5-23-14 PM.png (53.75 KiB) Viewed 3370 times

The basic idea is that it will do a geolocation routine to find out where my browser is located, and when that completes, it will fill-in the textboxes named "txtLat" and "txtLon" (for latitude and longitude, respectively) with the values from the geolocation. The txtLat and txtLon widgets are bound to the Lat & Lon variables in the RPG program -- so when the results come back, I have it use pui.click() to submit control back to the RPG. I didn't really need to go back to the RPG in this example, but I thought it might be interesting, because it allows you to see how you'd get the data into the RPG program if you need it there.

This is what the "onclick" for the "TryIt" button looks like:

Code: Select all

if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function(pos) {
       changeElementValue("txtLat", pos.coords.latitude);
       changeElementValue("txtLon", pos.coords.longitude);
       pui.click("btnSubmit");
     });
}
else {
  alert("Geolocation is not supported by this browser.");
}

Then, just for kicks, I had the RPG build a URL to Google Maps to show that location in an iFrame widget, so you can see where those coordinates are on a map, as shown, above.

I've attached the PUI display file and the RPG code as attachments to this post so you can see how it all works.

mrojek · Post by **mrojek** » Tue Jun 25, 2013 7:37 am

Scott,

Works great, thanks for all your help!

jbarajas · Post by **jbarajas** » Mon Jan 06, 2014 5:12 pm

Hello Scott,
Hope you had a wonderful Christmas Season.

I have a question for you....
My problem is, I need the Iframe-html to update a couple of fields to the Rich-display and then hit Enter.
(something like from your sample, when I click on the map, the lat/long is passed back to the Rich-display and hit submit)

Thanks
Jimmy Barajas

Scott Klement wrote:Okay, I decided rather than creating a separate JS file to just put the logic under the "onclick" of my button. So here's the screen I came up with:
6-24-2013 5-23-14 PM.png
The basic idea is that it will do a geolocation routine to find out where my browser is located, and when that completes, it will fill-in the textboxes named "txtLat" and "txtLon" (for latitude and longitude, respectively) with the values from the geolocation. The txtLat and txtLon widgets are bound to the Lat & Lon variables in the RPG program -- so when the results come back, I have it use pui.click() to submit control back to the RPG. I didn't really need to go back to the RPG in this example, but I thought it might be interesting, because it allows you to see how you'd get the data into the RPG program if you need it there.

This is what the "onclick" for the "TryIt" button looks like:
Code: Select all
if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function(pos) {
       changeElementValue("txtLat", pos.coords.latitude);
       changeElementValue("txtLon", pos.coords.longitude);
       pui.click("btnSubmit");
     });
}
else {
  alert("Geolocation is not supported by this browser.");
}
Then, just for kicks, I had the RPG build a URL to Google Maps to show that location in an iFrame widget, so you can see where those coordinates are on a map, as shown, above.

I've attached the PUI display file and the RPG code as attachments to this post so you can see how it all works.

Scott Klement · Post by **Scott Klement** » Mon Jan 06, 2014 5:47 pm

Hey there Jimmy,

If you have JavaScript running in an iframe, it can access the parent document by prefixing it's DOM calls with 'parent'. In my example in this thread, of course, the JavaScript is running in the parent already, so there was no need to do that. But... it should work from the child by adding the 'parent' prefix.

Does that answer your question? I'm not familiar with your "iframe html", so I'm hoping I'm answering it right :-)

Profound Logic Forums

HTML script integrate with RPG program

HTML script integrate with RPG program

Re: HTML script integrate with RPG program

Re: HTML script integrate with RPG program

Re: HTML script integrate with RPG program

Re: HTML script integrate with RPG program

Re: HTML script integrate with RPG program

Re: HTML script integrate with RPG program

Re: HTML script integrate with RPG program

Re: HTML script integrate with RPG program

Who is online