# Quick Start

A simple tutorial to help you get started with WebDesigner.

## Content

In tabular reports, the data is organized along the rows and columns of a Table data region. The data in the form of fields and entities is fetched from the data set added to the report.

This tutorial guides you through the steps to create a tabular report in ActiveReports WebDesigner.

After you complete this tutorial, you will have a report that looks similar to the following.

![An Example for Tabular Report](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/tabularreport-preview.png)

### Access the ActiveReports WebDesigner

Run the WebDesigner sample (WebDesigner\_MVC(Core)) that you can download from the following link:
[https://github.com/activereports/WebSamples20/tree/main/](https://github.com/activereports/WebSamples19/tree/main/)
The WebDesigner is opened in the browser and is ready to create your reports. By default, you have a blank RDLX Report.

### Bind Data to Report

1. Connect to a data source.
    1. Go to **Data** tab and click **Add** next to **Data Sources**.
    2. In the **Data Source Editor** dialog, fill-in the **Name** field as 'Customers'.
    3. Select **Provider** as 'JSON Provider'.
    4. Select **Type** as 'External'.
    5. Enter the following URL in **Path**: [https://demodata.mescius.io/northwind/api/v1/Customers](https://demodata.mescius.io/northwind/api/v1/Customers)
    6. Test the data source connection and click **Add**.
2. Add a dataset.
    1. Click **Add Data Set** next to the added data source.
    2. In the **New Data Set** dialog, fill-in a dataset name and enter the **Query**: `$.[*]`
    3. **Validate** the query to obtain the bound fields and select **OK** to add the dataset.

### Create Data-bound Table

![Create Table data region](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/data-bound-table.jpg)

1. Expand the dataset fields and enable **Select Fields...**
2. Select the required fields and drag and drop them onto the design area.

A table with its columns bound to the fields is created. The Header row above the Details row is automatically filled with labels.

Alternatively, you can first drag and drop the **Table** data region ![Table Toolbar Icon](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/toolbar-table.png) onto the design area of the report and then drag and drop fields onto the details row.

### Sort Table Data

Apply sort on any field in the table data in ascending or descending order. Let us sort our table data by the **customerId** field in descending order.

1. From the adorner on the right side of the table, select \<Details Group> and go to the **Sort Expressions** property.
    ![Textbox Control](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/details-group.png)
2. Select **Add Item**.
3. Click the radio button to display the fields and select the 'customerId' field.
    ![Sort Expression](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/sort-expression.png)

    >type=note
> **Note**: You can also enter a sort expression in the **Expression Editor**: **Data - Sort Expressions** dialog by selecting **Expression...**
4. Click descending ![Sort Descending Icon](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/descending.png) icon to sort the 'customerId field' in descending order. You can change the sort order to ascending by clicking the ascending ![Sort Ascending Icon](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/ascending.png) icon (default).

### Group Table Data

You can organize the table data in groups to add more meaning to the table. Let us group the table with respect to the country field, so that our table displays unique country values.

1. From the adorner on the right side of the Table data region, select \<Details Group>, and go to the **Properties** pane.
2. Next to the **Group Expressions** property, click **Add Item**.
3. Click the radio button to display the fields and select the 'country' field.
    ![Group Expressions in Table](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/table-group-expression.png)

### Add Report Title

1. Drag and drop a TextBox control ![Textbox Control](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/toolbar-textbox.png) above Table data region.
2. Click inside the text box and enter the text 'Customer Report'.

### Customize Appearance of Tabular Report

![An Example for Customized Tabular Report](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/tabularreport-design.png)

>type=note
> **Note**: You may need to resize and reposition the controls on the report to accommodate data, and for a cleaner look.

1. To customize the Page Header, set the **BACKGROUND - Color** property to '#f1f1f1'.
2. Select the text box containing the text 'Customer Report' and set the following properties.

    | **Property** | **Value** |
    | -------- | ----- |
    | TEXT - Color | #3da7a8 |
    | TEXT - Font Size | 16pt |
    | TEXT - Text Align | Left |
    | TEXT - Vertical Align | Middle |

<br>
3. To customize Header row of the table, set the following properties for all text boxes in the row.

    | **Property** | **Value** |
    | -------- | ----- |
    | BORDER - Width | 0.25pt |
    | BORDER - Style | Solid |
    | BORDER - Color | Gainsboro |
    | TEXT - Text Align | Left |
    | TEXT - Vertical Align | Middle |
4. Similarly, customize the text boxes in the Details row of the table.

### Preview and Save Report

1. Click **Preview** ![Preview Button](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/images/webdesigner/previewicon.png) to view the final output of your report.
2. Exit the preview mode by clicking **Back** on the left side of the designer.
3. Click **Save** to open the Save dialog box. Enter the report name and click **Save Report**.