< Back to Blog

Creating Dialogs in Javascript or Passing Data Between Windows

Techie

For my latest project here at Windward, I needed to learn how to create a dialog using javascript.  It turns out that this isn't exactly a trivial step in javascript, and so if you're new to javascript like I am, then it takes a bit of effort to figure out what you have to do here.  Here's what I've worked out so far.

First, there are some canned dialogs that you can launch in javascript - alert, confirm, and prompt.  These are simple dialogs that display a message, ask for a yes/no, or ask for a text input.  That's all they do though, and they only display plain text data, so they're pretty lame.  If you want a more useful dialog, like a file browser or some kind of input form, these just won't do.

What you can do though is use the window.open method to load up your dialog.  You create an html file, let's call it dialog.html, and then you call window.open('dialog.html') from the window you want to open the dialog from.

Now window objects have an opener property that points to the window that called window.open.  So lets say our main page is index.html, and we click a button, and call window.open('dialog.html').  index.html is the opener of dialog.html, so by using the the opener property in dialog's javascript, you can get to properties and methods in index.html.

So using opener, there are at least two ways of passing data to the opener of the dialog.  Let's say your dialog is a file browser.  You can have the dialog set the value of a text box in the opener to the selected file.  This is the first way of passing data to the opener - find the appropriate controls in the opener, and set their values.

The second way of passing data to the opener is to call one of the opener's method.  So again, let's say your dialog is a file browser.  You can call opener.loadFile(fileName), for instance.  You're passing file name from your dialog into the opener's loadFile method.  Now the opener can do whatever it wants with that.

I'm thinking that in general, it will be a bit cleaner to call one of the opener window's methods, because then all you have to do in your dialog is stuff a data object and pass it to the method.  You don't have to know about any of the opener's controls.

Anyway, here's some example code to demonstrate this.  Mean time, I'll have to figure out how to make this a modal dialog.


This page is windowtest.html.  It's just a text box and a button, and the button opens the dialog window, browse.html.  browse.html will calls the loadFile method via the opener property.

<html>

     <body>

           <script type="text/javascript">

           function btnBrowse_Click()

           {

                 var browseWin = window.open('browse.html');

           }

           function loadFile(fileName)

           {

                 if (fileName == null)

                 {

                       alert("fileName null");

                       return;

                 }

                     

                 var txtFile = document.getElementById("txtFile");

                 if (txtFile != null)

                       txtFile.value = fileName;

                 else

                       alert("txtFile null");

           }

           </script>

           <input type="text" id="txtFile" />

           <input type="button" id="btnBrowse" value="browse..."onclick="btnBrowse_Click()" />

     </body>

</html>



This is the browser.html page.  It doesn't have any controls or text.  When it loads, it calls opener.loadFile("file.txt").  This is just a toy example, but of course, you can imagine having callLoadFile being called when an file in a list is clicked, and then passing that file's url to opener.loadFile.

<html>

     <body onload="callLoadFile();">

           <script type="text/javascript" >

               function callLoadFile() {

                   if (opener.loadFile != null)

                       opener.loadFile("file.txt");

                   else

                       alert("opener.loadFile null");

               }

           </script>

     </body>

<html>

Tags Start & End

Tags Can Start & End Anywhere

Appendix B

.NET code for multi-page image output

Appendix A

Java code for multi-page image output

Data Bin Search

The Data Bin can now be searched to find a table, column, node or other piece of data without scrolling through it all.

Shrink to Fit

This will shrink the contents of a cell until it fits the defined cell size.

Time Zone Conversion

A new Windward macro has been added to help with converting dates and times from UTC time to the local time zone.

Image Output Format

New image output formats added.

PostScript Output Format

PostScript, commonly used with printers and printing companies, has been added as an additional output format.

New and Improved Datasets (Designer, Java Engine, .NET Engine)

Datasets have been re-written from scratch to be more powerful and easier to use.

Stored Procedure Wizard (Designer)

This works for all tag types that are connected to a SQL-based data source (Microsoft SQL Server, Oracle, MySQL, or DB2).

Boolean Conditional Wizard (Designer)

Before, conditional statements could only be written manually. Now they can also be built using our intuitive Wizard interface.

Reorganized Ribbon

The ribbon menus have been re-organized and consolidated to improve the report design workflow.

XPath 2.0 as Data Source

Adds various capabilities such as inequalities,descending sort, joins, and other functions.

