< 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

Displays of all the tags in the template, structured as they are placed in the template. This provides a simple & intuitive way to see the structure of your template. Also provides the capability to go to any tag and/or see the properties of any 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

The Generate Code tool in the designer 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. Simply copy this code and paste into your application's code in the appropriate place. You now have Windward integrated into your application.

You only need to do this once. You do not do this for each template. Instead, where it has explicit files for the template and output, change that to parameters you pass to this code. Same for the parameters passed to Windward. This example uses explicit values to show you what to substitute in where.

Pivot Tables Adjusted in Output

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

This makes creating an XLSX workbook with pivot tables trivial.

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, or the properties in the parent.

You set to retain when you don't want the child template's styling to change when imported. You set to use the parent when you want the styling of the imported template to match the styling in the parent.

Any explicit styling is always retained. This only impacts styling set by styles.

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

If you need this - it's essential. And if you don't need it, it's irrelevant.

Windward enables you to build a document by applying multiple datasources to the template simultaneously. When Windward is merging the data into a template, it process the template handling each tag in order, and each tags can pull from different datasources. (As opposed to processing all of one datasource, then processing the next.)

This allows the select in a tag to use data from another datasource in its select. For example, if you are pulling customer information from one datasource, you can then pull data from the sales datasource using the customer ID of the customer presently processing to pull the sales information for that customer. Additional details ...

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
messaging, phone, or email contact optionsclose out button