diff --git a/_config.yml b/_config.yml index 61f146ad6..fe42637fd 100644 --- a/_config.yml +++ b/_config.yml @@ -15,6 +15,9 @@ navigation: getting-started: position: 10 title: "Getting Started" + ide-integration: + position: 15 + title: "IDE Integration" security: position: 20 title: "Security" diff --git a/ide-integration/images/add-new-item.png b/ide-integration/images/add-new-item.png new file mode 100644 index 000000000..ece2fb3cb Binary files /dev/null and b/ide-integration/images/add-new-item.png differ diff --git a/ide-integration/images/new-item-templates.png b/ide-integration/images/new-item-templates.png new file mode 100644 index 000000000..098210dad Binary files /dev/null and b/ide-integration/images/new-item-templates.png differ diff --git a/ide-integration/images/new-project-templates.png b/ide-integration/images/new-project-templates.png new file mode 100644 index 000000000..4d9754b8b Binary files /dev/null and b/ide-integration/images/new-project-templates.png differ diff --git a/ide-integration/images/report-wizard.png b/ide-integration/images/report-wizard.png new file mode 100644 index 000000000..1b05e6d24 Binary files /dev/null and b/ide-integration/images/report-wizard.png differ diff --git a/ide-integration/images/rest-service-project-configuration-wizard.png b/ide-integration/images/rest-service-project-configuration-wizard.png new file mode 100644 index 000000000..c8be177a8 Binary files /dev/null and b/ide-integration/images/rest-service-project-configuration-wizard.png differ diff --git a/ide-integration/images/start-upgrade-wizard.png b/ide-integration/images/start-upgrade-wizard.png new file mode 100644 index 000000000..29c6602b0 Binary files /dev/null and b/ide-integration/images/start-upgrade-wizard.png differ diff --git a/ide-integration/images/telerik-reporting-angular-report-viewer.png b/ide-integration/images/telerik-reporting-angular-report-viewer.png new file mode 100644 index 000000000..d0bc7c41c Binary files /dev/null and b/ide-integration/images/telerik-reporting-angular-report-viewer.png differ diff --git a/ide-integration/images/telerik-reporting-angular-scaffolding-wizard.png b/ide-integration/images/telerik-reporting-angular-scaffolding-wizard.png new file mode 100644 index 000000000..8db7f8ce6 Binary files /dev/null and b/ide-integration/images/telerik-reporting-angular-scaffolding-wizard.png differ diff --git a/ide-integration/images/telerik-reporting-schematics.png b/ide-integration/images/telerik-reporting-schematics.png new file mode 100644 index 000000000..349552267 Binary files /dev/null and b/ide-integration/images/telerik-reporting-schematics.png differ diff --git a/ide-integration/images/telerik-reporting-tools.png b/ide-integration/images/telerik-reporting-tools.png new file mode 100644 index 000000000..2d9a364e6 Binary files /dev/null and b/ide-integration/images/telerik-reporting-tools.png differ diff --git a/ide-integration/images/toolbox-items.png b/ide-integration/images/toolbox-items.png new file mode 100644 index 000000000..7b0c197e3 Binary files /dev/null and b/ide-integration/images/toolbox-items.png differ diff --git a/ide-integration/images/vscode-reporting-angular-new-project.png b/ide-integration/images/vscode-reporting-angular-new-project.png new file mode 100644 index 000000000..499169136 Binary files /dev/null and b/ide-integration/images/vscode-reporting-angular-new-project.png differ diff --git a/ide-integration/integration-with-visual-studio.md b/ide-integration/integration-with-visual-studio.md new file mode 100644 index 000000000..a4f112987 --- /dev/null +++ b/ide-integration/integration-with-visual-studio.md @@ -0,0 +1,70 @@ +--- +title: Integration with Visual Studio +page_title: Using Visual Studio Extensions +description: Learn how to facilitate the development process for Telerik Reporting with the Visual Studio Extensions. +slug: reporting-integration-with-visual-studio +tags: integration,visual,studio,reporting,configure,wizard, extension +published: True +position: 0 +--- +# Visual Studio Extensions + +The **Visual Studio Extensions** for the **Telerik Reporting** product aim to help developers when creating applications with Telerik Reporting. They can be accessed through the *Extensions | Telerik | Reporting* menu. + +Make sure that the extension is installed first: + +![Telerik Reporting Tools](images/telerik-reporting-tools.png) + +The extensions handle the following major points in the development process: + +## Project Templates + +After [installing Telerik Reporting]({%slug telerikreporting/installation%}), the extensions add several project templates to the **New Project** dialog of Visual Studio: + +![New Project Templates](images/new-project-templates.png) + +If you select the last option **Telerik Reporting REST service**, the **REST Service Project Configuration** wizard is launched: + +![REST Service Project Configuration Wizard](images/rest-service-project-configuration-wizard.png) + +A menu pops up that allows you to configure the REST Service properties: + + +[Hosting the Telerik Reporting REST Service in an ASP.NET Application]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-web-api-implementation/how-to-add-telerik-reporting-rest-web-api-to-web-application%}) + +[Hosting the Telerik Reporting REST Service in ASP.NET Core in .NET 6+ with Minimal API]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/how-to-host-reports-service-in-asp.net-core-in-.net-6-with-minimal-api%}) + +## Item Templates + +With the [installation of Telerik Reporting]({%slug telerikreporting/installation%}), several [report item]({%slug report_item%}) templates are added to the **New Item** dialog of Visual Studio: + +![Add New Item](images/add-new-item.png) + +![New Item Templates](images/new-item-templates.png) + +If you select the last option, the New Report Wizard is launched: + +![Select Report Wizard](images/report-wizard.png) + +Depending on the user's selection, the respective wizard is displayed, e.g. [Band Report Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/tools/report-wizards/band-report-wizard/overview%}). + +## Upgrade Wizard + +The [Upgrade Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/visual-studio-report-designer/upgrade-wizard%}) allows you to upgrade/downgrade a .NET Framework project to any installed Telerik Reporting version. It can be started by using the *Extensions > Telerik > Reporting > Upgrade Wizard* menu item: + +![Start Upgrade Wizard](images/start-upgrade-wizard.png) + +After [installing Telerik Reporting]({%slug telerikreporting/installation%}) you can benefit the [Visual Studio Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/visual-studio-report-designer/overview%}) in a .NET Framework project which facilitates the creation of new reports and importing reports from other formats in the Designer. + +During the [installation process]({%slug telerikreporting/installation%}) of Telerik Reporting on your machine, the Telerik assemblies are added to Global Assemby Cache (GAC) as well. This enables the respective items in the Visual Studio Toolbox for a .NET Framework project as well: + +![Toolbox Items](images/toolbox-items.png) + +In case of any problems related to the Visual Studio Telerik Reporting Toolbox items, please refer to [Troubleshooting]({%slug telerik-reporting-toolbox-items-are-missing%}) article offering several tips. + +## See Also + +- [Upgrade Wizard]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/visual-studio-report-designer/upgrade-wizard%}) +- [Troubleshooting Visual Studio Report Designer Problems]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/visual-studio-report-designer/visual-studio-problems%}) +- [Installation Approaches for Telerik Reporting]({%slug telerikreporting/installation%}) + diff --git a/ide-integration/integration-with-vs-code.md b/ide-integration/integration-with-vs-code.md new file mode 100644 index 000000000..0f1bdd37c --- /dev/null +++ b/ide-integration/integration-with-vs-code.md @@ -0,0 +1,40 @@ +--- +title: Integration with VS Code +page_title: Integration with VS Code +description: The Telerik Reporting Productivity Tools Extension for Visual Studio Code provides scaffolding for the Telerik Reporting native Angular viewer. +slug: integration-with-vs-code +tags: integration, vscode, report, viewer, angular +published: True +position: 1 +--- + +# Visual Studio Code Integration + +The [Telerik Reporting Productivity Tools](https://marketplace.visualstudio.com/items?itemName=TelerikInc.telerik-reporting-productivity-tools) Extension for [Visual Studio Code](https://code.visualstudio.com/) provides scaffolding for the Telerik Reporting native Angular viewer. + +To create a new test app, you can use the Angular CLI: + +`ng new ReportingAngularApp` + +1\. In VS Code, in the Explorer, within your Angular application source folder, right-click where you want to add a reporting component and select **New Telerik Reporting Angular Project Item**: + +![New Telerik Reporting Angular Project Item](images/vscode-reporting-angular-new-project.png) + +2\. VS Code will prompt you that @progress/telerik-reporting-schematics is missing. To install it, click `npm i ...` in the prompt. + +![Telerik Reporting Schematics](images/telerik-reporting-schematics.png) + +3\. The Telerik Reporting Angular Scaffolding wizard will open, showing the available Angular component options. + +![Telerik Reporting Angular Scaffolding Wizard](images/telerik-reporting-angular-scaffolding-wizard.png) + +4\. Configure your preferred options and click **Create**. This will generate an Angular component with a pre-configured Telerik Reporting Native Angular report viewer. + +![ Telerik Reporting Native Angular Report Viewer](images/telerik-reporting-angular-report-viewer.png) + +5\. Include the new component in your project. Add it to your routing or to the HTML of an existing component. + +## See Also + +* [Adding the Native Angular Report Viewer with the Project Item Generator]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/native-angular-report-viewer/integrating-with-project-item-generator%}) +