How to dynamically refresh the field list based on the selected OLAP cube in Angular Pivot Table?

Introduction

When creating a simple pivot table with multiple OLAP data sources, there may be instances where you need to dynamically refresh the pivot table field list based on the selected cube. This functionality can improve the user experience and offer more dynamic data exploration within your application. In this article, we will guide you through the process of updating the field list for a chosen cube in the Angular Pivot Table.

Step-by-step implementation

1. Create a dropdown for cube selection

First, you need to create a DropDownList component that will allow you to select a different OLAP cube. Use the following HTML select element to initialize the DropDownList component in your template file (i.e., app.component.html).

[app.component.html]

  <select id="cubeddl" name="ddl-view-mode">
    <option value="Adventure Works" selected>Adventure Works</option>
    <option value="Channel Sales">Channel Sales</option>
  </select>

2. Refresh the field list based on the selected OLAP cube from the dropdown.

In your TypeScript component file (i.e., app.component.ts), you will need to configure the DropDownList component and define the logic for refreshing the field list whenever a new cube is selected.

import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { PivotView } from '@syncfusion/ej2-pivotview';
import { ViewChild } from '@angular/core';

export class AppComponent {
    public cubeDropDown: DropDownList;
    public observable = new Observable();

    @ViewChild('pivotview')
    public pivotObj: PivotView;

    onChange(args: ChangeEventArgs): void {
        // Clear the previous field list
        this.pivotObj.olapEngineModule.fieldList = {};
        this.pivotObj.olapEngineModule.fieldListData = undefined;

        // Reset the dataSourceSettings properties
        this.pivotObj.setProperties({
            dataSourceSettings: {
                rows: [],
                columns: [],
                values: []
                filters: [],
                filterSettings: [],
                sortSettings: [],
                drilledMembers: [],
                calculatedFieldSettings: [],
                formatSettings: [],
            }
        }, true);

        // Set the selected cube
        this.pivotObj.dataSourceSettings.cube = args.value as any;
    }
  
    // Initialization code for Cube DropdownList
    ngOnInit(): void {
        this.cubeDropDown = new DropDownList({
            placeholder: 'Cubes',
            floatLabelType: 'Auto',
            change: this.onChange.bind(this),
        });
		// Render initialized DropDownList
        this.cubeDropDown.appendTo('#cubeddl');
    }
}

The following steps explain the above code snippet:

1. The change event is triggered whenever a new cube is selected from the drop-down list. Within the onChange method of this event, we’ve cleared the existing field list by setting this.pivotObj.olapEngineModule.fieldList to an empty object. Similarly, we’ve set this.pivotObj.olapEngineModule.fieldListData to undefined.

2. Afterward, we reset the dataSourceSettings of the pivot table to empty arrays for rows, columns, values, and other configurations.

3. Finally, the cube property of the dataSourceSettings in the pivot table is updated based on the selected OLAP cube from the DropDownList

The following GIF image, which portrays the results of the above-mentioned snippets,

GIF

For a practical demonstration, refer to the sample of stackblitz

Conclusion

I hope you enjoyed learning how to dynamically refresh the field list based on the selected OLAP cube in Angular Pivot Table.
You can refer to our Angular Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!