#### Example of applying web actions

In this section, a sample report is built for guiding you through the process of applying web actions step by step.

##### Creating the sample report

1. Design a standard banded report based on the WorldWideSales query in the SampleReports.cat catalog (make sure to remove the report title in the New Report Set dialog), which shows the following detail fields: Country, Product Type Name, Product Name, Unit Price, Quantity, Discount, and the formula Total ( `@"Unit Price" * @Quantity - @"Unit Price" * @Quantity * @Discount/100`), applies the filter "COUNTRY = China AND PRODUCT TYPE NAME = Decaf", and uses the Classic style.
2. Insert a crosstab into the report and place it below the banded object. The crosstab shares the same dataset with the banded object, comprises the column field: Product Type Name, row field: Category, and aggregate field: Total (aggregate function: Sum) and applies the Classic style.
3. Click View > Page Header on the menu bar to have this panel visible, then set its Height property to 1.0 in the Report Inspector to hold all the web controls that will be inserted in the report later.
4. Save the report set.

The following text details how to set web actions and use them.

##### Applying web actions without parameters

First, we want to allow the report user to click a button in the report to show the Search dialog of JReport Web. To achieve this:

1. Select the page header panel and click Insert > Web Controls > Button to insert a Button web control in it.
2. Right-click the button, and select Display Type from the shortcut menu.
3. In the Web Behaviors box of the Display Type dialog, specify Event to Click, then click in the Actions column and choose user_showSearchDialog from the Web Action List dialog to be web action of the button, then confirm the settings.
4. Go to the Report Inspector and et the Text property of this button to Search.
5. Save the report set.

##### Applying web actions with parameters

Now we want to allow the report user to rotate the crosstab in the report and to change the report style.

1. Insert another Button web control in the page header panel of the report and place it next to the Search button.
2. Specify the Click event and user_rotateCrosstab action to the button as explained above, then set &CTCrossTab to be the value of the action parameter instanceName (CTCrossTab is the name of the crosstab we can see in the report structure panel of the Report Inspector, and here the symbol & shall be prefixed to the crosstab name).
3. In the Report Inspector, edit the Text property of the button to Rotate Crosstab.
4. Insert a Label object in the page header panel and place it below the two buttons, then resize the label and edit its text to "Change Report Style To:".
5. Insert a Drop-down List web control next to the label.
6. Right-click the drop-down list and click Display Type shortcut menu.
7. In the Display Type dialog, add these items and corresponding values to the drop-down list (to add an item line, click ):

   Item Label | Value
   --- | ---
   Classic | Classic
   Classic Blue | ClassicBlue
   Classic Green | ClassicGreen
   Default | Default
   None | None

   Then, in the Web Behaviors box of the dialog, set Event to Data Change, Action to user_changeStyleTo, and specify the value for the web action parameter styleName to this.value. See illustration.

8. Save the report set.

##### Applying web actions with the Builder Wizard

The actions Filter, Sort and Parameter have a Builder Wizard. Now we would like to use the wizard to allow the report user to sort records in the banded object by one of the specified fields.

1. Insert another Drop-down List web control into the page header panel, and place it below the above web controls. The drop-down list is displayed as MultiValueContainer1 in the Report Inspector.
2. Right-click the drop-down list and click Display Type shortcut menu.
3. In the Display Type dialog, add these items and corresponding values to the drop-down list:

   Item Label | Value
   --- | ---
   Unit Price | UNIT PRICE
   Quantity | QUANTITY

4. Insert a List web control next to the drop-down list. The list is displayed as MultiValueContainer2 in the Report Inspector.
5. In the Display Type dialog for this list, add these items and corresponding values:

   Item Label | Value
   --- | ---
   Ascending | Ascending
   Descending | Descending

6. Insert a Button web control and place it next to the list, then right-click the button and click Display Type on the shortcut menu.
7. In the Display Type dialog, specify Event to Click and Action to Sort, then in the Sort - Web Action Builder dialog, select MultiValueContainer1 from the Sort on column, and MultiValueContainer2 from the Sort Value column. Confirm the settings, and go to the Report Inspector to modify the Text property of the button to Sort.
8. Save the report set.

##### Previewing the report set in DHTML and applying the web actions

1. Click View > Preview As > DHTML to preview this report set in DHTML format. See the report.

2. Click the Search button and the Search dialog will then be displayed.
3. Click the Rotate Crosstab button, the columns and rows of the crosstab will then be rotated. See the result.

4. Select a style from the Change Report Style To drop-down list, for example, select Classic Green, and the report style will change to the selected one. It affects both the banded object and the crosstab. See the result.

   Note: You may notice that the value of the drop-down list will not change to the selected one after the report style has been updated. To update the drop-down list value to the current report style, you should append another action user_changeCompProperty to the event Data Change to the drop-down list.

5. Select a field name from the third drop-down list and then the sorting direction from the list. Here we select Unit Price and Descending respectively, then click the Sort button.

   The records in the banded object will now be sorted based on the Unit Price values descendingly. See the result.