How to Build a Balance Sheet in an Angular Report Designer
Tags: webdev, devops, javascript, tutorial
Published: 2024-05-28 20:48:04

---
canonical_url: https://developer.mescius.com/blogs/how-to-build-a-balance-sheet-in-an-angular-report-designer
description: Learn how to build a balance sheet in an Angular report designer. See more from ActiveReportsJS today.
---
**What You Will Need**
- ActiveReportsJS Report Designer
- NPM
- VisualStudio Code
- Angular

**Controls Referenced**
- [Angular Report Designer](https://developer.mescius.com/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Angular)

**Tutorial Concept**

Angular Balance Sheet - Using the ActiveReportsJS Angular report designer component, many different types of data can be visualized, including financial reports (such as balance sheets) in a web application.

---
Businesses utilize balance sheets, some quarterly, others annually, to provide a snapshot of their company’s financial position at that point in time. Presenting a summary of the company’s assets, liabilities, and equity, balance sheets are used to glean insights on the financial health and stability of the business and are used by creditors, investors, and stakeholders.

In the modern business landscape, it is important to be able to build and access reports, like a balance sheet, from anywhere, at any time, and ActiveReportsJS is there to help. With our Angular Report Designer and Viewer, we make it easy to build, modify, and view reports from any device at any time. In this article, we’ll show you how to design a balance sheet using our Angular Report Designer, which can then be viewed using our Angular Report Viewer.

In this article, we’ll be covering the following topics:

*   [Adding the Angular Report Designer to an Application](#Designer)
*   [Saving the Report Details](#Details)
*   [Adding a Data Source and Data Set to the Report](#Source)
*   [Designing the Balance Sheet and Binding Data to Controls](#Design)

If you’d like more information about Angular integration, you can check out our [documentation](https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Angular-Component "https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Angular-Component").

## <a id="Designer"></a>Adding the Angular Report Designer to an Application

The first thing that we’ll need to do is add the ActiveReportsJS Angular packages to our application. Inside the folder of the application, run the following command:

```
    npm i @grapecity/activereports-angular
```

After a moment of installation, you’ll have access to the ActiveReportsJS Angular library in your application. Next, we’ll need to ensure that the proper modules are loaded into the application and that we reference all of the required files.

Inside the **app.module.ts** file, import the following module:

```
    import { ActiveReportsModule } from '@grapecity/activereports-angular';
```

This will ensure we can access the Angular Report Designer in our markup. Also, do not forget to add it to your imports list:

```
    imports: [
      BrowserModule,
      ActiveReportsModule
    ]
```

Now, we can reference the Report Designer in our application; however, before implementing the designer, we’ll need to include the required CSS files.

For ActiveReportsJS, we need to import these files in the **styles.css** file of the application. The files must be loaded here, or the styles will not be applied to the control. Inside of this file, include the following imports:

```
    @import "@grapecity/activereports/styles/ar-js-ui.css";
    @import "@grapecity/activereports/styles/ar-js-designer.css";
```

Now that all required files have been imported, we can start working with the Report Designer in markup. To reference the Report Designer, include the following code in the **app.component.html** file:

```
    <div id="designer-host">
      <gc-activereports-designer></gc-activereports-designer>
    </div>

```
That’s all there really is to include the Angular Report Designer in your application. Note that we’re also including a div wrapped around the designer. This is so that we can use it to control the size. By default, the designer will fill whatever element it’s placed in, so we do this to control the size.

Inside the **app.component.css** file, we set the size using the following code:

```
    #designer-host {
      width: 100%
      height: 100%
    }

```
Now, when we run the application, we should see the following:

![Empty designer](//cdn.mescius.io/umb/media/hcfpqplz/empty_designer.png?rmode=max&width=737&height=397)

With that complete, we can add functionality to save the report, which we’ll cover in the next section.

## <a id="Details"></a>Saving the Report Details

With the Report Designer added to our application, we’ll next need to add the ability for users to save their reports. Thankfully, the ActiveReportsJS Report Designer features several built-in events that allow us to do so: the **onSave** and **onSaveAs** events.

In the **app.component.html** file, modify the markup of the report designer to match the following:

```
    <gc-activereports-designer [onSave]="onSaveReport" [onSaveAs]="onSaveAsReport"></gc-activereports-designer>
```

This will bind two methods, **onSave** and **onSaveAs**, to these two events. Now, inside the **app.component.ts** file, we’ll implement these methods so that they can be used when the events are fired:

```
    counter = 0;
    reportStorage = new Map();
    onSaveReport = (info: any) => {
      const reportId = info.id || `NewReport${++this.counter}`;
      this.reportStorage.set(reportId, info.definition);
      return Promise.resolve({displayName: reportId});
    }

    onSaveAsReport = (info: any) => {
      const reportId = `NewReport${++this.counter}`;
      this.reportStorage.set(reportId, info.definition);
      return Promise.resolve({id: reportId, displayName: reportId});
    }
```

Here, we first create a **Map()** that can be used to store the key-value pairs used by the report. Then, passing the information of the report as an argument, we map the data from the report to the map, and we return a promise with the report information included.

Note that this is using the in-memory reports storage. When implementing this live, you’ll most likely want to pass the report definition, which is a JSON object, to your backend to be stored. 

## <a id="Source"></a>Adding a Data Source and Data Set to the Report

With the designer implemented and save functionality included, it’s time to get to work building out the balance sheet. However, before we start including controls in the report, we will need to get some data to display in the controls.

To bind data to a report, we will first need to add a **Data Source**. The data source is where we’ll be retrieving the data from.

To add a data source, open up the **Data Panel** and click the **Add** button in the data source panel:

![Add data](//cdn.mescius.io/umb/media/1jubq22t/add_data.png)

This will bring up the data source wizard:

![Data Source Wizard](//cdn.mescius.io/umb/media/ypueygmi/data_source_wizard.png)

ActiveReportsJS supports two different ways of data binding (remote and embedded data binding), as well as two different data types (JSON and CSV data types). For the purposes of this demonstration, we'll use embedded JSON data as our data source. 

![Data Source Complete](//cdn.mescius.io/umb/media/mxype2in/data_source_complete.png)

Now, we have a source from which we can pull the data. However, we need to create a data set that can be used to hold that data, allowing us to reference it in the report. With the source added, we’ll need to click on the **Add** button next to our data source to bring up the data set creation wizard:

![Data Set Wizard](//cdn.mescius.io/umb/media/nwtftooi/data_set_wizard.png)

This is where we can set up the actual data that we’re pulling into the report. Note that if you’re using remote data, there will be some additional options for parameters, and so on, that you can pass to your backend. Since we’re embedding our data, we have fewer options here.

To properly load the data in, we’ll need to set the **JSON Path** field. This acts like a filter of sorts, allowing you to control which data is retrieved when building the data set. For our scenario, we want all of the data available, so we use the string **$.***, which signifies to the Report Designer that we want to pull in all of the available data.

Before we save the data source, we need to make sure that we can validate the data. This just checks that the data set can actually pull data from the source when building the report. If everything is as expected, you should see the **Database Fields** array populated with values:

![Data Set Complete](//cdn.mescius.io/umb/media/ic2egqgs/data_set_complete.png)

With that complete, we have data that we can connect to controls. In the next section, we’ll build out the balance sheet and add data to the various components used.

## <a id="Design"></a>Designing the Balance Sheet and Binding Data to Controls

With our data set up, we can now build out the balance sheet in the report designer. The first thing we’re going to do is set up a page header to identify what the report is. At the top of the designer, click on the **Section** tab and select **Add Header.** This will add a header section to the top of this report.

Next, we’re going to drag a **TextBox** and an **Image** control into the page header. For the TextBox, we will set the text as **Balance Sheet,** and we will embed an image into the report, which we’ll use within the Image control.

To embed an image, select the Image control, and then under the **Action** section of the Properties Panel, open the **Image** dropdown, select the **Embedded** option, and click the **Load** button to bring up the file explorer and select the image that you want to upload.

After adding these controls (with a little bit of styling), the page header should look something like this:

![Page Header](//cdn.mescius.io/umb/media/aaznpthg/page_header.png?rmode=max&width=751&height=140)

Now, we will add some controls to display the company’s total assets and total liabilities. Drag and drop a table control from the control toolbox onto the report. Next, we will delete the header and footer rows. This is done by right-clicking on a cell in the row that we want to remove, hovering over the **Row**option, and then selecting **Delete Row**. We’re also going to delete a column, so follow the same steps above, except select **Column** and **Delete Column**.

Then, copy and paste this table so that we have two. For the cells in the first table, we’re going to set their values as **Total Assets** and **{TotalAssets}**, and **Total Liabilities** and **{TotalLiabilities}**.

Finally, select the second cell in each table, navigate to the **Format** property in the Properties Panel, and set it equal to **Currency**; this will ensure that our monetary values display in a currency format.

After some additional styling, our report now appears as shown below:

![Report Totals](//cdn.mescius.io/umb/media/4ahjwal5/report_totals.png?rmode=max&width=758&height=205)

With that complete, it’s time to start adding additional tables to show all of the various assets and liabilities of the company. For this, we’re going to have six tables covering the following areas:

*   Current Assets
*   Current Liabilities
*   Fixed Assets
*   Long-Term Liabilities
*   Other Assets
*   Shareholders Equity

To make this easier, we will create a table template, which we can then duplicate to fill out with the rest of our data.

Drag and drop another table control onto the report, this time keeping the header and footer rows but removing one of the columns so that we only have two.

Then, we’re going to select both cells in the header row and merge them using the context menu. Finally, we’ll also add some styling so that the header and footer rows stand out. We’re going to set the background of the header row to grey, and then we'll also set the text color of the footer row to grey. Finally, in the second column, we will again set the format to 'Currency.'

When complete, the table should look something like this:

![Empty table](//cdn.mescius.io/umb/media/ensn1zl0/empty_table.png)

Now, we’re going to duplicate this table for each table of data that we will implement. In the case of this balance sheet, we will have six tables: **Current Assets**, **Current Liabilities**, **Fixed Assets**, **Long-Term Liabilities**, **Other Assets**, and **Shareholders Equity**. See the tables below to view how each are set up:


![Table 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbdf3bhf56rip8nnngb9.png)


![Table 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3og97zesnuko4y1ygi7i.png)


![Table 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz0lam4zl8mg6k1d018m.png)


![Table 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jqhofyci8p8nibgkdcg.png)


![Table 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uv9ppa0xl5gpvu99tlg3.png)


![Table 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wzmtn6ahm20cv4fwvqh.png)

With the tables set up, the report is complete! If you preview the report, it should look similar to this:

![Balance Sheet Complete](//cdn.mescius.io/umb/media/0rmcz1yb/balance_sheet_complete.png)

## Conclusion

With that, we’ve come to the end of the article. I hope that this has shown you how easy it is to use ActiveReportsJS to build out your company’s balance sheet. Now, your employees can access the sheet from anywhere using the ActiveReportsJS Angular Report Viewer. If you use a remote data source that receives updates, this report will display the most recent changes to the balance sheet.

Happy coding!