diff --git a/README.md b/README.md index 59244ad..3fed676 100644 --- a/README.md +++ b/README.md @@ -1,159 +1,62 @@ -# Reports Angular samples +# Bold Reports Angular samples -Reports Angular samples was built on [Angular CLI](https://cli.angular.io/) application. +Bold Reports Angular samples repository contains the [Report Viewer](https://www.boldreports.com/embedded-reporting/angular-report-viewer) and [Report Designer](https://www.boldreports.com/embedded-reporting/angular-report-designer) samples. It empower your web application with feature-rich report preview, edit, and customization capabilities that allow you to explore data easily and make real-time decisions. Effortlessly print and export reports. -## Pre-requisite +This section guides you to use the Bold Reports Angular samples in your applications. -* Install stable `NodeJs` from https://nodejs.org and run `node -v` to check whether it is installed properly or not. +* [Requirements to run the demo](#requirements-to-run-the-demo) +* [Using the Reporting Samples](#using-the-reporting-samples) +* [Online Demos](#online-demos) +* [Documentation](#documentation) +* [License](#license) +* [Support and Feedback](#support-and-feedback) -* Install `angular-cli` package with global access by executing the below command and run `ng --version` to check whether it is installed properly or not. +## Requirements to run the demo -```cmd -npm install @angular/cli@latest -g -``` +The samples requires the below requirements to run. -* Install gulp package with global access by executing the below command and run `gulp -v` to check whether it is installed properly or not. +* [Node.js](https://nodejs.org) -```cmd -npm install gulp -g -``` +## Using the Reporting Samples +### Install -## Document Structure - -The Reports Angular samples should be placed inside the `src/app/components` location. - -Refer the below folder structure for further details. - - --> src - --> app - --> components (1) - --> default (2) - --> default.component.html (3) - --> default.component.ts (4) - --> default.componenet.css (5) - --> invoice (2) - --> invoice.component.html (3) - --> invoice.component.ts (4) - --> invoice.componenet.css (5) - --> samples.json (6) - -(1). This is where all our `reports samples` should be placed. - -(2). This is our sample folder and this folder will contains view, model and css file. - -(3). This is our sample `view/template` file. - -(4). This is our sample `model` file. - -(5). This is our sample `css` file. - -(6). This s our sample configuration file. - -```json -{ - "samples": [{ - "routerPath": "default", - "className": "DefaultComponent", - "sampleName": "Default Functionalities", - "directoryName": "default", - "imageDetails": { - "imageName": "default.png", - "isLandscape": false - }, - "metaData": { - "description": "default sample", - "tags": "ej" - } - }, - { - "routerPath": "invoice", - "className": "InvoiceComponent", - "sampleName": "Invoice", - "directoryName": "invoice", - "imageDetails": { - "imageName": "default.png", - "isLandscape": true - }, - "metaData": { - "description": "invoice sample", - "tags": "ej" - } - } - ] -} +To install all dependent packages, use the below command +```bash +npm install ``` -`samples` - This is an array which contains all samples information. - -`routerPath` - This is the our sample navigation path. - -`sampleName` - This is our sample name which will be rendered in table of contents. - -`className` - This is our sample className. - -`directoryName` - This is our sample directory name. - -`imageDetails.imageName` - This is our sample image name which will be rendered in table of contents. - -Note : keep your sample images in `src/assets/sidebar` folder. - -`imageDetails.isLandscape` - if it is true, your sample image will be renderend in lansscape mode else it will be renderend in portrait mode. - -`metaData.description` - This is our sample description. - -`metaData.tags` - This is our sample important tags. - -## QuickStart -After completing prerequisite steps, Follow the below steps to run EJ Reports Angular samples +### Build -Clone the repo from https://gitlab.syncfusion.com/data-science/reports-angular-samples from `development` branch. +To compile the source files, use the below command - -Run `npm install` from the cloned root folder. - - -Run `gulp serve` to serve the application - -## Gulp Tasks - -The below gulp tasks can be used to build and serve the documentation. - - -Run the below command to serve the application. After running the command, Navigate to [localhost:4200](http://localhost:4200). - -```cmd - gulp serve +```bash +npm run build ``` -Run the below command to test ts lint. +### Run/Serve + +To run the samples, use the below command -```cmd - gulp ts-lint +```bash +npm run serve ``` -Run the below command to test file name validation. +## Online Demos -Note: This task will throw error on using custom file names . For that, we need to include these names(need to have valid reason for using these custom names) in `customNames` array in `src/app/components/samples.json` file. +Take a look at the Bold Reporting Angular live demo [here](https://demos.boldreports.com/home/angular.html). -```cmd - gulp file-validation -``` +## Documentation -Run the below command to test ts lint and file name validation. +A complete Bold Reports documentation can be found on [Bold Reports Help](https://help.boldreports.com/embedded-reporting/angular-reporting/). -```cmd - gulp test -``` -## Pre-requisite for Including New Image for New Report +## License -kindly increase the background width `src/app/common/sidebar/sidebar.css` of css class +Refer the [LICENSE](/LICENSE) file. -Portrait: `.ej-portrait-img` or +## Support and Feedback +* For any other queries, reach our [Bold Reports support team](mailto:support@boldreports.com) or [Feedback portal](https://www.boldreports.com/feedback/). -Landscape: `.ej-landscape-img` -```cmd -background-height = current-height + 100%; -``` \ No newline at end of file +* To renew the subscription, click [here](https://www.boldreports.com/pricing/on-premise) or contact our sales team at .