- HTML Code Association Example

HTML Code Association Example

In this example, we will demonstrate how the HTML Code Association can be used to easily arrange and format data. In particular, we are going to be creating simple, dynamic PlanetJ business cards. In other words, the user will click 'Generate Business Card' and WOW will use row parameters (??FIELD) to dynamically plug in data to a HTML based business card template. The goal here is to show you how this association type can be used to format your data in just about any way imaginable.

Overview

We want to transform our employee data from the standard table layout into a nice, stylized business card layout.

Create Employee Operation

First, we need to create the operation that will return the data and derived field that on which we set the association to. Insert a new operation of type 'SQL Operation' and enter the following Operation Code:

SELECT *,'Generate Business Card' AS busCard FROM PJDATA.EMPLOYEE

Create HTML Code Association Operation

Second, we will create the HTML Code Association that will act as the HTML template for the business card. Insert a new operation of type 'HTML Code Association' and enter the HTML given below in the Operation Code field. The blue text is all standard HTML and CSS and, if you are not too familiar with either, can easily be generated using an HTML editor such as Adobe® Dreamweaver® or Microsoft® FrontPage®. The important code to note is the flagged by red text that contains new parameters used to retrieve data from the data row. These are in the form:

??FIELDNAME

NOTE: There must always be a space after a row parameter.

<div style="width: 340px; height: 196px; background-image:

url(user/sample/images/PJ_BusinessCard.jpg); background-repeat: no-repeat;">

<div style="position: relative; text-align: right; font-family: Arial,Helvetica,sans-serif;

left: 130px; top: 30px; width: 189px; height: 56px;">

??firstname ??lastname

</span><br />

??position

</span><br />

??company

</span>

</div>

<div style="position: relative; text-align: right; font-family: Arial,Helvetica,sans-serif; left: 82px;

top: 81px; width: 189px; height: 29px;">

??telephone

</span><br />

??email

</span>

</div>

This HTML code is simply laying our employee data (the row parameters) on top of a background image.

Set the Association to a Field

Third, and last, we need to assign the association we created in step 2 to the derived busCard field from step 1. Create a derived fielDerived Fieldsd descriptor for the busCard field in the pjdata.employee table, set its Association Operation to the one created in step 2, and update.

That's it! All that is left to do is run the application and click the 'Generate Business Card' field. Hopefully, you have seen from this example that the layout of your data is only limited to what you can create using HTML and CSS. Invoices, reports, dynamic web pages, etc. are all as easy as plugging in ??FIELDNAME.

This example only used the basic row parameter. However, by using row parameters with Full Field Rendering notation, you can generate fields within an HTML Code Association with all the formatting (possible values, association hyperlinks, etc.) specified in their respective field descriptors rather than just plain field value.

Page updated

Report abuse