HTML Composer
Inside Look at Chaining
Barry Solomon
Information Builders, Inc.
1
The HTML Composer
 The HTML Composer enables you to build HTML Applications.
 Graphically create an HTML page in the GUI that incorporates
 Forms
 Reports
 Graphs
 JavaScript
 Cascading Style Sheets (CSS)
 We will be discussing the subject of Chaining today
3
Inside Look at Chaining
 Agenda
 Inside Look at Chaining in the HTML Composer page using WebFOCUS
77.0.3
 Building a Procedure to use when creating an HTML page.
 Simplicity of Chaining Columns.
 Modifying embedded procedures with chaining and discover

what happens.
Exploring the use of external procedures for chaining which
will allow developers to reuse procedures.
 How to use API Functions to impact chaining.
4
Building a Procedure to create an HTML page using Chaining
 Best Practice: Building an HTML Page:
 Build a procedure that has all the parameters built into the procedure and has all the necessary parameters

to create the HTML page you are building.
The procedure does not need to be the procedure that is ultimately executed from the HTML page but is
required to have all the parameters included to build the HTML page.
 Best Practice to use -DEFAULT command in your procedures to create a parameter which will be used
in the HTML Composer Page.
 Use –DEFAULTH for all parameters that the developer does not want to have a control build by the
HTML Composer Tool.
 With Chaining a Multiple OR statement is required (in our example), uses the following syntax:
WHERE ( CAR.ORIGIN.COUNTRY EQ &COUNTRY.
(OR(FIND CAR.ORIGIN.COUNTRY,CAR.ORIGIN.COUNTRY IN car)).COUNTRY. )
 Note: a naming convention should be chosen carefully.
 If two or more procedures use the same parameter names the HTML Composer will only create
one control for all the reports.
 If the parameters are named differently, the HTML Composer will create two different controls.
5
Building a Procedure to create an HTML page using Chaining
 Under most circumstances do not add JavaScript code in the function



window_onload. The only time that a Developer should insert JavaScript
code in window_onload is when it is required to set properties such as
AutoExecute properties that controls whether a report is executed
automatically when the HTM page is loaded. AutoExecute must be set
before UpdateData() is called.
The function window_onload calls, UpdateData(), that is executed on the
load of the HTM page or when refreshing the page. UpdateData’s purpose
is to load all the controls, forms, reports and set their respective properties.
Once UpdateData has completed its tasks, it will then search the HTM page
for a function called onInitialUpdate().
Function onInitialUpdate() was designed solely for the use of the
Developer to change the HTM page’s properties and appearances when the
page, control, form, and or reports when initially loaded or refreshed.
Do not EDIT or MODIFY the HTML Code, you can Modify HTML properties
using JavaScript code.
6
Building a Procedure to create an HTML page using Chaining
1. Create a new procedure.
2. Name the procedure “chaining”.
3. We will step through the building of the chaining report in the
following slides.
4. Things to note about the procedures source code are:
The WHERE clause contains three “Multiselect OR” requests
that will be used to demonstrate CHAINING.
7
Building a Procedure to create an HTML page using Chaining
Step 1:
Once in the Report Painter click on the “BY” button in the tool bar (circled in red below) and
then double click COUNTRY, CAR, MODEL, BODY TYPE, and SEATS columns in the left pane
labeled “Object Inspector” (The “Fields” tab will be selected by default) and they will be
entered on the canvas
8
Building a Procedure to create an HTML page using Chaining.
Step 2:
Now Select the “SUM” button in the toolbar (circled in red below) and
double click on the Dealer_Costs, Retail_Costs, and Sales columns in the
left pane labeled “Object Inspector” (The “Fields” tab will be selected by
default) and they will be entered on the canvas, just like Step 1.
9
Building a Procedure to create an HTML page using Chaining
Step 3:
Click the “Where/If” button to filter by COUNTRY, CAR, and MODEL. By
setting up the Where clauses we will be able to do chaining in the HTML
Compose r page.
10
Building a Procedure to create an HTML page using Chaining.
Step 4:
Click the “Where/If” button to filter by COUNTRY, CAR, and MODEL. By
setting up the Where clauses we will be able to do chaining in the HTML
Compose r page. The Expression Builder will assist you in creating the
WHERE Clause.
a)
b)
c)
d)
e)
f)
g)
h)
i)
Double click on COUNTRY.
Set the Logical Relation to “equals”.
Set the Compare Type to “Parameter”.
Double click on the text under “Compare Value”
Set Variable Type to “Multiselect OR”
Set Accept List to “Dynamic”.
Select “Car” as the Source File.
Select “COUNTRY” as the Values to Return Fields and Values for
Display Fields.
Repeat step a – h for CAR and MODEL.
11
Building a Procedure to create an HTML page using Chaining.
This will finish the chaining report and you can save the procedure now.
12
Building a Procedure to create an HTML page using Chaining
 Step 2:
 Create a new HTML Composer page and name the HTM page,

