Opening a Page in a New Browser Window

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.

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 application user is 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.:

This example assumes the CustomerURL field contains the URL.

Step 5: Build and run your application.

See Also

Button Actions and Properties