1

Module 2 Workshop Part 2: Bonus

Purpose: Expand the basic Active Report from the previous section to add functionality that enhances the end user experience Studio: Package: Report Type: Report Studio Go Sales (query) Builds off of the output of Module 2 Workshop 1

Task 1. Build the Show/Hide Sidebar Buttons The purpose of this section is to adjust the report layout to accommodate the new functionality and build the buttons that will control showing or hiding the Region radio buttons.

1. 2.

Open Module 2 Workshop 1 saved report Click on the Deck icon above ChartDeck and ListDeck to hide the Default Cards From the Toolbox tab, drag a Table into the center Table Cell of ControlTable and drop it in-front of ListDeck so that it is placed above ListDeck on the canvas insert a Table with 2 columns, 1 row and set the following properties: Name: HideExpandTable Select the left Table Cell of HideExpandTable and set the following properties: Horizontal Alignment: Center Vertical Alignment: Top

3.

4.

5.

Select the right Table Cell of HideExpandTable and set the following properties: Horizontal Alignment: Center Vertical Alignment: Middle Insert a Block into the left Table Cell of HideExpandTable - set the Name to ShowHideButtonBlock and the Padding to the following:

6.

7.

Insert a Deck into ShowHideButtonBlock and set the following properties: Default Card: Yes Name: ShowHideButtonDeck

8.

Click on the Deck icon to hide the Default Card

above ShowHideButtonDeck

9.

Click on the Deck Cards Definition icon for ShowHideButtonDeck and edit the list so that there are two Cards named Show and Hide click OK

10. Drag a Button onto the Show Card and set the following properties: Label: Hide Sidebar Name: HideButton 11. Navigate to the Hide Card in the ShowHideButtonDeck - drag a Button onto the Hide Card and set the following properties: Label: Show Sidebar Name: ShowButton 12. On the Active Report Variables tab click Create a New Variable with the following properties: Name: varShow Default Variable Value: Hide 13. Select the Interactive Behavior icon beside ShowHideButtonDeck double click on the Container Select area create the following condition and then click OK: Data Item: Label Operator: in Active Report Variable: varShow 14. Create another new Container Select condition for ShowHideButtonDeck with the following and then click OK: Item: Empty Variable Operator: in

Active Report Variable: varYear 15. At the bottom of the Container Select dialog box, click NOT with the condition created in Step 13 selected and then click OK; the final condition should be: (Label in varShow) AND (NOT(varYear is empty)) Click OK 16. On the Show Card of ShowHideButtonDeck select the Interactive Behavior icon beside HideButton double-click on the Set Variable Values area and change varShow to be set to Hide by using the Type in a value option available in the Value Drop-Down List beside varShow 17. On the Hide Card of ShowHideButtonDeck select the Interactive Behavior icon beside ShowButton double-click on the Set Variable Values area and change varShow to be set to Show by using the Type in a value option available in the Value Drop-Down List beside varShow 18. The report layout is shown below. When the report is run, after a Year is selected the Show Sidebar button is rendered above the list. When it is clicked, it changes into the Hide Sidebar button but nothing else happens. If Choose a Year is chosen from the drop-down menu, all the content including the new buttons should disappear.

Task 2. Hide / Show the Region Buttons The purpose of this section is to have the Region buttons respond to the Hide Sidebar and Show Sidebar buttons. 1. Drag a Deck into the right Table Cell of HideExpandTable and set the following properties: Default Card: Yes Name: RegionButtonDeck

2.

Click on the Deck icon hide the Default Card

above RegionButtonDeck to

3.

Click on the Deck Cards Definition icon for RegionButtonDeck and edit the list so that there is a single Card named Show click OK Drag a Block from the Toolbox onto the Show Card of RegionButtonDeck and set the following properties: Border: Solid line, 1.5pt, Black, All edges Background Color: Silver

4.

Name: RegionButtonBlock Padding:

Margin:

5.

Drag RegionButtons into the silver portion of RegionButtonBlock

6.

Select the Interactive Behavior icon beside RegionButtonDeck double click on the Container Select area create the following condition and then click OK: Data Item: Label Operator: in Active Report Variable: varShow Create another new Container Select condition for RegionButtonDeck with the following and then click OK: Item: Empty Variable Operator: in Active Report Variable: varYear At the bottom of the Container Select dialog box, click NOT with the condition created in Step 7 selected and then click OK the final condition should be: (Label in varShow) AND (NOT(varYear is empty)) Click OK The report layout is shown below. When the report is run, the Show Sidebar and Hide Sidebar buttons should interact properly with the Region buttons. If no Year is chosen, the Region buttons should be hidden.

7.

8.

9.

Task 3. Format the List and Enable Resizing The purpose of this section is to correct the layout of the report and have the List dynamically resize as the Region buttons are shown or hidden. 1. Select the center Table Cell of ControlTable and change the Width to 600px Select the rightmost Table Cell of ControlTable (where RegionButtons used to be) and delete the column Select HideExpandTable and change the Width to 550px Select ListDeck and drag the entire Data Deck into the left column of HideExpandTable directly below ShowHideButtonBlock Change the Width of ListDeck to 100% Change the Width of RetailerList to 100% Select the Quantity List Column Title and set the Width to 30%

2.

3. 4.

5. 6. 7.

8.

Select the Gross Profit List Column Title and set the Width to 30% The report layout is shown below. When the report is run, the Show Sidebar and Hide Sidebar buttons should control whether or not the Region buttons are visible. As the visibility of the Region buttons changes, the size of the List should dynamically adjust.

9.