-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature(REPORT-333396): Bold-Reports 5.3 Release ChangesAddressing Re…
…view Comments
- Loading branch information
1 parent
4d04d1b
commit a750385
Showing
1 changed file
with
35 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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:[email protected]) or [Feedback portal](https://www.boldreports.com/feedback/). | ||
|
|
||
| Landscape: `.ej-landscape-img` | ||
| ```cmd | ||
| background-height = current-height + 100%; | ||
| ``` | ||
| * To renew the subscription, click [here](https://www.boldreports.com/pricing/on-premise) or contact our sales team at <https://www.boldreports.com/contact>. |