If you have a field in the database that contains a URL for a file or an image or an email address, you can ‘wrap’ the field with an HTML hyperlink in the Cell Editor.
<a href='<GEN:FIELDVALUE NAME="URLFieldOne"/>'>
<GEN:FIELDVALUE NAME="URLFieldTwo"/>
</a>
The FieldOne control 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 control is displayed to the application user.
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 by setting the target to “_blank” to open the link in a new window:
<a href='<GEN:FIELDVALUE NAME="URLFieldOne"/>' target=”_blank”>
<GEN:FIELDVALUE NAME="URLFieldTwo"/>
</a>
The target attribute specifies that a new browser window is to be opened. Any target name may be used, e.g., _blank, _self, _parent, or _top.
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/EditCustomers.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 page within a TableControl or a RecordControl via the Cell Editor.
Step 2: In Iron Speed Designer, open the the Properties dialog for the page (Tools, Properties...), select the newly added controls and set these properties. Be sure to select the database table name and field name for each of the newly placed tags, e.g.:
|
Tab |
Property |
Setting |
|
|
Control name |
CustomerID |
|
Control Type |
Control Type |
Literal |
|
Display |
Visible |
Checked |
|
Bindings |
Table |
Customers |
|
Bindings |
Field |
CustomerURL |
This example assumes the CustomerURL field contains the URL.
|
Tab |
Property |
Setting |
|
|
Control name |
CustomerName |
|
Control Type |
Control Type |
Literal |
|
Display |
Visible |
Checked |
|
Bindings |
Table |
Customers |
|
Bindings |
Field |
CustomerName |
Step 3: In the Attributes tab, disable text pop-ups for both fields.
|
Tab |
Pass-Through Attribute |
Setting |
|
Attributes |
PopupDisplay |
False |
Step 4: Build and run your application.
<a href='mailto:<GEN:FIELDVALUE NAME="EmailFieldOne"/>’>
<GEN:FIELDVALUE NAME="EmailFieldTwo"/>
</a>
Note that the outer strings are enclosed in single quotes (') and the inner strings are enclosed in double quotes (").
In the example above, FieldOne is used by the <a href> tag and FieldTwo is displayed to the application user. If you want to display something else on the page, but the link points to the file, you can replace the second GEN:FieldValue with a constant string or another field.
Step 1: Drag two copies of the field you wish to display from the Toolbox onto your page.
Step 2: In the Cell Editor, wrap the FieldValue code generation tags with the <a href> tags as shown above.
Step 3: Select Tools, Properties... to open the Properties dialog. Then select each newly added control (FieldOne, FieldTwo, EmailFieldOne or EmailFieldTwo) and set these properties for each control:
|
Tab |
Property |
Setting |
|
Control Type |
Control Type |
Literal |
|
Display |
Display Format |
Visible |
Step 4: Press OK to save your settings.
Step 5: Rebuild and run your application.
Customizing Web Page Layout
Customizing Page Contents with the Cell Editor