HTML Composer

1. HTML Composer Inside Look at Chaining Barry Solomon Information Builders, Inc.

2. 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 notadd 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 • Create a new procedure. • Name the procedure “chaining”. • We will step through the building of the chaining report in the following slides. • 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. • 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. 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. Controlling the relationship of chaining controls

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(){ varcntyval ='ENGLAND'; IbComposer_setCurrentSelection('listbox1', cntyval, true); } • The varcntyval 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?id=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