Procedure for Layout Tool Demo s1

Jazz Up Your HTML Pages

Larry Braun and David Glick Information Builders Information Builders Summit 2015 User Conference May 31 – June 4, 2015

Author: Larry Braun and David Glick Company: Information Builders Presentation Title: Jazz Up Your HTML Pages Presentation Abstract: In this lab, attendees will use some the advanced features of the HTML Canvas of WebFOCUS App Studio to enhance an existing working HTML launch page. We'll explore animations, the JavaScript editor, integrated CSS using the CSS editor, JQuery, and our own proprietary functions. This lab builds upon the page created in "Unlocking the Chains of the HTML Canvas." Though is not necessary to attend that lab before coming to this one, this lab assumes the attendee is somewhat familiar with the HTML Canvas.

Finished Page:

Before “Run”

Step 1 – Modify the layout the HTML launch page

Instructions:

1. Start WebFOCUS App Studio (if not already started)

3. When prompted for credentials, enter: a. Userid – jazzup b. Password – jazzup

4. Expand the “Jazz Up HTML Pages” folder, and double-click the “launch.htm” file to open it

Jazz Up Your HTML Pages Page 5 of 23 5/4/2018 Copyright © 2015 Information Builders 6. Using the “Components” tab on the ribbon, “Containers” group, select “Panel”, and draw a panel inside the “Location Filters” panel where the “City” label and “city_list” objects were first positioned

Jazz Up Your HTML Pages Page 6 of 23 5/4/2018 Copyright © 2015 Information Builders 7. With the panel selected on the canvas, use the Properties panel to set the following: a. Unique Identifier to “city_panel” b. Left to “80px” c. Top to “345px” d. Width to “250px” e. Height to “145px” f. Border color to “ffffff (white)” g. Border style to “none” h. Border width to “thin”

Jazz Up Your HTML Pages Page 7 of 23 5/4/2018 Copyright © 2015 Information Builders 8. Using the CTRL key, multiselect the “city_list” control, and the “City” label 9. Now, hold the ALT key, and left-click the multiselected object, hold the mouse button down and drag them into the “city_panel”, then release the mouse button and release the ALT key

Jazz Up Your HTML Pages Page 8 of 23 5/4/2018 Copyright © 2015 Information Builders 10. Select the “City” label on the canvas and use the Properties panel to set: a. Left to “0px” b. Top to “0px” 11. Select the “city_list” control on the canvas and use the Properties panel to set: a. Left to “0px” b. Top to “27px”

If you need to catch up at this point 1. Close the HTML Document you are working on (saving is not necessary) 2. On the “Environments Tree”, double-click on “x_with_city_panel” Continue the lab using “x_with_city_panel”

Step 2 – Create the City Panel animations

1. Select the “State” label on the canvas, and note its “Top” setting in the Properties panel, which is 190px

Jazz Up Your HTML Pages Page 10 of 23 5/4/2018 Copyright © 2015 Information Builders 2. This is the location where we want the “city_panel” to move to if the user selects “Southeast” as the region since that makes the “State” listbox disappear 3. Using the “Tasks & Animations” panel, “jQuery Animations” section: a. Click the “New” button next to “List of” to create a new animation

b. Double-click “Animation1” to put it in edit mode and enter “city_up” for the name of this animation. Then hit the Enter key to get out of edit mode

Jazz Up Your HTML Pages Page 11 of 23 5/4/2018 Copyright © 2015 Information Builders c. From the “All targets” list, select “city_panel” and click the black arrow to move it to the “Selected targets” list

d. For “Visibility” select the “Show” radio button

e. In the “Additional Properties” section, from the “Name” dropdown select “Top”, and then for the “End value” enter “190”. Then click off the “End value” input area to generate the syntax

f. Change the “Duration” to “Fast”

4. Using the “Tasks & Animations” panel, “jQuery Animations” section: a. Click the “New” button next to “List of” to create a new animation

Jazz Up Your HTML Pages Page 12 of 23 5/4/2018 Copyright © 2015 Information Builders b. Double-click “Animation1” to put it in edit mode and enter “city_down” for the name of this animation. Then hit the Enter key to get out of edit mode

c. From the “All targets” list, select “city_panel” and click the black arrow to move it to the “Selected targets” list

d. For “Visibility” select the “Show” radio button

e. In the “Additional Properties” section, from the “Location setting” toolbar, click the first button

to get the values for the “city_panel” object, which is the selected target

f. Change the “Duration” to “Fast”

1. Since we want the “city_panel” to move up when the region value is “Southeast”, we need a JavaScript function to check the value and run the appropriate animation 2. Switch to the “Embedded JavaScript/CSS” view tab

3. On the Canvas, enter the following JavaScript code: function check_region(){ var current_region = IbComposer_getCurrentSelection('region_list'); if(current_region == 'Southeast'){ IbComposer_runAnimation('city_up'); } else{ IbComposer_runAnimation('city_down'); } }

4. Using the “Tasks & Animations” panel, “Tasks” section: a. Click the “New” button next to “List of” to create a new task

b. Select the “region_list” on the canvas, which will list its name in the “Trigger identifier” list, and check the box next to “region_list”

d. For “Function name”, type in “check_region”

5. Use the Save button on the Quick Access Toolbar to save your work

