Opening a Page in a New Browser Window

The best way to launch a new browser window when clicking a button is to use a GEN:Hyperlink tag, which can be made to look like a button using standard HTML.
- Mahalakshmi Ramachandran, Software Engineer, Iron Speed, Inc.

June 13, 2007
Iron Speed Designer V4.X

GEN:Hyperlink tags

The best way to launch a new browser window when clicking a button is to use a GEN:Hyperlink tag, which can be made to look like a button using standard HTML. (Use one of the button template files, such as Button.html, for guidance. Once you copy those files, you can change them to use GEN:Hyperlink and use these copied files where you want to open a new window.) Note, however, the GEN:Hyperlink is not a data-bound control, so it will not display data from your database as a clickable link.

Using GEN:Hyperlink, set the Target Window property to open a new window.

Tag Property Setting

Code Generation Tag MyHyperlinkTag

Target Window _blank

GEN:Button tags

The GEN:Button tags, and their subsidiary tags such as GEN:LinkButton, GEN:ImageButton and GEN:PushButton, produce an action that requires a postback because some buttons, such as “OK”, are used to validate and update the database. As such, they do not support redirecting the target to another window. Some of these buttons produce an <a href ...> HTML tag, but their OnClick action is set to a JavaScript function to validate data if required.

GEN:FieldValue tags

GEN:FieldValue tags can be easily made to open a browser in a new window when clicked. The following example uses a FieldValue tag to open an Edit Record page in a new browser.

<a href='<GEN:FIELDVALUE NAME="FieldOne"/>' target=”_blank”>
<GEN:FIELDVALUE NAME="FieldTwo"/>
</a>

The target attribute specifies that a new browser window is to be opened. Any target name may be used.

The FieldOne code generation tag is bound to a database field containing the linked URL used by the <a href> HTML tag. The user will be redirected here when the link is clicked. Note that the href attribute must use single quotes to encapsulate the linked URL since the GEN:FieldValue code generation tag requires that double quotes be used for its Name attribute.

The FieldTwo code generation tag is what is displayed to the user. You can place as many data-bound GEN:FieldValue code generation tags within the <a href> tag as you desire. For example, you could display an entire name and address block as a hypertext link:

<a href='<GEN:FIELDVALUE NAME="CustomerURL"/>' target=”_blank”>
    <GEN:FIELDVALUE NAME="FirstName"/> <GEN:FIELDVALUE NAME="LastName"/>
    <GEN:FIELDVALUE NAME="Address"/>
    <GEN:FIELDVALUE NAME="City"/>, <GEN:FIELDVALUE NAME="State"/> <GEN:FIELDVALUE
      NAME="Zip"/>
    Customer since <GEN:FIELDVALUE NAME="CustomerDate"/>
</a>

You may also include text and other HTML within the <a href> tag.

If your database does not have a field containing the URL, then you can compose the URL using GEN:FieldValue code generation tags within the <a href> tag, e.g:

<a href='../Customers/EditCustomersRecord.aspx?CustomerID=<GEN:FIELDVALUE NAME="CustomerID"/>'
target=”_blank”>
<GEN:FIELDVALUE NAME="CustomerName"/>
</a>

Use this procedure to bind the code generation tags to their appropriate database fields:

Step 1: Place the above HTML, including <a href> tag and GEN:FieldValue code generation tag(s) in your HTML layout page.

Step 2: In Iron Speed Designer, display the the Page Properties dialog for the page (Tools, Page Properties…). Click the Show Tree button to display all the GEN: code generation tags on the page, and navigate to the newly placed tags: FieldOne, FieldTwo, etc. You may need to expand the tree nodes to see them.

Step 3: In the Display tab, select Literal as the Display Option for each of the newly placed tags. Make sure the field is Visible in the Display Style area.

Step 4: In the Bindings tab, select the database table name and field name for each of the newly placed tags, e.g.:

Tag Property Setting

Code Generation Tag FieldOne

Display Style Literal

Table Customers

Field CustomerURL

This example assumes the CustomerURL field contains the URL.

Tag Property Setting

Code Generation Tag FieldTwo

Display Style Literal

Table Customers

Field CustomerName

Step 5: Build and run your application.

About the Author

Mahalakshmi Ramachandran
Software Engineer, Iron Speed, Inc.

Maha has experience developing Web Applications using the .NET technology and has been with Iron Speed since 2005.

Maha holds an M.S. degree in Computer Engineering from San Jose State University and a B.E. degree in Computer Science and Engineering from India.



	Copyright © 2005-2008, Iron Speed, Inc. Iron Speed® is a registered trademark. All rights reserved.	Privacy Statement