SQL Select Debugger

SQL Select  Debugger

  • The look and feel was improved
  • Stored Procedure Wizard
  • Improved Exceptions pane

Tag Editor/Tag Selector

Added a Query tab as a field for typing or pasting in a select statement

  • Color Coding of Keywords
  • TypeAhead
  • Evaluate is now "Preview"

Rename a Datasource

All tags using that Data source will be automatically updated with that name.

Connecting to a Data Source

New single interface to replace 2 separate dialog boxes

Tag Tree

Provides a display of all the tags in the template, structures as they are placed in the template. Provides an easy way to see the structure, go to any tag, and see the properties of a tag.

Added Javelin into the RESTful Engine

Support for Google Application Engine Integration

The ability to integrate the Windward Engine into Google’s cloud computing platform for developing and hosting web applications dubbed Google Applications Engine (GAE).

Additional Refinement for HTML Output

  • Improved indentation for ordered and unordered lists
  • Better handling of template header and footer images
  • Better handling for background images and colors

Redesigned PDF Output Support

This new  integration will allow for processing of complex scripts and bi-directional  text such as Arabic.  Your PDF output  will be much tighter and more closely match your template, and we’ll be able  to respond rapidly to PDF requests and fixes.

PowerPoint Support

Includes support for new ForEach and slide break handling, table header row repeat across slide breaks, and native Microsoft support for charts and images.

Tags are Color Coded

Tags are color coded in the template by type, making it easy to visually identify them.

Increased Performance

Version 13’s core code has been reworked and optimized to offer a reduced memory footprint, faster PDF generation and full documentation of supported features and limitations in the specifications for DOCX, XLSX and PPTX.

Advanced Image Properties

Documents can include advanced Word image properties such as shadows, borders, and styles.

Improved HTML Output

Windward has updated HTML output to reflect changing HTML standards.

Version 13 New Data Sources

Windward now works with a slew of new datasources: MongoDB, JSON, Cassandra, OData, Salesforce.com

Generate Code

Designer (fka AutoTag) Generate Code tool allows you to open an existing template and, with a click of a button, automatically create a window with the code needed to run your current template with all data sources and variables in your .NET or Java project. The process is quick, shortens delivery time and helps alleviate any bumps in the road.

Pivot Tables Adjusted in Output

Any pivot tables in the template are carried over to XLSX output. The ranges in the pivot ranges are adjusted to match the generated output. So your final XLSX will be pivot tables set as expected in the generated file.

Imported Template Can be Set to Match the Parent Styles

In an imported sub-template, if its properties for a style (ex. Normal) differ from the parent template's properties for the style, the use in the sub-template can be set to either use the properties in the sub-template, ot the properties in the parent.

Tags can be Placed in Text Boxes

Tags can be placed in text boxes. Including linked text boxes. This gives you the ability to set the text in a textbox from your data.

Tags can be Placed in Shapes & Smart Art

Tags can be placed in shapes & smart art. This gives you the ability to set the text in a shape from your data.

HTML Output Supports Embedded Images

When generating HTML output, the engine can either write bitmaps as distinct files the generate HTML references, or it can embed the images in the HTML providing a single file for the output.

Footnotes & Endnotes can Have Tags

You can place tags in pretty much any part of a template, including in footnotes & endnotes.

Document Locking Supported in DOCX & XLSX

Any parts of a DOCX or XLSX (PowerPoint does not support this) file that are locked in the template, will be locked the same in the output.

Specify Font Substitution

If a font used in the template does not exist on the server generating a report, the font to substitute can be specified.
In addition, if a glyph to be rendered does not exist in the font specified, you can specify the replacement font. This can be set distinctly for European, Bi-Directional, and Far East fonts.

Process Multiple Datasources Simultaneously

When Windward is merging the data into a template, it process the template handling each tag in order, and the tags can pull from different datasources. This allows the select in a tag to use data from other datasources in the select.

Tomas R

This blog was written by:_
Tomas R

For over 10 years, Windward has lead the industry with our world-class document generation platform that creates visually stunning, data-powered documents designed exactly the way users want and are created in a fraction of the time and cost compared to existing solutions. Proudly located in Boulder, Colorado, Windward Studios is the premier solution for developers and business users adding reporting and document generation capabilities to their applications in over 70 countries around the world.

© 2019 Windward Studios Inc.

Contact

Got questions about reporting and document generation? We've got answers—let's connect!
Send a note