Unparalleled Functionality for Your
Business Users with HTML Composer
David Glick
Information Builders Summit 2010 Users Conference
June 2010
Presentation Abstract: Parameters and Chaining are the cornerstones of the HTML Composer. Want to make a
control disappear based on an event? Want to change the sorting of display and internal values? Want to have one
page pass parameters that page does not use to a called page? Want to apply a Rich Internet Application Theme
and add an interactive experience to the page? Add a Search Control, Paging Control, plus more. Now you can do
all these things. Come to this lab and see them in action.
Unparalleled Functionality with HTML Composer
Page 1 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
Overview
You are an employee of Century Electronics Corporation working in the IT department. Another
department has requested that you create a Rich Internet Application that will take the Country, State,
and City and return a report of the revenue from Century Electronics products sold at the store in that
location. The application should only require a state be selected for the United States since states in
other countries only have one city we are interested in. In addition, the application should display
another page where the store contact information will be displayed.
Part 1: Prepare the Report Procedures
1. WebFOCUS Developer Studio should already be started. If it is not, please start it.
2. In the Local Projects area, click the plus sign next to the RIA Parmschain project to expose its
folders
3. Click the Procedures folder to display its contents, and double-click the revbycategory.fex file to
open it in the Procedure Viewer, and then double-click the Report tile to open it in the Report
Painter.
4. Click the Options button on the toolbar
then click the Style tab.
to open the Report Options dialog, and
5. Toward the bottom right of the dialog, click the Style File Selection button to display the Style
File Selection dialog.
Unparalleled Functionality with HTML Composer
Page 2 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
6. Next to the text, “Include StyleSheet File”, click the New icon
Unparalleled Functionality with HTML Composer
Page 3 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
7. Double-click the name ENria_ocean_rounded_theme.sty in the “Predefined Template Files”
listbox to associate this StyleSheet with the revbycategory.fex procedure.
8. Click the Finish button to close the StyleSheet Selection dialog and return to the Report Options
dialog.
9. Click Apply and Ok to return to the Report Painter.
10. From the File menu select Close to close the Report Painter and return to the Procedure Viewer.
Click Yes when prompted to save.
11. From the File menu in the Procedure Viewer, select Close to close the Procedure Viewer and
return to the Developer Studio Explorer.
12. Perform steps 3 through 11 again, but this time with the storeinfo.fex procedure.
13. Now we will start creating the web page.
Part 2: Create the HTML Page
1. Click the HTML Files folder to display its contents, then right-click on the HTML Files folder to
display its context menu.
Unparalleled Functionality with HTML Composer
Page 4 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
2. Select New, HTML File.
3. In the Add New HTML File dialog, enter the name of the page which is lab-page, and click the
Open button to open the HTML Composer.
4. On the right side, in the Properties sheet dropdown, select the DOCUMENT object.
5. Click in the input area next to the RIA Theme property to display its dropdown, and select Ocean
Rounded. The canvas updates with the Ocean Rounded RIA Theme which matches the
StyleSheet selected for the two report procedures in Part 1 of this lab.
6. Click the toolbar button with the capital letter A on it to create a text box
7. Use drag and drop with the mouse to draw a box to contain the text
8. Double-click inside the text box to put it in edit mode and enter the text, “Century Electronics
Corporation”.
9. In the Properties Sheet for the textbox, set the properties as follows. Double-clicking in the
input field will put it in edit mode so text can be entered:
Unparalleled Functionality with HTML Composer
Page 5 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
10. In the Properties sheet for the text element, click the Styling: Advanced input field to display the
ellipses button on the right side of the input field.
11. Click the ellipses button to display the Style Composer dialog
Unparalleled Functionality with HTML Composer
Page 6 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
12.
With Font selected in the left column,
click the ellipses button next to Family and select
Arial from the Installed Fonts list and click the arrow
button to move it to the Selected Fonts list
13.
Click the OK button to close the Font
Picker dialog.
14.
15.
16.
17.
Under Font Attributes, select the Color Navy from the dropdown list.
Next to Size Specific, enter 24 and px from the units dropdown list.
For Bold Absolute, select Bold from the dropdown list.
The completed Style Composer dialog for Font should look like this:
Unparalleled Functionality with HTML Composer
Page 7 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
18.
In the left column of
the Style Composer dialog, select
Text.
19.
On the top of the
right side of the dialog, for
Alignment, Horizontal, select
Centered from the dropdown list.
20.
Click OK at the
bottom of the Style Composer dialog
to close the dialog and instantiate the
settings we made.
21. Using the RIA Components toolbar
select the Accordion control (the one on the left),
and draw a large container for it in the center of the page.
Unparalleled Functionality with HTML Composer
Page 8 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
22. Click the toolbar button with the picture of a piece of paper on it. This is the button to create a
report object
23. Use drag and drop with the mouse to drag the report toolbar button from the toolbar to the
accordion page and drop it on the page. This makes the report object a child of the accordion
page. Not doing this drag and drop procedure will result in the report not being a child of the
accordion.
Unparalleled Functionality with HTML Composer
Page 9 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
24. Right-click on the report placeholder and select Reference
Existing Procedure from the context menu
25. From the Get Source File dialog, select revbycategory.fex
and click the Open button.
Unparalleled Functionality with HTML Composer
Page 10 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
26.
Select “Do not create
a form” from the “Parameter
grouping options” dropdown and
check the “Auto chain controls in
above specified order” checkbox,
then click OK when you see the New
Parameters window. This will
automatically create chained
dropdown list controls for the three
parameters in this report request.
27. Reposition and resize the objects as needed. To move all the controls, just click when the
mouse pointer is a cross-arrow and the panel object in which all the controls are contained will
be selected. Then drag and drop or use the arrow keys to move the group.
Unparalleled Functionality with HTML Composer
Page 11 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
28. Select the report object and use the mouse or arrow keys to move it as well if you desire.
29. Click on the accordion control to select it so the Property sheet will display its properties.
30. In the Property sheet, locate the “Selected Page Title” property.
Unparalleled Functionality with HTML Composer
Page 12 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
31. Double-click in the input area to put it in edit mode and type “ - Revenue by Category” next to
“page 1” and hit enter to instantiate the change. The title bar of page 1 is updated.
32. Click the Save icon to save your work thus far
33. Run the page to see the results.
34. First click the Run button and see that a report is displayed. This shows that the controls are
chained which was accomplished by the “Auto chain controls in above specified order”
checkbox. From the Country dropdown, select Spain and notice that the State and City values
automatically update. The State list dynamically changes based on the selected Country and the
City list dynamically changes based on the selected State. You may also notice that for the
countries other than the United States, there is only one city for each state in our database. For
ease of use, there is no need for the user of our page to select a State for countries other than
the United States. So, what we will do next is add conditions to our controls to only show the
State control when the Country is United States.
35. Close the web browser to return to the HTML Composer.
Part 3: Adding Conditions in Chaining
1. Click the Parameters tab at the bottom of the canvas
2. Here you can see the three chained controls and the parameters they are bound to
Unparalleled Functionality with HTML Composer
Page 13 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
3. Click the arrowhead for the first chain link between combobox1 and combobox2.
4. It will highlight and display the Properties and Settings dialog for the chain link.
Unparalleled Functionality with HTML Composer
Page 14 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
5. Change the Default condition (currently displayed) to have an Action of Populate, hide and a
Data Type of Static
Unparalleled Functionality with HTML Composer
Page 15 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
6. Multi-select all the values at the bottom of the dialog and delete them.
7. Next to the text, “Items may be dragged into the desired order”, click the dropdown arrow on
the button that looks like
and select “Add ignore value”. This tells the control to list a
value of “Ignore All (_FOC_NULL)”, so no states for the selected Country will be selected
8. What this does is that by default, the State control will be populated with a value of “Ignore All”,
meaning no WHERE test will be used to limit the STATE values, and the control will be hidden
(not displayed).
9. Now, we need to add a condition that will allow the State control to display when the Country is
United States.
10. At the top of the Properties and Settings dialog, click the icon to create a new condition (the
icon to the right of the Conditions dropdown list
Unparalleled Functionality with HTML Composer
Page 16 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
11. For the newly created Condition1, we want
to set the Action to Populate with alternate, Show
12. Click the ellipses button next to “Selected
values” and select United States by double-clicking
that value from the list of values that displays.
13. For Data Type, select Dynamic
14. Leave Embedded Procedure selected, and
click the ellipses button next to the input field to
display the Get Source File dialog with a list of master
files. Select centurysales.mas and click Open
15. Click the ellipses button next to Value Field
and select STATE from the field list that displays by
double-clicking it. Notice that the Display Field also
populates with the STATE field as well as the
procedure code that will be used to populate the
control
16. The completed lower section of the
Properties and Settings window should look like this
window on the left
17. The information in this window is
automatically saved with no need to click a Save
button.
Unparalleled Functionality with HTML Composer
Page 17 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
18. Click the Save icon on the toolbar to save your work
19. Now let’s run our page and see the results
20. Notice that the STATE control
does not show. This is a result of our
modifications to the Default
Condition for the link between the
COUNTRY and STATE controls
21. Click the Run button and you will see a report with the State of Quebec since Montréal is in
Quebec
22. Select Toronto from the City dropdown and click Run. Now you get a report with the State of
Ontario since Toronto is in Ontario
23. Now select United States from the Country dropdown and you will see the STATE control
appear. This is a result of the second condition we added, Condition1.
24. Select a STATE and notice the CITY control dynamically populates based on the cities in the
selected State. Click the Run button to run the report.
25. Close the web browser and return to the HTML Composer
26. For the next step, we will create a second page in the accordion control that will contain the
report that will display the Name, Address, City, State, ZIP, phone, fax, and email for the store.
Part 4: Creating the Second Page of the Accordion
1. Switch to the Design tab, if not already there.
2. Open page 2 of the accordion control by double-clicking on the accordion object.
Unparalleled Functionality with HTML Composer
Page 18 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
3. Click the toolbar button with the picture of a piece of paper on it. This is the button to create a
report object
4. Use drag and drop with the mouse to drag the report toolbar button from the toolbar to the
accordion page and drop it on the page. This makes the report object a child of the accordion
page. Not doing this drag and drop procedure will result in the report not being a child of the
accordion.
5. Right-click on the report placeholder and select Reference
Existing Procedure from the context menu
6. From the Get Source File dialog, select storeinfo.fex and click
the Open button.
7. This time when you see the New Parameters window, we will
select “Do not create a form” from the “Parameter grouping options”
dropdown like we did before.
8. Click OK in the New Parameters window to close that window
9. Move and resize the objects to resemble the following layout
10. With the accordion selected locate the Selected Page Title property in the Property sheet and
double-click in the input area to put it in edit mode.
Unparalleled Functionality with HTML Composer
Page 19 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
11. Append “ - Store Information” after “page 2” so the title reads “page 2 - Store Information” and
hit enter to instantiate the change.
12. Click the Save icon on the toolbar to save your work.
13. Let’s run the page to see what we have done.
14. Page 1 of the accordion displays and we can run reports as before, but if we click the title bar of
Page 2, that page opens and we can run the Store Information report for any storecode. What
would be nice is to have a button on the first page that will open page 2 automatically creating a
more integrated connection between page 1 and page 2.
15. Close the web browser and return to the HTML Composer
Part 5: Create a Button to Open Page 2
1. With the accordion selected, right-click and select “Select Previous Page” to open page 1.
2. If there is not enough space for a button to the right of the report, select the report container
and either move the right edge in a little, or move the entire report to the left a bit.
3. Drag and Drop a push button
from the toolbar to the right side of the report using the
same method we used to drag and drop report objects from the toolbar.
Unparalleled Functionality with HTML Composer
Page 20 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
4. Select the button on page 1 of the accordion and in the Property sheet locate the Value
property which is the last property in the list.
5. Double-click in the input area of the Value property to put it in edit mode and type “Get Store
Info” to change the text on the button. Hit enter to instantiate the change.
6. If the text on the button does not show completely, use the sizing handles to make the button
larger to accommodate the text.
7. With the button selected, select the “Events” tab on the Property sheet to display all the
possible JavaScript events that can be created.
8. In the input area next to “onclick”, click to display the ellipses button then click the ellipses
button so we can create the onclick event for this button.
9. The canvas changes to the HTML tab and a code block skeleton is generated for our onclick
event which looks like:
function button3_onclick(ctrl){
}
10. Between the curly braces, type the following code:
var acc = GetBindowsComponentById(“accordion1”);
acc.selectNextPage();
11. The complete code block should look like:
function button3_onclick(ctrl){
var acc = GetBindowsComponentById(“accordion1”);
acc.selectNextPage();
}
12. This is some JavaScript that will automatically select the next page of the accordion when the
button is clicked.
13. Click the Save icon on the toolbar to save your work.
Unparalleled Functionality with HTML Composer
Page 21 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
14. For some added visual effect, let’s add some animation to this button. Click on the Design tab at
the bottom of the screen to switch out of the HTML.
15. Select the button, and in the Properties sheet, switch from the Events tab to the Properties tab.
16. Locate the Animation Properties property and click in the input area to display the ellipses
button
17. Click the ellipses button to display the Animation Properties dialog
18. We are going to add Opacity Animation, so check the checkbox to the left of the Opacity
Animator text to activate the controls for opacity animation.
Unparalleled Functionality with HTML Composer
Page 22 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
19. From the Type dropdown, select FadeIn so that the button will fade in when the page loads
20.
21.
22.
23.
Click the OK button to close the Animation Properties dialog.
Click the Save icon on the toolbar to save your work.
Let’s run the page to see what we have done.
When the page displays and the button fades in, click the “Get Store Info” button and page 2 of
the accordion will open.
24. Close the web browser to return to the HTML Composer.
25. In the next step, we will modify page 2 of the accordion to not show the STORECODE control
since in our database, each city only has one store. We will also chain STORECODE off of city so
it is automatically populated with the correct value
Part 6: Add STORECODE to the Chain
1. Switch to the Parameters tab
2. To chain the STORECODE control off of the CITY control, click in the center of combobox3 and
drag to the center of combobox4 and release the mouse button.
3. Click the arrowhead on the chain link connecting combobox3 to combobox4 to display the
Properties and Settings dialog for this chain link.
4. Change the Action for the Default condition to “Populate, hide” and leave the other settings
unchanged.
5. On the Design tab, open page 2 of the accordion by double-clicking the accordion object.
6. You may wonder if we need to delete the STORECODE label since the control will be hidden. But
we do not since hiding the control automatically hides the label too.
7. Since the STORECODE control is hidden, delete the “Run” button by selecting it and hitting the
delete key.
8. Now in order for the report on this page to run when the page first loads, we need to set the
Auto Execute property for the report because there is no “Run” button. Auto Execute only runs
the report when the page first loads. After initial load, we need to do something else to cause
the report to run when the parameter value changes.
9. With the report object selected, look at the Property Sheet and find the Auto Execute property
Unparalleled Functionality with HTML Composer
Page 23 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
10. Click in the input area to the right of Auto Execute, and select True from the dropdown
11. In order for the report on this page to run when the STORECODE value changes, it needs to
automatically execute when the value in the STORECODE control changes since there is no
“Run” button. To accomplish this, we need to bind the STORECODE control to the report.
12. Switch to the Parameters Tab
13. In the Thumbnails window on the right side of the screen, click the report object and drag it
from the Thumbnails window out on to the canvas and release the mouse button to drop it. The
canvas should now have a report2 object in a rectangle.
Unparalleled Functionality with HTML Composer
Page 24 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
14. Now drag from the center of combobox4 (the STORECODE control) to report2 and release the
mouse button. This creates a binding between combobox4 and the report2 object
15. Click the arrowhead on the line connecting combobox4 to report2 to display its Properties and
Settings dialog.
16. Note the Action is Execute which means that when the value in combobox4 changes, the report
will execute.
Unparalleled Functionality with HTML Composer
Page 25 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
17. Since we are only using 2 pages of the accordion control, we can delete page 3.
18. Switch to the Design tab, and with the accordion selected, right-click and select the “Select Next
Page” option from the context menu to open page 3.
19. Right-click on page 3 and select the “Remove Selected Page” option from the context menu.
Page 3 is deleted.
20. Click the Save icon on the toolbar to save your work
21. Let’s run the page
22. When the page displays, click the “Run” button on page 1 to get a report. Now click the “Get
Store Info” button and page 2 automatically opens displaying the store information for Montreal
Quebec.
23. In the next step, we will modify page 2 of the accordion by adding animation to the report
container.
24. Close the web browser and return to the HTML Composer
Part 7: Animate the Storeinfo Report
1. With the accordion selected, right-click and select the “Select next page” option to open page 2
if it is not already open.
2. Select the report container to display its Property Sheet.
3. Locate the Animation Properties property and click in the input area to display the ellipses
button
4. Click the ellipses button to display the Animation Properties dialog
5. This time we are going to add Size Animation, so check the checkbox to the left of the Size
Animator text to activate the controls for size animation.
Unparalleled Functionality with HTML Composer
Page 26 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
6. The effect we want is for the report to grow out from the top left to its normal size. To
accomplish this, we will set both the Width and Height for the From Size to 0 and leave the To
Size values alone since they are the current size of the report container.
7. We want this animation to start when we click the “Get Store Info” button on page 1 so from
the “Control to activate” dropdown select button3 since that is the name of that button.
8.
9.
10.
11.
Click the OK button to close the Animation Properties dialog
Click the Save icon on the toolbar to save your work.
Run the page to see the results
When the page displays, click the “Get Store Info” button and page 2 of the accordion will open,
and now the report will appear to grow out from the top left.
12. Close the web browser to return to the HTML Composer
13. For our next step we will add a Paging Control and a Search Control to the STATE control. These
two optional controls will help us with ease of use for our end-users since the list of states is
long and requires scrolling currently, and with a Search control, we can enter part of a state
name and have the control search for all hits
Part 8: Add a Paging Control and a Search Control
1. Switch to the Design tab if not already there
2. Select the accordion and right-click, then select the “Select previous page” option to open page
1
3. Select the panel object directly above the report container which is named panel2. You can tell
you are in the panel because the mouse pointer becomes two crossed arrows.
4. Right-click and select “Delete container only” to remove that panel object but leave the controls
and Run button in place.
Unparalleled Functionality with HTML Composer
Page 27 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
5. Now there is a second panel that we need to delete as well. It was automatically created when
we selected to auto chain the controls in the New Parameters dialog.
6. To select this second panel, move the mouse between any one of the labels and its
corresponding dropdown list so it will become two crossed arrows and click the mouse button.
7. Right-click and select “Delete Container Only” from the context menu to delete the second
panel which is named panel1, but leave the controls and Run button in place.
8. Select the dropdown under the STATE label
Unparalleled Functionality with HTML Composer
Page 28 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
9. Right-click and select “Add ‘Paging’ Control”
10. Select the Paging Control to display its properties in the Property sheet (the object name is
navigator1)
11. Locate the “Number or Range” property. This property is used to set how many values should
be shown per page and the value to start with. By default it is 1-50.
12. Double-click in the input area next to the “Number or Range” property to put it in edit mode
and enter 1-5. This means that there will be 5 values per page starting with the first value.
13. Before we run this page, let’s add the Search Control. Select the dropdown under the STATE
label again.
14. Right-click and select “Add ‘Search’ Control”
15. After adding the Search control, move and resize objects if necessary. Be careful to select the
desired object before moving it since the wrong box may be inadvertently selected.
16. Click the Save icon on the toolbar to save your work
17. Now run the page to see how the Paging control and Search control work.
Unparalleled Functionality with HTML Composer
Page 29 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
18. When the page displays, select United States from the COUNTRY dropdown so the STATE
control displays. Notice that the Search control and Paging control are hidden by default since
the control they are bound to is hidden by default.
19. Click the dropdown for STATE and notice that the first 5 state values display
20. Hit the “Next” button in the Paging control and it advances to items 6-10 which is the next 5
values. Click the STATE dropdown to see those values.
21. Select the text “6-10 of 38” in the Paging control’s text box and type “20-24” and hit enter. This
brings values 20-24 into the STATE dropdown.
22. Now let’s look at the Search control
23. In the Search control text box enter the letter “c” and click the magnifying glass. The STATE
dropdown is populated with all the state values that have the letter “c” in them. Also, notice
that the text box in the paging control updates to show that there are 5 such values.
24. To clear the search, blank out the text box in the Search control and hit the enter key.
25. The final thing we will show today is how to change the sort order for the values in a control
26. Close the web browser and return to the HTML Composer
Part 9: Changing the Sort Order in a Control
1. On the Parameters Tab, click the combobox1 control to display its Properties and Settings dialog
2. Toward the bottom of the dialog, you will see
3. These are the sorting options
4. To make the countries display in reverse alphabetical order, for example, just check the Sort
checkbox and click the Descending radio button for Sort order and close the dialog using the red
“X” in the top right corner
5. Now when you run the page, the COUNTRY dropdown list is in reverse alphabetical order
Unparalleled Functionality with HTML Composer
Page 30 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
Extra Credit Exercise
You have just completed creating a RIA page from scratch. What if you want to convert an existing page
to RIA? In this exercise, we will take a regular page and convert it to RIA and then add RIA specific things
to the page to enhance the user experience.
Introduction: Suppose you want to create a RIA that shows an image, a push button, when clicked,
animates the Sales Report window, and an accordion control that shows a Sales Graph on one page, and
report with controls to supply incoming parameter values on the Sales by Region page.
All the files stated below should be in a local project named RIA Parmschain. Expand the RIA Parmschain
project to start the exercise.
Files: modified_chaining_example.htm
ggsales.mas
ggsales.foc
productsreport.fex
Century Electronics.gif
Part 1: Create the Graph Component
Create the sales graph to be used as a target from a drill down report in the RIA.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Create a new procedure in Developer Studio:
Right-click the Procedures folder and select New/Procedure from the context menu.
The Add Procedure dialog box opens.
Enter graphbyproduct as the name for the new procedure in the File name field and click Open.
The Procedure Viewer opens.
Click and hold a component connector (yellow diamond) and select Advanced Graph.
Select the ggsales.mas Master File and click Open.
The Advanced Graph Assistant opens.
Select Pie from the Chart type subtab.
The available pie chart types appear.
Select the Pie as the type of Pie chart.
The Advanced Graph Assistant refreshes showing a sample pie chart.
Click the Data selection subtab.
Click and drag ST as the Pie slices and click and drag BUDUNITS as the Measures, in the Available
Fields area.
15. Select the Header ellipse button from the Chart Properties window and type By Product: and
double-click PRODUCT from the Field Tree in the Header window. The header appears as By
Product: <GGSALES.SALES01.PRODUCT>. Click Apply and OK to close the Header window.
Unparalleled Functionality with HTML Composer
Page 31 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
16. Select the Filters folder from the Available Fields area and create the following parameter:
WHERE PRODUCT EQUAL to Product Name.
17. Click the Chart editor subtab and select Quick chart from the Chart folder.
18. Type Budget Unit Sales by State in the Chart title field of the Quick chart properties window.
19. Select Left from the Legend position drop-down list.
20. Select RIA Ocean Rounded from the Apply Template dropdown.
21. Save and close the graph and Procedure Viewer.
Part 2: Convert the Existing HTML Page to RIA and Add Objects to the Page
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
Create a copy of the modified_chaining_example.htm,and rename it to ria_example.htm.
Open ria_example.htm in the HTML Composer.
Select DOCUMENT from the Properties window drop-down list.
The available properties for the document object appear.
Select Ocean Rounded from the RIA Theme drop-down list.
The RIA theme is applied to all components on the page and the RIA Components toolbar is
added to the HTML Composer.
Click the Save icon to save your work, and close the HTML Composer.
From the Procedures folder double-click productsreport.fex to open it in the Procedure Viewer,
and then double-click the Report component to open it in the Report Painter.
Click Options, Style tab, Style File Selection, and click the New icon next to Include StyleSheet file.
On the bottom, double-click ENRia Ocean Rounded Theme and then click Finish on the
StyleSheet Selection dialog.
On the Report Options dialog, click Apply and OK to apply the theme. This makes the report
have the same styling as the HTML Page and Graph.
Close the Report Painter and save the changes when prompted.
Close the Procedure Viewer, go back to the HTML Files folder and double-click ria_example.htm
to reopen it in the HTML Composer. Notice that the report preview now has the same theme as
the HTML page.
Move the report and form control down the page, as we will use those components later.
Select Image from the insert menu.
The cursor changes into a crosshair. Click and drag the crosshair to create the image object and
size, and select the Century Electronics.gif image from the Get source file dialog box.
Select Push button from the Components toolbar and drag it onto the Design canvas underneath
the image.
Change the button text by selecting the Push button on the Design tab and double-click in the
field next to Value in the Properties window. Tip: The button object appears as button1<DIV> in
the Properties window drop-down list.
Type Animate Sales Report in the Value property field and press Enter.
Unparalleled Functionality with HTML Composer
Page 32 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
20.
21.
22.
23.
Click the Animation Properties ellipse button from the Properties window.
The Animation Properties dialog box opens.
Select the Opacity Animator check box to enable the opacity settings.
Select blink as the Type, and leave the Control to activate as <Auto Start>. This indicates that
the blinking animation for the push button will start automatically in the RIA page.
24. Click OK to close the Animation Properties dialog box.
Part 3: Create and Animate a RIA Window Component
1.
2.
3.
4.
Select the Window icon from the RIA Components toolbar.
Left-click and drag the window onto the Design canvas.
Release the mouse and resize the object.
Rename the window by typing Sales Report in the Caption properties field of the Properties
window. Tip: The RIA window component appears as window1<DIV> in the Properties window
drop-down list.
5. Select the Report icon from the Components toolbar and drag it into the window object on the
Design tab, release the mouse, and resize the report object within the window component.
6. Double-click the report object and select ggsales.mas to open the Report Painter..
Create the sales report, with a drill down on the Product field, to be used in the RIA window:
7.
8.
9.
10.
11.
12.
13.
14.
15.
Insert CATEGORY, PRODUCT, REGION, ST as the By fields, hiding the ST field.
Insert DOLLARS as the Sum field.
Add Sales by: <GGSALES.SALES01.ST> in the Page Heading.
Click Options, Style tab, Style File Selection, and click the New icon next to Include StyleSheet file.
On the top, click ENRia Ocean Rounded Theme, OK, and then click Finish on the StyleSheet
Selection dialog.
On the Report Options dialog, click Apply and OK to apply the theme. This makes this report
have the same styling as the HTML Page , other Report, and Graph
Select the Product field, right-click and select Options to open the Field Properties dialog box.
Select the Drill Down tab to apply a drill down to the Product field column data, that executes a
procedure in a frame. Note: Select Column Data as the Active Object, Execute Procedure as the
Drill Down Type, select graphbyproduct.fex as the Procedure name (which we created in step 1
of this example), and enter iframe1 as the Target Frame location, which we will add later in the
HTML Composer.
Select Add from the With Parameters section of the Drill Down tab, and select PRODUCT as the
Parameter Name from the drop-down list. This is the parameter that we created in the graph.
Unparalleled Functionality with HTML Composer
Page 33 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
Leave Field as the Parameter value and select GGSALES.SALES01.PRODUCT from the drop-down
list.
Click OK to close the Drill Down Parameter dialog and OK to close the Field Properties dialog.
Close and save the report.
The drill down report appears in the RIA window component.
Select the report component and set the Auto fit property to true in the Property sheet
Select the RIA window component on the Design tab and click the Animation Properties ellipse
button from the Properties window. Tip: The RIA window component appears as
window1<DIV> in the Properties window drop-down list.
The Animation Properties dialog box opens.
Select the Location Animator check box to enable the location settings.
Select button1 from the Control to activate drop-down list. This indicates that clicking the Push
button will activate this window at run time.
Type the From Position Left value as 10. This indicates that the location of the window will start
the animation 10 pixels from the left position of the page when the window is animated.
Click OK to close the Animation Properties dialog box.
Part 4: Create a RIA Accordion Control Component
1. Select the Accordion Control icon from the RIA Components toolbar.
2. Left-click and drag the accordion control onto the Design canvas underneath the RIA window
component.
3. Release the mouse and resize the object.
4. Rename the selected page of the accordion by typing Sales Graph in the Selected Page Title
properties field of the Properties window. Tip: The RIA accordion control component appears as
accordion1<DIV> in the Properties window drop-down list.
5. Select the Frame icon from the Components toolbar and drag it into the accordion object on the
Design tab and release the mouse. Note: The frame component appears as iframe1<IFRAME> in
the Properties window drop-down list. This is the name that we assigned as the Target Frame
location for the drill down report that appears in the RIA window.
6. Select the frame component and set the Auto fit property to true in the Property sheet.
7. Right-click the accordion component and choose Select next page from the context menu.
8. The next page in the accordion control is selected.
9. Type Sales by Region in the Selected Page Title properties field of the Properties window.
10. Click the Save icon on the toolbar to save your work.
11. Scroll down the Design tab and select the existing form control.
12. Press and hold the Alt key from your keyboard, drag the selected form control onto the
accordion page, and release the mouse button then the Alt key.
13. Move the form control to the top of the accordion page.
Unparalleled Functionality with HTML Composer
Page 34 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
14. Click the Save icon on the toolbar to save your work.
15. Scroll down the Design tab and select the existing report.
16. Press and hold the Alt key from your keyboard, drag the selected report onto the accordion
page, and release the mouse button then the Alt key.
17. Now both the report and form control are added within the Sales by Region accordion page.
18. Resize the objects if necessary.
19. Remove any unused pages from the accordion control by selecting and removing pages from the
right-click context menu.
20. Save and run the RIA.
21. The following image shows the RIA at run time.
Unparalleled Functionality with HTML Composer
Page 35 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016
Appendix
This section explains the steps to configure the environment. These steps were not covered in the lab
because they are not pertinent to the areas for which this document was developed.
Configure National Language Support
1. Since our data contains NLS characters, for the Reporting Server change the code page from 437
to 137 using the Reporting Server Web Console. Leave the other settings as is.
2. For WebFOCUS, use the WebFOCUS Administration Console to change the code page to 137.
Unparalleled Functionality with HTML Composer
Page 36 of 36
Copyright © 2010 Information Builders, Inc.
2/8/2016