“chaining” and click the “Cancel” button.
Insert a report or graph object by doing the following:
 Click the Report button from the Components toolbar.
 The mouse pointer will turn to a crosshair when moved to the



canvas.
Click the Left mouse button and drag the mouse to create the
space for the report.
Right click on the report and select “Reference Existing
Procedure”
Choose the “chaining.fex” that was created in Step 1.
13
Building a Procedure to create an HTML page using Chaining
 Step 3:
 The New Parameter screen will allow the
HTML Composer Tool to create all the
parameters automatically.
 Proper Control Types must be selected
 Check the appropriate controls that will be
chained.
 “New single layer form” should be chosen.
 If “Do not create a form” is chosen the
“Refresh” button will not be added to the
page.
14
The final HTM page will appear like the following screen print:
Building a Procedure to create an HTML page using Chaining
 Step 4:
 Click the “OK” button and the HTML Composer Tool will create the HTML
page and all the internal references for the form.
 It is critical that the HTML Composer builds the HTML tags and all
references.
Note: In WebFOCUS 8, the HTML code will not be accessible. If the HTML
code is modified the division will not support the report that was created.
15
Building a Procedure to create an HTML page using Chaining
 Notice that the Chaining was automatically created for us and there is


nothing else that is necessary to do at this point.
Run the chaining HTM page and see it work.
However lets make a modification to the embedded procedure used to fill
the control for COUNTRY and exclude “FRANCE” from the control. Select
the control and go to the “Properties and setting” window. The Procedure
will be modified in the following manner:
 TABLE FILE car
SUM FST.CAR.ORIGIN.COUNTRY
BY CAR.ORIGIN.COUNTRY
WHERE COUNTRY NE 'FRANCE';
// TODO: Add your filters here to replace defaults
ON TABLE PCHOLD FORMAT XML
END
 Now lets run the HTM page and notice when we click on “ENGLAND”
CAR control does not work and CHAINING is broken.
 What did we do???????
16
Building a Procedure to create an HTML page using Chaining
 The Answer: Once you change/modify the embedded procedure (s),
the HTML Composer no longer controls the chaining and the embedded
procedure(s) for the HTM page. You will now have to modify and
control the chaining manually.
 The embedded procedure for CAR will have to be modified in the
following manner:
 TABLE FILE car
SUM FST.CAR.COMP.CAR
BY CAR.COMP.CAR
BY COUNTRY
// TODO: Add your filters here to replace defaults
ON TABLE PCHOLD FORMAT XML
END
 OR
17
Sharing parameters between focexecs
 TABLE FILE car
SUM FST.CAR.COMP.CAR
BY CAR.COMP.CAR
WHERE COUNTRY EQ &CNTY
// TODO: Add your filters here to replace defaults
ON TABLE PCHOLD FORMAT XML
END
 The reason for the modification is that the procedure for
COUNTRY was originally modified so the HTML Composer
expects that the developer will now control the chaining and
the automatic chaining that was taken place is no longer valid.
Now you have to control it…..
18
Controlling the relationship of chaining controls
 Click on the “Parameter” tab at the bottom of the screen and you will see the
following:
 Notice that the blue line in the picture above represents a relationship
between listbox1 (COUNTRY) and listbox2 (CAR).
 When you right click on the arrowhead pointing to listbox2, you will be able