If you need to catch up at this point 1. Close the HTML Document you are working on (saving is not necessary) 2. On the “Environments Tree”, double-click on “x_city_moves” Continue the lab using “x_city_moves”

Step 4 – Add Button and Animations to move and hide filters

1. Select “panel1” on the canvas and move it down about 2 inches

“Button” and draw a button above the panel1 object

3. Using the Properties panel, for the Button object set: a. Unique Identifier to “filter_panel_up” b. Name to “filter_panel_up” c. Value to “Retrieve Filter Panel” d. Left to “450px” e. Top to “0px” f. Width to “245px” g. Height to “35px” h. Display to “None” (in the Layout family of properties)

Jazz Up Your HTML Pages Page 16 of 23 5/4/2018 Copyright © 2015 Information Builders 4. Select “Panel1” on the canvas and change it’s “Top” value in the Properties panel back to “0px” which is what it was before we moved it down to make room for the button.

Step 5 – Create necessary Animations

1. Using the “Tasks & Animations” panel, “jQuery Animations” section, define the following animations: a. Name – “show_button”

Jazz Up Your HTML Pages Page 17 of 23 5/4/2018 Copyright © 2015 Information Builders a.i. Selected Target – “filter_up_panel” a.ii. Visibility – “Show” a.iii. Effect Type – “Slide: slide in/out” a.iv. Option – “direction” a.v. Value – “down” (** select it from the dropdown or it does not generate syntax) a.vi. Duration – “fast” b. Name – “hide_button” b.i. Selected Target – “filter_up_panel” b.ii. Visibility – “Hide” b.iii. Effect Type – “Slide: slide in/out” b.iv. Option – “Direction” b.v. Value – “up” b.vi. Duration – “fast” c. Name – “show_filters” c.i. Selected Target – “panel1” c.ii. Visibility – “Show” c.iii. Effect Type – “Slide: slide in/out c.iv. Option – “Direction” c.v. Value – “up” c.vi. Duration – “fast” d. Name – “hide_filters” d.i. Selected Target – “panel1” d.ii. Visibility – “Hide” d.iii. Effect Type – “Slide: slide in/out” d.iv. Option – “Direction” d.v. Value – “up” d.vi. Duration – “fast” e. Name – “move_up” e.i. Selected Target – “windowPanel1” e.ii. Visibility – “No Change” e.iii. In the “Additional Properties” area, click the second button from the left in the “Location setting” toolbar

e.iv. This puts a placeholder over the “Selected Target” object, windowPanel1 in this case

Jazz Up Your HTML Pages Page 18 of 23 5/4/2018 Copyright © 2015 Information Builders e.v. Left-click the placeholder and drag it up (or use the up arrow on your keyboard) toward the top to about an inch from the top of the canvas and then release the mouse button. This is the location for which we want the window to move e.vi. Now, click the third button from the left in the “Location setting” toolbar to capture the ending positions values

e.vii. Duration – “fast” f. Name – “move_down” f.i. Selected Target – “windowPanel1” f.ii. Visibility – “No Change” f.iii. In the “Additional Properties” section, from the “Location setting” toolbar, click the first button

to get the values for the “windowPanel1” object, which is the selected target

Step 6 – Attach Animations to Tasks

1. In the “Tasks & Animations” panel, “Tasks” section, select “task2”

2. From the “Requests/Actions”, “Requests selections” dropdown, select “Run Animation -> hide_filters”

3. From the “Requests/Actions”, “Requests selections” dropdown, select “Run Animation -> “show_button”, and then “move_up”

Jazz Up Your HTML Pages Page 20 of 23 5/4/2018 Copyright © 2015 Information Builders 4. Using the “Tasks & Animations” panel, “Tasks” section: a. Click the “New” button next to “List of” to create a new task

b. Check the box next to “filter_panel_up” in the “Trigger identifier” list

5. From the “Requests/Actions”, “Requests selections” dropdown, select “Run Animation -> “hide_button”, and then “show_filters”, and then “move_down” 6. Use the Save button on the Quick Access Toolbar to save your work

If you need to catch up at this point 1. Close the HTML Document you are working on (saving is not necessary) 2. On the “Environments Tree”, double-click on “x_animation_done” Continue the lab using “x_animation_done”

Step 7 – Create jQuery Tool Tips

1. Switch to the “Embedded JavaScript/CSS” view tab

function onInitialUpdate(){ $( document ).tooltip(); }

This will invoke jQuery tool tips which can be styled, unlike general HTML tool tips

3. While on the “Embedded JavaScript/CSS” view tab, use the “Settings” panel to change to “Internal CSS” by clicking that radio button

4. On the Canvas, enter the following CSS code:

.ui-tooltip{ background:black; color:white; border-radius:15px; }

5. For each of the following objects in the table below, enter “Title” text in the Properties panel for the object:

Label Title Text Region Select only one Region State Select one or more States City Select one or more Cities From Date Use Calendar icon to select a Date To Date Use Calendar icon to select a Date Report Heading Enter Report Heading Text

6. Use the Save button on the Quick Access Toolbar to save your work 7. Run 8. Test the HTML page

If you need to catch up at this point 1. Close the HTML Document you are working on (saving is not necessary) 2. On the “Environments Tree”, double-click on “x_launch_complete” 3. Run “x_launch_complete”

Congratulations! You’re done!