Skip to main content

Embedded Web Page

I finally had time to play with Nathan Freeman's embedded frameset technique that he posted on his blog awhile back. He has on his web site his Sesame Street demo that he created. It is a really cool idea that he came up with. So I thought I could expand on this technique and demonstrate how you could use this technique to embed a web page within a Lotus Notes document.

I thought a good demo would be embedding Google Map onto a Lotus Notes document. This would be great to have in something like a contact management system. Rather than having it pop up in a new Lotus Notes window, you could have the Google Map appear inside the document. Using the technique that Alan Lepofsky mentioned on his blog, google mapping technique, you can combine the two techniques to create an embed Google Map.



Since Google Map does not look too good in a small embedded window, I created it as a pop up window within the document using layers.

I have included the code for this in the sample database. link Here is how it works.

In the form “URLaddress,” I created a series of fields that represents the contact information for a person. There is also a hotspot that will be used to display Google Map for that contact.

Just as with the Sesame Street demo we created a frameset that has a hidden frame named “launcher.” We create a form named “secondform” that autoframes in the hidden frame, “launcher.” In the form “URLaddress” we create a layer that has an embedded editor that displays the form “secondform.” This will force the frameset to appear within the embedded editor in the form. The layer serves as a pop up window and its appearance is determined by the value in the field “closeField”.



When you click on the hotspot on the form “URLaddress” it will calculate the Google URL for the contact location. This information is then stored in a notes.ini parameter “URLFIELD.” The field “closeField” which determine if the pop up layer is shown is set to “1” and the document is refreshed. When the document is refreshed, the embedded frameset appears.

The main frame of the frameset displays an URL that is either a blank Lotus Notes page, “blankpage” or the Google Map URL that was stored in the notes.ini parameter “URLFIELD”.



Unfortunately, one issue that has come up is that if the Web page has an input field in it, the focus will remain there until you close off the Web page. The backspace and cursor keys will not work otherwise. Therefore, in the X close button in the pop up layer, the code clears the notes.ini parameter when you close the pop up layer so that when you refresh the page the web page is closed.

There is a number of different things that you could do with this technique including creating composite applications. So try it and thank Nathan Freeman for his embedded frameset technique. Next time, composite applications even on Notes 5 clients.

Comments

Anonymous said…
I looked at this approach to include a 'preview' browser to show how documents look in a browser. Unfortunately the support for CSS for the browser in Notes is so poor, even in Notes 8 that I find not done to use this functionality...

Popular posts from this blog

The iPhora Journey - Part 8 - Flow-based Programming

After my last post in this series -- way back in September 2022, several things happened that prevented any further installments. First came CollabSphere 2022 and then CollabSphere 2023, and organizing international conferences can easily consume all of one's spare time. Throughout this same time period, our product development efforts continued at full speed and are just now coming to fruition, which means it is finally time to continue our blog series. So let's get started... As developers, most of us create applications through the conscious act of programming, either procedural, as many of us old-timers grew up with, or object-oriented, which we grudgingly had to admit was better. This is true whether we are using Java, LotusScript, C++ or Rust on Domino. (By the way, does anyone remember Pascal? When I was in school, I remember being told it was the language of the future, but for some reason it didn't seem to survive past the MTV era).  But in the last decade, there a

Creating Twitter Bootstrap Widgets - Part II - Let's Assemble

Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget Creating Twitter Bootstrap Widgets - Part II - Let's Assemble Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together This is two part of my five part series "Creating Twitter Bootstrap Widgets".   As I mentioned in part one of this series, Twitter Bootstrap widgets are built from a collection standard HTML elements, styled, and programmed to function as a single unit. The goal of this series is to teach you how to create a Bootstrap widget that utilizes the Bootstrap CSS and Dojo. The use of Dojo with Bootstrap is very limited with the exception of Kevin Armstrong who did an incredible job with his Dojo Bootstrap, http://dojobootstrap.com. Our example is a combo box that we are building to replace the standard Bootstrap combo box. In part one, we built a widget that looks like a combo box but did not have a drop down menu associated with it to allow the user to make a select

The iPhora Journey - Part 3 - Creating an Integrated UI Framework

The iPhora Journey - Part 1 - Reimagining Domino The iPhora Journey - Part 2 - Domino, the Little Engine that Could The iPhora Journey - Part 3 - Creating an Integrated UI Framework There are many ways to create the user interface (UI) for a web application. The HTML page could be created on the server and then pushed out. It could be static with the data generated on the page by the server with JavaScript, providing a more dynamic experience, or the server could generate new HTML content to update portions of the web page. XPages or PHP are good examples of this. Another method is to have the web page partially generated by the server and have JavaScript build the rest of the HTML by pulling data from the server via an API. This is the approach used in the Single Page Application (SPA) model. In all cases, it is still dependent on the web server technology being using.  As mentioned previously in this blog, XPages is dependent on complete integration between form and document, which e