to choose the “Property and settings” screen which displays all the properties
of the chained relationship.
 We want to pay close attention to the value of “Resolves parameter”
19
Controlling the relationship of chaining controls
The value from listbox1 will be compared to the Column or Amper
Variable listed in the “Resolves parameter”.
The Column or Amper variable listed in the “Resolves parameter”
textbox will be compared by the value in the textbox of the
“Parameter’s compare operator”
That means that the Column or Amper variable must be present in
the embedded or external procedure used to retrieve the values for
the control.
In this case we added BY COUNTRY or WHERE COUNTRY EQ
&CNTY and the procedure had to be modified and the “Resolves
parameter has to list COUNTRY or CNTY to match the modification
we made in the embedded procedure.
Now if we run the HTM page – Chaining will work again.
20
Using External procedures for chaining
 External Procedures can be used in place of an embedded procedure
without an issues.
 External Procedures should be used if you choose to custom code a
procedure.
 It is highly recommended to have an embedded procedure created within
the Report Painter and custom coding techniques should not be used.
 When writing an external/embedded procedure , it is recommended not to
use NOPRINT in the final TABLE request.
21
Inside Look at Chaining
 In WebFOCUS 77X/HTML Composer Tool has exposed a number of API
functions that can be used in JavaScript functions that will allow you to
customize an HTM Page and impact chaining.
 Function: IbComposer_getCurrentSelection
 Function: IbComposer_setCurrentSelection
 Function: IbComposer_execute
 Function: IbComposer_isSelected
 Function: IbComposer_showHtmlElement
 Function: IbComposer_enableHtmlElement
 Function: IbComposer_ResetDownChainControls
 Function: IbComposer_selectTab
 Event: onbeforeload
 Event: onafterload
 The exposed functions in WebFOCUS 77X should be used rather than calling
the functions within the HTML Composer - JS library directly or writing
extensive JavaScript code . Using the above functions assure that your code
will continue to function in future releases.
22
Inside Look at Chaining
 The IbComposer_setCurrentSelection is a very powerful function to use with
Chaining.
 How to Set the Current Selected Value for a Control
 IbComposer_setCurrentSelection('controlID', arrValues,
bUpdateDependencies);
 The Control Id is a unique identifier of the control to be changed.
 The ArrValues is a value or an array of values that will be selected or added to
the control.
 bUpdateDependencies is a true/false value or an operator that can be set to
true to update chained controls and triggered events . This feature can be
very helpful in navigating the HTM page with chaining.
23
Inside Look at Chaining – An API Function
 We are going to use an API Function to affect the Chained controls.
 Add the following code after window_onload and before the
</SCRIPT> tag:
 function onInitialUpdate(){
var cntyval ='ENGLAND';
IbComposer_setCurrentSelection('listbox1', cntyval, true); }
 The var cntyval will hold the value that we are going to select in
listbox1 and cause listbox2 to repopulate based on “ENGLAND”
 This single command in JavaScript does a lot of work and it
demonstrates how powerful the API Functions can be.
24
WebFOCUS 8 – This is the new Template Selector
25
WebFOCUS 8 – This is the new Canvas screen
Notice that the Tabs have changed (Embedded JavaScript)
26
WebFOCUS 8 – When clicking on the Embedded JavaScript
27
WebFOCUS 8 – The New Properties and settings screen
Notice the last check box
The “Values are procedure
names” is the New feature in
WebFOCUS 8 that will allow you
to dynamically change the
procedure name that is to be
executed …
28
Advanced Search Screen
https://techsupport.informationbuilders.com/tech/search.html
29
Technical Documents available
https://techsupport.informationbuilders.com/tech/tcn_toc.html
30
Technical Documentation Library
http://documentation.informationbuilders.com/index.asp?i
d=aa307ee48d981f18d839683461394757581d
31
The HTML Composer Presentation – Question and Answers
I hope that you have enjoyed the presentation and it has
been informative. If you have any questions, please feel
free to ask QUESTIONS, Questions are good.
Please be sure to fill out the evaluation form.
When building your HTML Composer pages remember to
ask questions on FOCAL POINT or open a Case in Technical
Support and we will be happy to help
32