|  | 
| 1 |  | -# Save and load report through the toolbar in angular pivotview component | 
| 2 |  | -A quick-start project that demonstrates how to save and load reports in the Syncfusion Angular Pivotview component using the toolbar. | 
|  | 1 | +# Export and import reports as JSON through custom toolbar options (Angular Pivot Table) | 
| 3 | 2 | 
 | 
| 4 |  | -## Project prerequisites | 
|  | 3 | +The Syncfusion Angular Pivot Table allows you to persist and restore report settings (also referred to as dataSourceSettings). In this sample, two custom toolbar actions are provided: | 
|  | 4 | +- **Save**: Exports the current Pivot Table configuration as a JSON file (for example, pivot.json). | 
|  | 5 | +- **Open**: Imports a previously saved JSON file and applies it to the Pivot Table. | 
| 5 | 6 | 
 | 
| 6 |  | -Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project. | 
|  | 7 | +These actions help users back up, share, or reload their exact Pivot Table layout, including rows, columns, values, filters, sorting, formatting, and more. | 
| 7 | 8 | 
 | 
| 8 |  | -## How to run this application? | 
|  | 9 | +## ⚙️ How it works | 
|  | 10 | +This sample uses the **toolbarTemplate** property of the Pivot Table to render two custom controls in the toolbar: | 
|  | 11 | +- A Save button (anchor element) that serializes the current report using getPersistData, converts it to a downloadable file, and triggers a download in the browser. | 
|  | 12 | +- An Open input (file element) that reads a selected JSON file using the FileReader API and then assigns the parsed content back to the component’s dataSourceSettings to instantly restore the report. | 
| 9 | 13 | 
 | 
| 10 |  | -To run this application, you need to clone the [`save-and-load-report-through-the-toolbar-in-angular-pivotview-component`](https://github.com/SyncfusionExamples/save-and-load-report-through-the-toolbar-in-angular-pivotview-component) repository and then open it in Visual Studio Code. Now, simply install all the necessary angular packages into your current project using the `npm install` command and run your project using the `ng serve` command. | 
|  | 14 | +Key APIs and references used: | 
|  | 15 | +- [`dataSourceSettings`](https://ej2.syncfusion.com/angular/documentation/api/pivotview/#datasourcesettings) | 
|  | 16 | +- [`toolbarTemplate`](https://ej2.syncfusion.com/angular/documentation/api/pivotview/#toolbartemplate) | 
|  | 17 | +- [`getPersistData`](https://ej2.syncfusion.com/angular/documentation/api/pivotview/#getpersistdata) | 
|  | 18 | +- [`change event (MDN)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) | 
|  | 19 | + | 
|  | 20 | +## 🛠 Prerequisites | 
|  | 21 | +- Node.js (LTS recommended) | 
|  | 22 | +- Angular CLI (to run locally with ng serve) | 
|  | 23 | +- Visual Studio Code (or any preferred editor) | 
|  | 24 | + | 
|  | 25 | +## 📦 Installation and Running the Sample | 
|  | 26 | +1. Clone this repository: | 
|  | 27 | +   - https://github.com/SyncfusionExamples/save-and-load-report-through-the-toolbar-in-angular-pivotview-component | 
|  | 28 | +2. Open the project in Visual Studio Code. | 
|  | 29 | +3. Install dependencies: | 
|  | 30 | +   - In the integrated terminal, run: | 
|  | 31 | +     - npm install | 
|  | 32 | +4. Start the development server: | 
|  | 33 | +   - ng serve | 
|  | 34 | +5. Navigate to the URL shown in the terminal (typically http://localhost:4200) to view the sample. | 
|  | 35 | + | 
|  | 36 | +## ✅ Compatibility | 
|  | 37 | +- This sample targets the Angular version specified in package.json. Update your local Node.js and Angular CLI to compatible versions if you encounter setup issues. | 
|  | 38 | + | 
|  | 39 | +## 📚 Learn More | 
|  | 40 | + | 
|  | 41 | +- [Getting Started with Syncfusion Angular Pivot Table](https://ej2.syncfusion.com/angular/documentation/pivotview/getting-started) | 
|  | 42 | +- [Live Feature Samples and Demos](https://ej2.syncfusion.com/angular/demos/#/tailwind3/pivot-table/overview) | 
|  | 43 | + | 
|  | 44 | +## 💬 Support and Feedback | 
|  | 45 | + | 
|  | 46 | +For any other queries, contact our [Syncfusion® support team](https://support.syncfusion.com/?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples) or post your queries through the [community forums](https://www.syncfusion.com/forums?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples).  | 
|  | 47 | + | 
|  | 48 | +Request a new feature through [Syncfusion® feedback portal](https://www.syncfusion.com/feedback?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples).  | 
|  | 49 | + | 
|  | 50 | +## 📜 License | 
|  | 51 | + | 
|  | 52 | +This is a commercial product and requires a paid license for possession or use. Syncfusion's licensed software, including this component, is subject to the terms and conditions of [Syncfusion's EULA](https://www.syncfusion.com/license/studio/22.2.5/syncfusion_essential_studio_eula.pdf?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples). You can purchase a license [here](https://www.syncfusion.com/sales/products?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples) or start a free 30\-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples) | 
0 commit comments