How to Build a Balance Sheet in an Angular Report Designer

What You Will Need

• ActiveReportsJS Report Designer
• NPM
• VisualStudio Code
• Angular

Controls Referenced

• Angular Report Designer

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
• Saving the Report Details
• Adding a Data Source and Data Set to the Report
• Designing the Balance Sheet and Binding Data to Controls

If you’d like more information about Angular integration, you can check out our documentation.

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:

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

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. 

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:

This will bring up the data source wizard:

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. 

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:

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:

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.

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:

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 Rowoption, 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:

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:

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:

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

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!