diff --git a/Extension/Document-SDK-Extension/Visual-Studio/Sample-Creator.md b/Extension/Document-SDK-Extension/Visual-Studio/Sample-Creator.md new file mode 100644 index 0000000..f2c815e --- /dev/null +++ b/Extension/Document-SDK-Extension/Visual-Studio/Sample-Creator.md @@ -0,0 +1,101 @@ +--- +layout: post +title: Sample Creator | Document SDK | Syncfusion +description: Sample Creator is the utility that allows you to create Syncfusion ASP.NET Core or ASP.NET MVC Projects along with the samples based on Syncfusion Document SDK Controls and Features selection +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Sample Creator + +The Syncfusion® Document SDK Sample Creator is a tool that lets you make Syncfusion® ASP.NET Core or ASP.NET MVC projects based on the platform selection with sample code for required Syncfusion® Document SDK component features and control configuration. + +I> The Syncfusion® Document SDK Sample Creator utility is available from v30.1.37 + +## Create Syncfusion® ASP.NET Core or ASP.NET MVC Web Application from Sample Creator + +The following steps help you to create the Syncfusion® ASP.NET Core or ASP.NET MVC Web Application via the Sample Creator utility. + +1. To launch Syncfusion® ASP.NET Core or ASP.NET MVC application, follow either one of the options below: + + Click **Syncfusion® Menu** and choose **Essential Studio® for Document SDK > Launch Sample Creator…** in **Visual Studio**. + + ![launch the Sample Creator via Syncfusion® menu](images/Syncfusion_Menu_SampleCreator.png) + + N> In Visual Studio 2019, Syncfusion® menu available under Extension in Visual Studio menu. + +2. Syncfusion® Sample Creator Wizard displaying the Syncfusion® Document SDK **Controls and its Feature Selection** section + + ![Syncfusion® Document SDK Sample Creator wizard](images/SampleCreator-img2.png) + + +### Controls Selection + +Listed here are the Syncfusion® Document SDK controls so you can choose the required controls. + +![Syncfusion® Document Sdk Sample Creator Controls selection](images/SampleCreator-img3.png) + +### Project Configuration + +1. You can configure the following project details in the Sample Creator. + + - Platform Type – Select the type of platform either ASP.NET Core or MVC. + + - ASP.NET Core: + + - Select the VS Version - Choose the Visual Studio Version + - .NET Core – Choose the .NET Core version + - Assets From – Load the Syncfusion® assets to either CDN or NPM. + + ![Syncfusion® Document SDK Sample Creator project configuration section](images/SampleCreator-core.png) + + - ASP .NET MVC: + + - Select the VS Version - Choose the Visual Studio Version + - .NET Framework – Choose the .NET Framework version + - Assets From – Load the Syncfusion® assets to either CDN or NuGet. + + ![Syncfusion® Document SDK Sample Creator project configuration section](images/SampleCreator-mvc.png) + + - Name – Name your Syncfusion® ASP.NET Core or ASP.NET MVC Application. + + - Location – Choose the target location of your project. + + - Theme Selection – Choose the required theme.The Theme Preview section shows the controls preview before create the Syncfusion® project. + +2. Click **Create** button. After creating the project, open the project by clicking **Yes**. If you click **No**, the corresponding location of the project will be opened. Refer to the following screenshot for more information. + + ![create](images/sample-creator-create.png) + +3. The new Syncfusion® project is created with the resources. + + - Added the required Controllers and View files in the project. + + - ASP.NET Core: + + ![required controllers](images/required-controllers.png) + + - ASP.NET MVC: + + ![required controllers](images/required-controllers1.png) + + - Included the required Syncfusion® scripts and theme files. + + - ASP.NET Core: + + ![script-theme references](images/scripts-theme.png) + + - ASP.NET MVC: + + ![script-theme references](images/scripts-theme1.png) + + - The required Syncfusion® assemblies are added for selected controls under Project Reference. + + - ASP.NET Core: + + ![syncfusion® assemblies](images/syncfusion-assemblies.png) + + - ASP .NET MVC: + + ![syncfusion® assemblies](images/syncfusion-assemblies1.png) \ No newline at end of file diff --git a/Extension/Document-SDK-Extension/Visual-Studio/code-generator.md b/Extension/Document-SDK-Extension/Visual-Studio/code-generator.md new file mode 100644 index 0000000..6b73b54 --- /dev/null +++ b/Extension/Document-SDK-Extension/Visual-Studio/code-generator.md @@ -0,0 +1,52 @@ +--- +layout: post +title: Code Generator in Document SDK | Syncfusion +description: Learn here about adding the Document SDK Component using Code Generator of Syncfusion Document SDK Extension for Visual Studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Add Blazor Document SDK component code + +Syncfusion® provides a Code Generator component for the Blazor platform, allowing you to quickly insert Syncfusion® Document SDK component code into the desired location within a Razor file. The Syncfusion® extension automatically adds the necessary Syncfusion® Document SDK components along with the required namespaces, styles, and NuGet references. The Code Generator is a simple wizard that interacts with data models and integrates Syncfusion® Document SDK components with the required features into your application. + +The steps below will assist you to add the Syncfusion® Document SDK components code in your Blazor application through **Visual Studio 2022**: + +N> Before using the Syncfusion® Blazor Document SDK Code Generator, check whether the Syncfusion® Blazor Document SDK Extension is installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. + +1. Open your existing Blazor application or create a new Blazor application in the Visual Studio 2019 or Visual Studio 2022. + +2. To open the Syncfusion® Blazor Document SDK Code Generator Wizard, select one of the options below in the Razor file, and then add Syncfusion® Document SDK components: + + **Option 1:** + + To generate a specific component code, right-click on the editor of the Razor file at the required line and Select the **Syncfusion® Blazor Document SDK Code Generator...** + + ![CodeGeneratorCommand](images/Code-Generator-Command.png) + + **Option 2:** + + Open the .razor file and place the cursor at the required line then choose **Extension -> Syncfusion® -> Essential Studio® for Document SDK -> Syncfusion® Blazor Document SDK Code Generator…** from the Visual Studio menu. + + ![CodeGeneratorMenu](images/Code-Generator-Menu.png) + +3. The wizard for the Syncfusion® Blazor Document SDK Code Generator will appear. Choose a required control. + + ![CodeGeneratorWizard](images/Code-Generator-MainWizard.png) + + **Feature:** Selected Syncfusion® Document SDK component features are listed. You can select the required features. + + **Control requirements:** Contains the required user input fields for the selected component. You can provide the required value for those fields to add the component code. + + Click **Insert**. It generates the selected Syncfusion® Document SDK component render code and inserts it wherever the cursor is positioned. + + ![ComponentRenderCode](images/Code-Generator-ComponentRenderCode.png) + +4. In the Output window, select the **Syncfusion® Blazor Document SDK Code Generator** from the **“Show output from”** drop-down to see the changes made to your application. + + ![OutputWindow](images/Code-Generator-OutputWindow.png) + +5. The selected Syncfusion® Blazor Document SDK component code is inserted into the active Razor file, and the application is configured with the latest NuGet package, styles, and namespaces required for the selected component. + +6. If you have installed the trial setup or NuGet packages from nuget.org, you must register the Syncfusion® license key to your application as Syncfusion® has introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2) post to know more about the licensing changes introduced in Essential Studio®. diff --git a/Extension/Document-SDK-Extension/Visual-Studio/download-and-installation.md b/Extension/Document-SDK-Extension/Visual-Studio/download-and-installation.md new file mode 100644 index 0000000..a074ebc --- /dev/null +++ b/Extension/Document-SDK-Extension/Visual-Studio/download-and-installation.md @@ -0,0 +1,71 @@ +--- +layout: post +title: Download and Installation of Document SDK | Syncfusion +description: Check out the documentation for download and installation of Syncfusion Document SDK for Visual Studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Download and Installation + +Syncfusion® publishes the Visual Studio extension in the below Visual Studio marketplace link. You can either install it directly from Visual Studio or download and install it from the Visual Studio marketplace. + +[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) + + +## Prerequisites + +The following software prerequisites must be installed to install the Syncfusion® Document SDK extension, as well as to create and add snippet in Syncfusion® Document SDK applications. + +* [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/). + +* [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet). + +* [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet). + +## Install through the Visual Studio Manage Extensions + +The steps below assist you to how to install the Syncfusion® Document SDK extensions from **Visual Studio Manage Extensions**. + +1. Open the Visual Studio 2022. + +2. Navigate to **Extension ->Manage Extensions** and open the Manage Extensions. + +3. On the left, click the **Online** tab and type **"Syncfusion® Document SDK"** in the **search box**. + + ![Online-Manage-Extension-window](images/OnlineExtension.png) + +4. Click the **Download** button in the **“Syncfusion® Document SDK Template Studio”** extensions. + +5. Close all Visual Studio instances after downloading the extensions to begin the installation process. You will see the following VSIX installation prompt. + + ![VSIX-Installation-Window](images/VSIXinstallation.png) + +6. Click the **Modify** button. + +7. After the installation is complete, open Visual Studio. + +8. Now, under the menu **Extensions**, you can use the Syncfusion® extensions from the Visual Studio. + + ![SyncfusionMenu](images/SyncfusionMenu.png) + +## Install from the Visual Studio Marketplace + +The steps below illustrate how to download and install the Syncfusion® Document SDK extension from the Visual Studio Marketplace. + +1. Download the Syncfusion® Document SDK Extensions from the below Visual Studio Marketplace. + + [Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) + +2. Close all Visual Studio instances running, if any. + +3. Double-click to install the downloaded VSIX file. You will see the VSIX installation prompts with the corresponding installed Visual Studio version checkbox for select the Visual Studio to install extension. + + ![VSIX-Installation-Window](images/VSIXinstallation1.png) + +4. Click the **Install** button. + +5. After the installation is complete, open Visual Studio. You can now use Syncfusion® extensions from the Visual Studio under the **Extensions** menu. + + ![SyncfusionMenu](images/SyncfusionMenu.png) \ No newline at end of file diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/AddScopeAPI.png b/Extension/Document-SDK-Extension/Visual-Studio/images/AddScopeAPI.png new file mode 100644 index 0000000..5e5f066 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/AddScopeAPI.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png b/Extension/Document-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png new file mode 100644 index 0000000..87567a4 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/AppRegistration.png b/Extension/Document-SDK-Extension/Visual-Studio/images/AppRegistration.png new file mode 100644 index 0000000..10d90b9 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/AppRegistration.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png b/Extension/Document-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png new file mode 100644 index 0000000..91b41ab Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Backuplocation.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Backuplocation.png new file mode 100644 index 0000000..5d37d91 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Backuplocation.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png b/Extension/Document-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png new file mode 100644 index 0000000..d36667a Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/ClientIdCreation.png b/Extension/Document-SDK-Extension/Visual-Studio/images/ClientIdCreation.png new file mode 100644 index 0000000..aa14ff4 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/ClientIdCreation.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png b/Extension/Document-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png new file mode 100644 index 0000000..8db726c Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/ClinetTenantId.png b/Extension/Document-SDK-Extension/Visual-Studio/images/ClinetTenantId.png new file mode 100644 index 0000000..76d5584 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/ClinetTenantId.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png b/Extension/Document-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png new file mode 100644 index 0000000..c30adee Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-Command.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-Command.png new file mode 100644 index 0000000..13a03ab Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-Command.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-ComponentRenderCode.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-ComponentRenderCode.png new file mode 100644 index 0000000..1cee5b8 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-ComponentRenderCode.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-MainWizard.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-MainWizard.png new file mode 100644 index 0000000..f5ed920 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-MainWizard.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-Menu.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-Menu.png new file mode 100644 index 0000000..146a456 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-Menu.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-OutputWindow.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-OutputWindow.png new file mode 100644 index 0000000..d44ad69 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Code-Generator-OutputWindow.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Configuration1.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Configuration1.png new file mode 100644 index 0000000..ee6fa3e Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Configuration1.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Conversion.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Conversion.png new file mode 100644 index 0000000..ac4f4f6 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Conversion.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionAddin.png b/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionAddin.png new file mode 100644 index 0000000..7359ea8 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionAddin.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionMenu.png b/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionMenu.png new file mode 100644 index 0000000..1f9ba9a Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionMenu.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionSuccess.png b/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionSuccess.png new file mode 100644 index 0000000..c646a3b Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionSuccess.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionSuccessMessage.png b/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionSuccessMessage.png new file mode 100644 index 0000000..c3575be Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/ConversionSuccessMessage.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/CreateNewWindow.png b/Extension/Document-SDK-Extension/Visual-Studio/images/CreateNewWindow.png new file mode 100644 index 0000000..50a5dd6 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/CreateNewWindow.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/CreateNewWizard.png b/Extension/Document-SDK-Extension/Visual-Studio/images/CreateNewWizard.png new file mode 100644 index 0000000..4a0adba Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/CreateNewWizard.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png b/Extension/Document-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png new file mode 100644 index 0000000..7030999 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/GoogleLogin.png b/Extension/Document-SDK-Extension/Visual-Studio/images/GoogleLogin.png new file mode 100644 index 0000000..b8d0e1f Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/GoogleLogin.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/HomePage.png b/Extension/Document-SDK-Extension/Visual-Studio/images/HomePage.png new file mode 100644 index 0000000..901cd28 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/HomePage.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Localization.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Localization.png new file mode 100644 index 0000000..172d008 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Localization.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Login.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Login.png new file mode 100644 index 0000000..8067ba1 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Login.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png b/Extension/Document-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png new file mode 100644 index 0000000..c5bc24d Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Migration.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Migration.png new file mode 100644 index 0000000..9e15f7c Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Migration.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Migration1.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Migration1.png new file mode 100644 index 0000000..a4e35a6 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Migration1.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Migration2.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Migration2.png new file mode 100644 index 0000000..2004bd7 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Migration2.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/MigrationAddin.png b/Extension/Document-SDK-Extension/Visual-Studio/images/MigrationAddin.png new file mode 100644 index 0000000..0ec7ac0 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/MigrationAddin.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/MigrationMenu.png b/Extension/Document-SDK-Extension/Visual-Studio/images/MigrationMenu.png new file mode 100644 index 0000000..c274a45 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/MigrationMenu.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/MigrationSuccess.png b/Extension/Document-SDK-Extension/Visual-Studio/images/MigrationSuccess.png new file mode 100644 index 0000000..1a85683 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/MigrationSuccess.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png b/Extension/Document-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png new file mode 100644 index 0000000..9c27e18 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/OauthclientId.png b/Extension/Document-SDK-Extension/Visual-Studio/images/OauthclientId.png new file mode 100644 index 0000000..f4d0524 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/OauthclientId.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/RedirectedURI.png b/Extension/Document-SDK-Extension/Visual-Studio/images/RedirectedURI.png new file mode 100644 index 0000000..c2ed0e4 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/RedirectedURI.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/RegisterApplication.png b/Extension/Document-SDK-Extension/Visual-Studio/images/RegisterApplication.png new file mode 100644 index 0000000..ea37b34 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/RegisterApplication.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png b/Extension/Document-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png new file mode 100644 index 0000000..4dcbb5c Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-core.png b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-core.png new file mode 100644 index 0000000..231c55d Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-core.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img1.png b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img1.png new file mode 100644 index 0000000..3d48d9a Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img1.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img2.png b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img2.png new file mode 100644 index 0000000..05b9aae Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img2.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img3.png b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img3.png new file mode 100644 index 0000000..acdb3b2 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img3.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img6.png b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img6.png new file mode 100644 index 0000000..9f9c4e6 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-img6.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-mvc.png b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-mvc.png new file mode 100644 index 0000000..6a589a9 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/SampleCreator-mvc.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.PNG b/Extension/Document-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.PNG new file mode 100644 index 0000000..cf6d6d5 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.PNG differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/SyncfusionMenu.png b/Extension/Document-SDK-Extension/Visual-Studio/images/SyncfusionMenu.png new file mode 100644 index 0000000..acc1b5c Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/SyncfusionMenu.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/Syncfusion_Menu_SampleCreator.png b/Extension/Document-SDK-Extension/Visual-Studio/images/Syncfusion_Menu_SampleCreator.png new file mode 100644 index 0000000..bc4d898 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/Syncfusion_Menu_SampleCreator.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png b/Extension/Document-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png new file mode 100644 index 0000000..07e952c Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/WebAppRegister.png b/Extension/Document-SDK-Extension/Visual-Studio/images/WebAppRegister.png new file mode 100644 index 0000000..29de53d Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/WebAppRegister.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png b/Extension/Document-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png new file mode 100644 index 0000000..bdd9c69 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/WebApplogIn.png b/Extension/Document-SDK-Extension/Visual-Studio/images/WebApplogIn.png new file mode 100644 index 0000000..1317eef Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/WebApplogIn.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/aadredirecteduri.png b/Extension/Document-SDK-Extension/Visual-Studio/images/aadredirecteduri.png new file mode 100644 index 0000000..da380c6 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/aadredirecteduri.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png b/Extension/Document-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png new file mode 100644 index 0000000..c9e9324 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/controlssection.png b/Extension/Document-SDK-Extension/Visual-Studio/images/controlssection.png new file mode 100644 index 0000000..7c06d2c Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/controlssection.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/createmenu.png b/Extension/Document-SDK-Extension/Visual-Studio/images/createmenu.png new file mode 100644 index 0000000..60e3231 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/createmenu.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/readme.png b/Extension/Document-SDK-Extension/Visual-Studio/images/readme.png new file mode 100644 index 0000000..b3107a7 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/readme.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/required-controllers.png b/Extension/Document-SDK-Extension/Visual-Studio/images/required-controllers.png new file mode 100644 index 0000000..e8b5fd8 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/required-controllers.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/required-controllers1.png b/Extension/Document-SDK-Extension/Visual-Studio/images/required-controllers1.png new file mode 100644 index 0000000..3a1e072 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/required-controllers1.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/rightsideprojectdetails.png b/Extension/Document-SDK-Extension/Visual-Studio/images/rightsideprojectdetails.png new file mode 100644 index 0000000..d29f800 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/rightsideprojectdetails.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/sample-creator-create.png b/Extension/Document-SDK-Extension/Visual-Studio/images/sample-creator-create.png new file mode 100644 index 0000000..472b3c0 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/sample-creator-create.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/scripts-theme.png b/Extension/Document-SDK-Extension/Visual-Studio/images/scripts-theme.png new file mode 100644 index 0000000..c6689ee Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/scripts-theme.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/scripts-theme1.png b/Extension/Document-SDK-Extension/Visual-Studio/images/scripts-theme1.png new file mode 100644 index 0000000..91a8bbc Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/scripts-theme1.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/syncfusion-assemblies.png b/Extension/Document-SDK-Extension/Visual-Studio/images/syncfusion-assemblies.png new file mode 100644 index 0000000..1b7a4ec Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/syncfusion-assemblies.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/syncfusion-assemblies1.png b/Extension/Document-SDK-Extension/Visual-Studio/images/syncfusion-assemblies1.png new file mode 100644 index 0000000..07b6bbf Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/syncfusion-assemblies1.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/wasmconfig.png b/Extension/Document-SDK-Extension/Visual-Studio/images/wasmconfig.png new file mode 100644 index 0000000..4aaa558 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/wasmconfig.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/wasmtemplate.png b/Extension/Document-SDK-Extension/Visual-Studio/images/wasmtemplate.png new file mode 100644 index 0000000..e7e9af8 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/wasmtemplate.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/webappconfig.png b/Extension/Document-SDK-Extension/Visual-Studio/images/webappconfig.png new file mode 100644 index 0000000..98c1a82 Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/webappconfig.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/images/webapptemplate.png b/Extension/Document-SDK-Extension/Visual-Studio/images/webapptemplate.png new file mode 100644 index 0000000..126f4ba Binary files /dev/null and b/Extension/Document-SDK-Extension/Visual-Studio/images/webapptemplate.png differ diff --git a/Extension/Document-SDK-Extension/Visual-Studio/overview.md b/Extension/Document-SDK-Extension/Visual-Studio/overview.md new file mode 100644 index 0000000..4a9f717 --- /dev/null +++ b/Extension/Document-SDK-Extension/Visual-Studio/overview.md @@ -0,0 +1,20 @@ +--- +layout: post +title: Overview of Syncfusion Document SDK Extension for Visual Studio | Syncfusion +description: Learn here all about introduction on Syncfusion Document SDK for Visual Studio which made integration ease. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Overview of Document SDK for Visual Studio + +The Syncfusion® Document SDK for Visual Studio is used to integrate Syncfusion® Documenet processing components into the applications by configuring the Syncfusion® NuGet packages and themes. + +The Syncfusion® Document SDK provides the following add-ins in Visual Studio: + +[Template Studio](template-studio): Creates Syncfusion® Blazor applications with required configuration for development with Syncfusion® Document SDK components. + +[Code Generator](code-generator): Adds Syncfusion® Document SDK component code in razor file of Blazor Application at required place. + +[Creator Sample](sample-creator): Creates Syncfusion® ASP.NET Core or MVC application with the sample code of required Syncfusion® Document SDK controls and features. \ No newline at end of file diff --git a/Extension/Document-SDK-Extension/Visual-Studio/template-studio.md b/Extension/Document-SDK-Extension/Visual-Studio/template-studio.md new file mode 100644 index 0000000..d10839f --- /dev/null +++ b/Extension/Document-SDK-Extension/Visual-Studio/template-studio.md @@ -0,0 +1,402 @@ +--- +layout: post +title: Template Studio in Document SDK - Syncfusion +description: Learn here about how to create the Blazor application using Syncusion® Document SDK Components with the help of template studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Syncfusion® Document SDK Template Studio + +Syncfusion® provides the Document SDK Template Studio, which allows you to create a Syncfusion Blazor application using Syncfusion® Document SDK components. The Syncfusion® Blazor app is created with the required Syncfusion® NuGet references, namespaces, styles, and component render code. The Template Studio includes an easy-to-use project wizard that guides you through the process of creating an application with Syncfusion® Document SDK components. + +The steps below will assist you to create your **Syncfusion® Blazor Application** through **Visual Studio 2022**: + +N> Before use the Syncfusion® Project Template, check whether the Syncfusion® Document SDK Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/download-and-installation) help topic. + +1. Open Visual Studio 2022. + +2. To create a Syncfusion® Blazor application, use either one of the following options: + + **Option 1** + + Choose **Extension -> Syncfusion -> Essential Studio® for Document SDK -> Create New Syncfusion Project...** from the **Visual Studio menu**. + + ![CreateMenu](images/createmenu.png) + + **Option 2** + + Choose **File -> New -> Project** from the menu. This launches a new dialogue for creating a new application. Syncfusion® templates can be found by filtering the application type for **Syncfusion** or by entering **Syncfusion** as a keyword in the search option. + + ![CreateNewWindow](images/CreateNewWindow.png) + +3. Select the **Syncfusion® Document SDK Template Studio** and click **Next**. + + ![CreateNewWizard](images/CreateNewWizard.png) + +4. The Syncfusion® Document SDK Template Studio wizard will be launched to configure the Syncfusion Blazor app. + + > **Note:** Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + + **Project type section** + + Choose one of the Syncfusion® Blazor application types based on the version of the .NET SDK you are using. + + | .NET SDK version | Supported Syncfusion Blazor Application Type | + | ---------------- | -------------------------------------------- | + | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion Blazor Web App | + | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion Blazor WebAssembly App | + + + In the **Syncfusion Blazor Web App** application type, you can configure the following options: + + + + + + + + + + + + +
+ Interactivity type + + Server, WebAssembly, Auto (Server and WebAssembly) +
+ Interactivity location + + Global, Per page/component +
+ + ![WebAppTemplate](images/webapptemplate.png) + + In the **Syncfusion Blazor WebAssembly App** application type, you can choose Progressive Web Application. + + ![WASMTemplate](images/wasmtemplate.png) + + > **Note:** The Progressive Web Application will be enabled if .NET 8.0 version or higher is installed. + +5. Click either **Next** or the **Controls** tab. The Syncfusion® Document SDK components you can add to the application are listed. + + ![Controls Section](images/controlssection.png) + + Choose the required control(s) by clicking the corresponding control box. + + To unselect the added control(s), use either one of the following options: + + **Option 1:** Click the corresponding selected control box. + + **Option 2:** Click ‘x’ button for corresponding control in the control list from **Project Details**. + + N> **Note:** Choose at least one control to enable the Features and Configuration tab. + +6. Click either **Next** or the **Features** tab, and you will see the features listed for the selected controls. You can choose the required features. + +7. Click **Next** or the **Configuration** tab to load the Configuration section. You can choose the required (.NET 9.0 and .NET 8.0), themes, https configuration, localization option, authentication type, Blazor Web App, and Blazor Web Assembly application types. + + Depending on your Syncfusion Blazor Application Type, refer to the table below for supported authentication types. + + | Syncfusion Blazor Application Type | Supported Authentication Types | + | ------------- | ------------- | + | Syncfusion Blazor Web App | None and Individual Accounts | + | Syncfusion Blazor WebAssembly App | None, Individual Accounts and Microsoft Identity Platform | + + If you choose the **Blazor Web App** application type, you can customize the Interactivity type and Interactivity location options. + + ![WebAppConfiguration](images/webappconfig.png) + + If you choose the **Blazor Web Assembly App** application type, you can customize the Progressive Web Application option. + + ![WASMConfiguration](images/wasmconfig.png) + + **Project details section** + + You can change the configuration details below in the Project Details section to change the application type, remove control(s) from the selected controls, or change the configurations. + + ![ProjectDetails](images/rightsideprojectdetails.png) + +8. Click **Create** button. The Syncfusion® Blazor application has been created. The created Syncfusion® Blazor app has the Syncfusion NuGet packages, styles, and the render code for the selected Syncfusion® Document SDK component. + + ![Readme](images/readme.png) + +9. The Syncfusion® Blazor application configures with most recent Syncfusion® NuGet packages version, selected style, namespaces, selected authentication, and component render code for Syncfusion® Document SDK components. + +10. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio®. + +## Authentication Configuration + +We need to register the created application in the Google API Console for Individual Accounts and in Azure Active Directory for the Microsoft Identity Platform. From the Google API Console registration, we can obtain the client ID for Individual Accounts. From the Azure Active Directory registration, we can obtain the tenant ID and application client ID for the Microsoft Identity Platform. We need to configure these ID values in the created applications; only then will the application run correctly with authentication support. + +### Individual Accounts Authentication + +#### Web Application and Progressive Web Application + +1. Go to below credentials page for the Google cloud platform API console. + + + +2. Click Create Credentials and OAuth Client Id. + + ![Google API console credentials page](images/GoogelAPIConsoleCredentials.png) + + ![Google API Oauth client Id](images/OauthclientId.png) + +3. Select Application type as Web Application in client Id creation. + + ![ApplicationType](images/ClientIdApplicationtype.png) + +4. Add your publish URL link as an Authorized URI and login URL as Redirected URI. + + ![RedirectedURI](images/RedirectedURI.png) + +5. Click save then OAuth client id will be created and copy that credential. + + ![ClientIdCreation](images/ClientIdCreation.png) + +6. Add that Client Id, and RedirectUri in appsettings.json file of your application. + + ![ClinetIdConfiguration](images/ClinetIdConfiguration.png) + +7. Change the build configuration bind as google from Local in program.cs file. + + ![buildconfigurationbind](images/buildconfigurationbind.png) + +### Microsoft Identity Platform Authentication + +#### Server Application + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI like {Redirect URI}/signin-oidc and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +7. Configure those client tenant id, application id, and domain in your application appsettings.json file. + + ![Project configuration](images/Configuration1.png) + +#### Web Application and Progressive Web Application + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +8. Configure those client tenant id and application id in your application appsettings.json file. + + ![Clinet ID and Tenant ID configuration](images/ClinetTenantIdConfiguration.png) + +#### ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application + +##### Client project Registration and Configuration + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +8. Configure those client tenant id and application id in your application appsettings.json file. + + ![Clinet ID and Tenant ID configuration](images/ClinetTenantIdConfiguration.png) + +##### Server project Registration and configuration + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![Server App Registration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Server Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Add a scope API in Expose an API page. + + ![Add scope API](images/AddScopeAPI.png) + +8. Give scope name, admin consent display name, and admin consent description and click Add scope. Scope API will be created, copy those scope API Value. + + ![Add scope API configuration](images/AddScopeAPI1.png) + +9. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +10. Configure those client tenant id, application id, added scope api id, and domain in your application appsettings.json file. + + ![Project configuration](images/Configuration1.png) + +11. Configure the scope API in client application program.cs file below highlighted place. + + ![Scope API configuration](images/ScopeAPIConfiguration.PNG) + +### Run application + +You can run the application and see the Syncfusion® components you selected. Select a component to see component output. + +![Blazor Template output page](images/HomePage.png) + +You can select a culture language in combo box at top right on the output page to apply the culture in the application. + +![Blazor Template output page](images/Localization.png) + +N> **Note:** Above culture combo box will be enabled in sample output if localization option is selected in configuration window from Syncfusion Blazor Template Studio wizard. + +## Register and Login Application + +### Individual Authentication + +#### Blazor Web App + +##### Applying Database Migrations and User Registration in the .NET 8.0 and .NET 9.0 Blazor Web App + +##### Applying Database Migrations: + +In the Blazor Web App, it's essential to apply pending migrations to the database before proceeding with user registration. Choose one of the following options: + +**Option 1: Using Visual Studio Package Manager Console** + +Navigate to **View -> Other Windows -> Package Manager Console** in Visual Studio. + +Run the following command in the Package Manager Console: + + ```Update-Database``` + +**Option 2: Using Command Prompt** + +Open a command prompt in your project directory and execute the following command: + + ```dotnet ef database update``` + +##### User Registration: + +1. Launch the application and register by submitting your email address and creating a password. + + ![Register the WebApp](images/WebAppRegister.png) + +2. Confirm your registration by clicking **Click here to confirm your account.** + + ![Confirming the WebApp registration](images/WebAppRegisterConfirmation.png) + +3. Submit your registered email address and password to log in to the application. + + ![LogIn to the WebApp](images/WebApplogIn.png) + +#### Server Application, ASP.NET Core hosted Web Application, and Progressive Web Application with ASP.NET Core hosted + +1. For register the application, submit your email address and create a password. + + ![Register the application](images/RegisterApplication.png) + +2. Confirming registration by clicking **Click here to confirm your account.** + + ![Register the confirmation](images/RegisterConfirmation.png) + +3. Submit your registered email address and password to login the application. + + ![login to the application](images/Login.png) + +#### Web Application and Progressive Web Application + +1. Login to the application using Gmail accounts. + + ![Google login](images/GoogleLogin.png) + +### Microsoft Identity Platform + +#### Server Application, Web Application, Progressive Application, ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application + +1. Login to your application using your Microsoft account. + +2. Accept permission request of your application. + + ![Accept permission](images/MicrosoftAuthentication.png) diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/code-generator.md b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/code-generator.md new file mode 100644 index 0000000..15de568 --- /dev/null +++ b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/code-generator.md @@ -0,0 +1,44 @@ +--- +layout: post +title: Code Generator in PDF Viewer SDK | Syncfusion +description: Learn here about adding the PDF Viewer SDK Component using Code Generator of Syncfusion PDF Viewer SDK Extension for Visual Studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Add Blazor PDF Viewer SDK component code + +Syncfusion® offers a Code Generator component for Blazor platform, enabling seamless integration of the Syncfusion® PDF Viewer SDK component into your Razor files with minimal effort. It automatically inserts the necessary code, including Syncfusion® PDF Viewer SDK components, required namespaces, styles, and NuGet references, at your chosen location. It simplifies the process by interacting with data models and embedding the Syncfusion® PDF Viewer SDK components with the desired features directly into your application. + +The steps below will assist you to add the Syncfusion® PDF Viewer SDK components code in your Blazor application through **Visual Studio 2022**: + +N> Before using the Syncfusion® Blazor PDF Viewer SDK Code Generator, check whether the Syncfusion® Blazor PDF Viewer SDK Extension is installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. + +1. Open your existing Blazor application or create a new Blazor application in the Visual Studio 2019 or Visual Studio 2022. + +2. To open the Syncfusion® Blazor PDF Viewer SDK Code Generator, select one of the options below in the Razor file, and then add Syncfusion® PDF Viewer SDK components: + + **Option 1:** + + To generate a specific component code, right-click on the editor of the Razor file at the required line and Select the **Syncfusion® Blazor PDF Viewer SDK Code Generator...** + + ![CodeGeneratorCommand](images/Code-Generator-Command.png) + + **Option 2:** + + Open the .razor file and place the cursor at the required line then choose **Extension -> Syncfusion® -> Essential Studio® for PDF Viewer SDK -> Syncfusion® Blazor PDF Viewer SDK Code Generator…** from the Visual Studio menu. + + ![CodeGeneratorMenu](images/Code-Generator-Menu.png) + + It generates the selected Syncfusion® PDF Viewer SDK component render code and inserts it wherever the cursor is positioned. + +![ComponentRenderCode](images/Code-Generator-ComponentRenderCode.png) + +3. In the Output window, select the **Syncfusion® Blazor PDF Viewer SDK Code Generator** from the **“Show output from”** drop-down to see the changes made to your application. + + ![OutputWindow](images/Code-Generator-OutputWindow.png) + +4. The selected Syncfusion® Blazor PDF Viewer SDK component code is inserted into the active Razor file, and the application is configured with the latest NuGet package, styles, and namespaces required for the selected component. + +5. If you have installed the trial setup or NuGet packages from nuget.org, you must register the Syncfusion® license key to your application as Syncfusion® has introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2) post to know more about the licensing changes introduced in Essential Studio®. diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/download-and-installation.md b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/download-and-installation.md new file mode 100644 index 0000000..cf50be5 --- /dev/null +++ b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/download-and-installation.md @@ -0,0 +1,71 @@ +--- +layout: post +title: Download and Installation of Syncfusion® PDF Viewer SDK Extension | Syncfusion +description: Check out the documentation for download and installation of Syncfusion® PDF Viewer SDK Extension for Visual Studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Download and Installation + +Syncfusion® publishes the Visual Studio extension in the below Visual Studio marketplace link. You can either install it directly from Visual Studio or download and install it from the Visual Studio marketplace. + +[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=) + + +## Prerequisites + +The following software prerequisites must be installed to install the Syncfusion® PDF Viewer SDK extension, as well as to creating, adding snippet, converting, and upgrading applications. + +* [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/). + +* [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet). + +* [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet). + +## Install through the Visual Studio Manage Extensions + +The steps below assist you to how to install the Syncfusion® PDF Viewer SDK extensions from **Visual Studio Manage Extensions**. + +1. Open the Visual Studio 2022. + +2. Navigate to **Extension ->Manage Extensions** and open the Manage Extensions. + +3. On the left, click the **Online** tab and type **"Syncfusion® PDF Viewer SDK"** in the **search box**. + + ![Online-Manage-Extension-window](images/OnlineExtension.png) + +4. Click the **Download** button in the **“Syncfusion® PDF Viewer SDK Template Studio”** extensions. + +5. Close all Visual Studio instances after downloading the extensions to begin the installation process. You will see the following VSIX installation prompt. + + ![VSIX-Installation-Window](images/VSIXinstallation.png) + +6. Click the **Modify** button. + +7. After the installation is complete, open Visual Studio. + +8. Now, under the menu **Extensions**, you can use the Syncfusion® extensions from the Visual Studio. + + ![SyncfusionMenu](images/SyncfusionMenu.png) + +## Install from the Visual Studio Marketplace + +The steps below illustrate how to download and install the Syncfusion® PDF Viewer SDK extension from the Visual Studio Marketplace. + +1. Download the Syncfusion® PDF Viewer SDK Extensions from the below Visual Studio Marketplace. + + [Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) + +2. Close all Visual Studio instances running, if any. + +3. Double-click to install the downloaded VSIX file. You will see the VSIX installation prompts with the corresponding installed Visual Studio version checkbox for select the Visual Studio to install extension. + + ![VSIX-Installation-Window](images/VSIXinstallation1.png) + +4. Click the **Install** button. + +5. After the installation is complete, open Visual Studio. You can now use Syncfusion® extensions from the Visual Studio under the **Extensions** menu. + + ![SyncfusionMenu](images/SyncfusionMenu.png) \ No newline at end of file diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-3.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-3.png new file mode 100644 index 0000000..628f4b0 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-3.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-4.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-4.png new file mode 100644 index 0000000..c13f982 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-4.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details.png new file mode 100644 index 0000000..8289cdf Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details1.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details1.png new file mode 100644 index 0000000..368e515 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details1.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item.png new file mode 100644 index 0000000..ba16fad Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-ui.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-ui.png new file mode 100644 index 0000000..612439a Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-ui.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-ui1.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-ui1.png new file mode 100644 index 0000000..422374c Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-Syncfusion-ui1.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-item.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-item.png new file mode 100644 index 0000000..6176ca3 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Add-item.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AddScopeAPI.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AddScopeAPI.png new file mode 100644 index 0000000..5e5f066 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AddScopeAPI.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png new file mode 100644 index 0000000..87567a4 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AppRegistration.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AppRegistration.png new file mode 100644 index 0000000..10d90b9 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AppRegistration.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png new file mode 100644 index 0000000..91b41ab Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Backuplocation.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Backuplocation.png new file mode 100644 index 0000000..5d37d91 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Backuplocation.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png new file mode 100644 index 0000000..d36667a Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClientIdCreation.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClientIdCreation.png new file mode 100644 index 0000000..aa14ff4 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClientIdCreation.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png new file mode 100644 index 0000000..8db726c Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClinetTenantId.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClinetTenantId.png new file mode 100644 index 0000000..76d5584 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClinetTenantId.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png new file mode 100644 index 0000000..c30adee Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-Command.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-Command.png new file mode 100644 index 0000000..d3be1b5 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-Command.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-ComponentRenderCode.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-ComponentRenderCode.png new file mode 100644 index 0000000..43e530a Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-ComponentRenderCode.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-Menu.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-Menu.png new file mode 100644 index 0000000..014e64c Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-Menu.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-OutputWindow.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-OutputWindow.png new file mode 100644 index 0000000..2c7e2fe Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Code-Generator-OutputWindow.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Config.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Config.png new file mode 100644 index 0000000..981a5fe Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Config.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ConfigMaui.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ConfigMaui.png new file mode 100644 index 0000000..e2c7adf Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ConfigMaui.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Configuration1.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Configuration1.png new file mode 100644 index 0000000..ee6fa3e Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Configuration1.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/CreateNewWindow.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/CreateNewWindow.png new file mode 100644 index 0000000..50a5dd6 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/CreateNewWindow.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/CreateNewWizard.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/CreateNewWizard.png new file mode 100644 index 0000000..63b92f9 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/CreateNewWizard.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png new file mode 100644 index 0000000..7030999 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/GoogleLogin.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/GoogleLogin.png new file mode 100644 index 0000000..b8d0e1f Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/GoogleLogin.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/HomePage.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/HomePage.png new file mode 100644 index 0000000..901cd28 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/HomePage.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Localization.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Localization.png new file mode 100644 index 0000000..172d008 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Localization.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Login.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Login.png new file mode 100644 index 0000000..8067ba1 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Login.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png new file mode 100644 index 0000000..c5bc24d Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Migration.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Migration.png new file mode 100644 index 0000000..9e15f7c Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Migration.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Migration1.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Migration1.png new file mode 100644 index 0000000..a4e35a6 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Migration1.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Migration2.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Migration2.png new file mode 100644 index 0000000..2004bd7 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Migration2.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MigrationAddin.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MigrationAddin.png new file mode 100644 index 0000000..0ec7ac0 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MigrationAddin.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MigrationMenu.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MigrationMenu.png new file mode 100644 index 0000000..c274a45 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MigrationMenu.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MigrationSuccess.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MigrationSuccess.png new file mode 100644 index 0000000..1a85683 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/MigrationSuccess.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png new file mode 100644 index 0000000..9c27e18 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/OauthclientId.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/OauthclientId.png new file mode 100644 index 0000000..f4d0524 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/OauthclientId.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Platform.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Platform.png new file mode 100644 index 0000000..62688a5 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Platform.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/RedirectedURI.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/RedirectedURI.png new file mode 100644 index 0000000..c2ed0e4 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/RedirectedURI.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/RegisterApplication.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/RegisterApplication.png new file mode 100644 index 0000000..ea37b34 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/RegisterApplication.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png new file mode 100644 index 0000000..4dcbb5c Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.png new file mode 100644 index 0000000..cf6d6d5 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Syncfusion-Item-Template-Gallery-7.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Syncfusion-Item-Template-Gallery-7.png new file mode 100644 index 0000000..0c68bf1 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/Syncfusion-Item-Template-Gallery-7.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/SyncfusionMenu.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/SyncfusionMenu.png new file mode 100644 index 0000000..125b401 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/SyncfusionMenu.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png new file mode 100644 index 0000000..ae10672 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/WebAppRegister.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/WebAppRegister.png new file mode 100644 index 0000000..29de53d Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/WebAppRegister.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png new file mode 100644 index 0000000..bdd9c69 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/WebApplogIn.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/WebApplogIn.png new file mode 100644 index 0000000..1317eef Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/WebApplogIn.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/aadredirecteduri.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/aadredirecteduri.png new file mode 100644 index 0000000..da380c6 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/aadredirecteduri.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png new file mode 100644 index 0000000..c9e9324 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/createmenu.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/createmenu.png new file mode 100644 index 0000000..d5ca8a0 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/createmenu.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/readme1.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/readme1.png new file mode 100644 index 0000000..c2e9934 Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/readme1.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/wasmtemplate.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/wasmtemplate.png new file mode 100644 index 0000000..925526c Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/wasmtemplate.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/webapptemplate.png b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/webapptemplate.png new file mode 100644 index 0000000..32c167b Binary files /dev/null and b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/images/webapptemplate.png differ diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/item-template.md b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/item-template.md new file mode 100644 index 0000000..caee227 --- /dev/null +++ b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/item-template.md @@ -0,0 +1,73 @@ +--- +layout: post +title: Syncfusion PDF Viewer SDK Item Template | WinForms | WPF | Syncfusion +description: Syncfusion PDF Viewer SDK Item Templates provides to add the predefined forms with Syncfusion component in Windows Forms or WPF application. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Add Syncfusion® PDF Viewer Components to the WinForms or WPF Application + +Syncfusion® supports Visual Studio Item Templates to add Syncfusion®PDF Viewer SDK Components to the corresponding applications with their references. + +I> The Syncfusion® PDF Viewer SDK item templates are available from v30.1.37. + +The following steps will guide you in adding the Syncfusion® PDF Viewer SDK components to your Visual Studio WinForms or WPF application. + +## Add Components using Syncfusion® PDF Viewer SDK Item Template + +1. Open a new or existing WinForms or WPF application. + + **Option 1:** + + From the **Solution Explorer, right-click** on the WinForms or WPF application. Choose **Add Syncfusion® PDF Viewer...**. + + ![Choose Add Syncfusion® Item option from right click project](images/Add-Syncfusion-item.png) + + **Option 2:** + + Click **Extensions > Essential Studio® for PDF Viewer SDK > Add Syncfusion® PDF Viewer…** in Visual Studio. + + ![Choose Add Syncfusion® Item option from menu](images/Add-item.png) + +2. The Syncfusion® PDF Viewer SDK Item Template wizard will be launched, displaying available components for the selected platform (WinForms or WPF). + + - Windows Forms: + + ![Syncfusion® WinForms PDF Viewer SDK Item template Components](images/Add-Syncfusion-ui.png) + + - WPF: + + ![Syncfusion® WPF PDF Viewer SDK Item template Components](images/Add-Syncfusion-ui1.png) + +3. Select the Components from the Component list within your PDF Viewer SDK Item template. The features associated with the selected Component will be presented. + +4. Choose an assembly reference option such as GAC location, Essential Studio® installed location, or NuGet packages to specify where the required Syncfusion® assemblies are added to the project. + + N> If the Syncfusion® Essential WindowsForm or WPF build is installed, the Installed location and GAC options will be enabled. Without installing the Syncfusion® Essential WindowsForm or WPF setup, use the NuGet option. The GAC option will not be available when using the Syncfusion® WinForms Components in a .NET Core application. The Version drop-down lists the installed WinForms versions. + +5. Click **Add**, and a pop-up will appear providing information about adding Component **files** and **NuGet/Assemblies** details. + + - Windows Forms: + + ![Syncfusion® WinForms PDF Viewer SDK Item template details](images/Add-Syncfusion-item-3.png) + + - WPF: + + ![Syncfusion® WPF PDF Viewer SDK Item template details](images/Add-Syncfusion-item-4.png) + + +6. Click **OK** to incorporate the chosen Components into the application, along with the necessary Syncfusion® assemblies. + + - Windows Forms: + + ![Syncfusion® WinForms PDF Viewer SDK Item template Gallery](images/Add-Syncfusion-item-details.png) + + - WPF: + + ![Syncfusion® WPF PDF Viewer SDK Item template Gallery](images/Add-Syncfusion-item-details1.png) + +7. Then, Syncfusion® licensing registration required message box will be shown if you installed the trial setup or NuGet packages since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.Syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-Syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion® license key to your project. Refer to this [blog](https://blog.Syncfusion.com/post/Whats-New-in-2018-Volume-2-Licensing-Changes-in-the-1620x-Version-of-Essential-Studio.aspx) post for understanding the licensing changes introduced in Essential Studio®. + + ![Syncfusion® PDF Viewer SDK Item template Gallery](images/Syncfusion-Item-Template-Gallery-7.png) \ No newline at end of file diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/overview.md b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/overview.md new file mode 100644 index 0000000..f690eb7 --- /dev/null +++ b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/overview.md @@ -0,0 +1,20 @@ +--- +layout: post +title: Overview of Syncfusion® PDF Viewer SDK Extension for Visual Studio | Syncfusion +description: Learn here all about introduction on Syncfusion® PDF Viewer SDK extension for Visual Studio which made integration ease. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Overview of Blazor Extension for Visual Studio + +Syncfusion® PDF Viewer SDK Extension for Visual Studio seamelessly integrates Document processing - PDF component into Blazor, .NET MAUI, WPF and Windows Forms applications by configuring the Syncfusion® NuGet packages and themes. This empowers developers to effortlessly view, edit, and print PDF files, enhancing your app's document management capabilities with ease and efficiency. + +The Syncfusion® PDF Viewer SDK extensions provides the following add-ins in Visual Studio: + +[Template-Studio](template-studio): Creates Syncfusion® applications based on platform (Blazor, .NET MAUI, WPF, Windows Forms) with required configuration for development with Syncfusion® PDF Viewer SDK components. + +[Code Generator](code-generator): Adds Syncfusion® PDF Viewer SDK component code in razor file of Blazor Application at required place. + +[Item Template](item-template): Adds predefined Syncfusion® PDF Viewer SDK controls and the required assemblies in WinForms and WPF Application. diff --git a/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/template-studio.md b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/template-studio.md new file mode 100644 index 0000000..43968b9 --- /dev/null +++ b/Extension/PDF-Viewer-SDK-Extension/Visual-Studio/template-studio.md @@ -0,0 +1,409 @@ +--- +layout: post +title: Template Studio in PDF Viewer SDK - Syncfusion +description: Learn here about how to create an application based on platform selection (Blazor, .NET MAUI, WPF and Windows Forms) using Syncusion® PDF Viewer SDK Components with the help of template studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Syncfusion® PDF Viewer SDK Template Studio + +Syncfusion® provides the PDF Viewer SDK Template Studio, which allows you to create a Syncfusion application based on the platform selection such as Blazor, .NET MAUI, WPF and Windows Forms using Syncfusion® PDF Viewer SDK components. The Syncfusion® application is created with the required Syncfusion® NuGet references, namespaces, styles, and component render code. The Template Studio includes an easy-to-use project wizard that guides you through the process of creating an application with Syncfusion® PDF Viewer SDK components. + +The steps below will assist you to create your **Syncfusion® Application** through **Visual Studio 2022**: + +N> Before use the Syncfusion® Project Template, check whether the Syncfusion® PDF Viewer SDK Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/download-and-installation) help topic. + +1. Open Visual Studio 2022. + +2. To create a Syncfusion® application, use either one of the following options: + + **Option 1** + + Choose **Extension -> Syncfusion -> Essential Studio® for PDF Viewer SDK -> Create New Syncfusion Project...** from the **Visual Studio menu**. + + ![CreateMenu](images/createmenu.png) + + **Option 2** + + Choose **File -> New -> Project** from the menu. This launches a new dialogue for creating a new application. Syncfusion® templates can be found by filtering the application type for **Syncfusion** or by entering **Syncfusion** as a keyword in the search option. + + ![CreateNewWindow](images/CreateNewWindow.png) + +3. Select the **Syncfusion® PDF Viewer SDK Template Studio** and click **Next**. + + ![CreateNewWizard](images/CreateNewWizard.png) + +4. The Syncfusion® PDF Viewer SDK Template Studio wizard will be launched. Select the platform to add the Syncfusion® PDF Viewer SDK components. + + ![PlatformSelection](images/Platform.png) + +5. Based on the platform selection, choose the configurations and create the respective application to add the Syncfusion® PDF Viewer SDK components. + + - Blazor Platform: + + - **Project type section** + + Choose one of the Syncfusion® Blazor application types based on the version of the .NET SDK you are using. + + | .NET SDK version | Supported Syncfusion Blazor Application Type | + | ---------------- | -------------------------------------------- | + | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion Blazor Web App | + | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion Blazor WebAssembly App | + + > **Note:** Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + + In the **Syncfusion Blazor Web App** application type, you can configure the following options: + + + + + + + + + + + + +
+ Interactivity type + + Server, WebAssembly, Auto (Server and WebAssembly) +
+ Interactivity location + + Global, Per page/component +
+ + ![WebAppTemplate](images/webapptemplate.png) + + In the **Syncfusion Blazor WebAssembly App** application type, you can choose Progressive Web Application. + + ![WASMTemplate](images/wasmtemplate.png) + + > **Note:** The Progressive Web Application will be enabled if .NET 8.0 version or higher is installed. + + You can choose the required (.NET 9.0 and .NET 8.0), themes, https configuration, localization option, authentication type, Blazor Web App, and Blazor Web Assembly application types. + + Depending on your Syncfusion Blazor Application Type, refer to the table below for supported authentication types. + + | Syncfusion Blazor Application Type | Supported Authentication Types | + | ------------- | ------------- | + | Syncfusion Blazor Web App | None and Individual Accounts | + | Syncfusion Blazor WebAssembly App | None, Individual Accounts and Microsoft Identity Platform | + + Click **Create** button. The Syncfusion® Blazor application has been created. The created Syncfusion® Blazor app has the Syncfusion NuGet packages, styles, and the render code for Syncfusion® PDF Viewer SDK component. + + ![Readme](images/readme.png) + + - . NET MAUI Platform + + - **Configuration Section** + + You can select the required .NET Core Version (.NET 8.0 or .NET 9.0) and themes + + ![Configuration](images/ConfigMaui.png) + + Click **Create** button. The Syncfusion® .NET MAUI application has been created. The created Syncfusion® .NET MAUI application has the Syncfusion NuGet packages, styles, and the render code for Syncfusion® PDF Viewer SDK component. + + ![Readme](images/readme1.png) + + - WPF and Windows Forms Platform + + - **Configuration Section** + + You will have the option to specify your preferred .NET Framework Version, select the desired language(CSharp or Visual Basic), and choose the reference type according to your requirements. + + ![Configuration](images/Config.png) + + > **Note:** The installed location and GAC options will be available only after the Syncfusion® Essential® WPF or Windows Forms setup has been installed. Use the NuGet option instead of installing the Syncfusion® Essential® WPF or Windows Forms setup. Also, the GAC option will not be available when you choose .NET 6.0, .NET 7.0, and .NET 8.0 from the project type option in Visual Studio. + + Click **Create** button. The Syncfusion® WPF or Windows Forms application has been created. The created application has the Syncfusion NuGet packages, styles, and the render code for Syncfusion® PDF Viewer SDK component. + + - WPF: + + ![Readme](images/readme2.png) + + - Windows Forms: + + ![Readme](images/readme3.png) + +9. The Syncfusion® application based on the platform selection configures with most recent Syncfusion® NuGet packages version, selected style, namespaces, selected authentication, and component render code for Syncfusion® PDF Viewer SDK components. + +10. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio®. + +## Authentication Configuration for Blazor Platform + +We need to register the created application in the Google API Console for Individual Accounts and in Azure Active Directory for the Microsoft Identity Platform. From the Google API Console registration, we can obtain the client ID for Individual Accounts. From the Azure Active Directory registration, we can obtain the tenant ID and application client ID for the Microsoft Identity Platform. We need to configure these ID values in the created applications; only then will the application run correctly with authentication support. + +### Individual Accounts Authentication + +#### Web Application and Progressive Web Application + +1. Go to below credentials page for the Google cloud platform API console. + + + +2. Click Create Credentials and OAuth Client Id. + + ![Google API console credentials page](images/GoogelAPIConsoleCredentials.png) + + ![Google API Oauth client Id](images/OauthclientId.png) + +3. Select Application type as Web Application in client Id creation. + + ![ApplicationType](images/ClientIdApplicationtype.png) + +4. Add your publish URL link as an Authorized URI and login URL as Redirected URI. + + ![RedirectedURI](images/RedirectedURI.png) + +5. Click save then OAuth client id will be created and copy that credential. + + ![ClientIdCreation](images/ClientIdCreation.png) + +6. Add that Client Id, and RedirectUri in appsettings.json file of your application. + + ![ClinetIdConfiguration](images/ClinetIdConfiguration.png) + +7. Change the build configuration bind as google from Local in program.cs file. + + ![buildconfigurationbind](images/buildconfigurationbind.png) + +### Microsoft Identity Platform Authentication + +#### Server Application + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI like {Redirect URI}/signin-oidc and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +7. Configure those client tenant id, application id, and domain in your application appsettings.json file. + + ![Project configuration](images/Configuration1.png) + +#### Web Application and Progressive Web Application + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +8. Configure those client tenant id and application id in your application appsettings.json file. + + ![Clinet ID and Tenant ID configuration](images/ClinetTenantIdConfiguration.png) + +#### ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application + +##### Client project Registration and Configuration + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +8. Configure those client tenant id and application id in your application appsettings.json file. + + ![Clinet ID and Tenant ID configuration](images/ClinetTenantIdConfiguration.png) + +##### Server project Registration and configuration + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![Server App Registration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Server Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Add a scope API in Expose an API page. + + ![Add scope API](images/AddScopeAPI.png) + +8. Give scope name, admin consent display name, and admin consent description and click Add scope. Scope API will be created, copy those scope API Value. + + ![Add scope API configuration](images/AddScopeAPI1.png) + +9. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +10. Configure those client tenant id, application id, added scope api id, and domain in your application appsettings.json file. + + ![Project configuration](images/Configuration1.png) + +11. Configure the scope API in client application program.cs file below highlighted place. + + ![Scope API configuration](images/ScopeAPIConfiguration.PNG) + +### Run application + +You can run the application and see the Syncfusion® components you selected. Select a component to see component output. + +![Blazor Template output page](images/HomePage.png) + +You can select a culture language in combo box at top right on the output page to apply the culture in the application. + +![Blazor Template output page](images/Localization.png) + +N> **Note:** Above culture combo box will be enabled in sample output if localization option is selected in configuration window from Syncfusion Blazor Template Studio wizard. + +## Register and Login Application + +### Individual Authentication + +#### Blazor Web App + +##### Applying Database Migrations and User Registration in the .NET 8.0 and .NET 9.0 Blazor Web App + +##### Applying Database Migrations: + +In the Blazor Web App, it's essential to apply pending migrations to the database before proceeding with user registration. Choose one of the following options: + +**Option 1: Using Visual Studio Package Manager Console** + +Navigate to **View -> Other Windows -> Package Manager Console** in Visual Studio. + +Run the following command in the Package Manager Console: + + ```Update-Database``` + +**Option 2: Using Command Prompt** + +Open a command prompt in your project directory and execute the following command: + + ```dotnet ef database update``` + +##### User Registration: + +1. Launch the application and register by submitting your email address and creating a password. + + ![Register the WebApp](images/WebAppRegister.png) + +2. Confirm your registration by clicking **Click here to confirm your account.** + + ![Confirming the WebApp registration](images/WebAppRegisterConfirmation.png) + +3. Submit your registered email address and password to log in to the application. + + ![LogIn to the WebApp](images/WebApplogIn.png) + +#### Server Application, ASP.NET Core hosted Web Application, and Progressive Web Application with ASP.NET Core hosted + +1. For register the application, submit your email address and create a password. + + ![Register the application](images/RegisterApplication.png) + +2. Confirming registration by clicking **Click here to confirm your account.** + + ![Register the confirmation](images/RegisterConfirmation.png) + +3. Submit your registered email address and password to login the application. + + ![login to the application](images/Login.png) + +#### Web Application and Progressive Web Application + +1. Login to the application using Gmail accounts. + + ![Google login](images/GoogleLogin.png) + +### Microsoft Identity Platform + +#### Server Application, Web Application, Progressive Application, ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application + +1. Login to your application using your Microsoft account. + +2. Accept permission request of your application. + + ![Accept permission](images/MicrosoftAuthentication.png) diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/code-generator.md b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/code-generator.md new file mode 100644 index 0000000..a89a4a4 --- /dev/null +++ b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/code-generator.md @@ -0,0 +1,44 @@ +--- +layout: post +title: Code Generator in Spreadsheet Editor SDK | Syncfusion +description: Learn here about adding the Spreadsheet Editor SDK Component using Code Generator of Syncfusion Spreadsheet Editor SDK Extension for Visual Studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Add Blazor Spreadsheet Editor SDK component code + +Syncfusion® offers a Code Generator component for Blazor platform, enabling seamless integration of the Syncfusion® Spreadsheet Editor SDK component into your Razor files with minimal effort. It automatically inserts the necessary code, including Syncfusion® Spreadsheet Editor SDK components, required namespaces, styles, and NuGet references, at your chosen location. It simplifies the process by interacting with data models and embedding the Syncfusion® Spreadsheet Editor SDK components with the desired features directly into your application. + +The steps below will assist you to add the Syncfusion® Spreadsheet Editor SDK components code in your Blazor application through **Visual Studio 2022**: + +N> Before using the Syncfusion® Blazor Spreadsheet Editor SDK Code Generator, check whether the Syncfusion® Blazor Spreadsheet Editor SDK Extension is installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. + +1. Open your existing Blazor application or create a new Blazor application in the Visual Studio 2019 or Visual Studio 2022. + +2. To open the Syncfusion® Blazor Spreadsheet Editor SDK Code Generator, select one of the options below in the Razor file, and then add Syncfusion® Spreadsheet Editor SDK components: + + **Option 1:** + + To generate a specific component code, right-click on the editor of the Razor file at the required line and Select the **Syncfusion® Blazor Spreadsheet Editor SDK Code Generator...** + + ![CodeGeneratorCommand](images/Code-Generator-Command.png) + + **Option 2:** + + Open the .razor file and place the cursor at the required line then choose **Extension -> Syncfusion® -> Essential Studio® for Spreadsheet Editor SDK -> Syncfusion® Blazor Spreadsheet Editor SDK Code Generator…** from the Visual Studio menu. + + ![CodeGeneratorMenu](images/Code-Generator-Menu.png) + + It generates the selected Syncfusion® Spreadsheet Editor SDK component render code and inserts it wherever the cursor is positioned. + +![ComponentRenderCode](images/Code-Generator-ComponentRenderCode.png) + +3. In the Output window, select the **Syncfusion® Blazor Spreadsheet Editor SDK Code Generator** from the **“Show output from”** drop-down to see the changes made to your application. + + ![OutputWindow](images/Code-Generator-OutputWindow.png) + +4. The selected Syncfusion® Blazor Spreadsheet Editor SDK component code is inserted into the active Razor file, and the application is configured with the latest NuGet package, styles, and namespaces required for the selected component. + +5. If you have installed the trial setup or NuGet packages from nuget.org, you must register the Syncfusion® license key to your application as Syncfusion® has introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2) post to know more about the licensing changes introduced in Essential Studio®. diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/download-and-installation.md b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/download-and-installation.md new file mode 100644 index 0000000..4bb8dde --- /dev/null +++ b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/download-and-installation.md @@ -0,0 +1,71 @@ +--- +layout: post +title: Download and Installation of Syncfusion® Spreadsheet Editor SDK Extension | Syncfusion +description: Check out the documentation for download and installation of Syncfusion® Spreadsheet Editor SDK Extension for Visual Studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Download and Installation + +Syncfusion® publishes the Visual Studio extension in the below Visual Studio marketplace link. You can either install it directly from Visual Studio or download and install it from the Visual Studio marketplace. + +[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=) + + +## Prerequisites + +The following software prerequisites must be installed to install the Syncfusion® Spreadsheet Editor SDK extension, as well as to creating, adding snippet, converting, and upgrading applications. + +* [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/). + +* [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet). + +* [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet). + +## Install through the Visual Studio Manage Extensions + +The steps below assist you to how to install the Syncfusion® Spreadsheet Editor SDK extensions from **Visual Studio Manage Extensions**. + +1. Open the Visual Studio 2022. + +2. Navigate to **Extension ->Manage Extensions** and open the Manage Extensions. + +3. On the left, click the **Online** tab and type **"Syncfusion® Spreadsheet Editor SDK"** in the **search box**. + + ![Online-Manage-Extension-window](images/OnlineExtension.png) + +4. Click the **Download** button in the **“Syncfusion® Spreadsheet Editor SDK Template Studio”** extensions. + +5. Close all Visual Studio instances after downloading the extensions to begin the installation process. You will see the following VSIX installation prompt. + + ![VSIX-Installation-Window](images/VSIXinstallation.png) + +6. Click the **Modify** button. + +7. After the installation is complete, open Visual Studio. + +8. Now, under the menu **Extensions**, you can use the Syncfusion® extensions from the Visual Studio. + + ![SyncfusionMenu](images/SyncfusionMenu.png) + +## Install from the Visual Studio Marketplace + +The steps below illustrate how to download and install the Syncfusion® Spreadsheet Editor SDK extension from the Visual Studio Marketplace. + +1. Download the Syncfusion® Spreadsheet Editor SDK Extension from the below Visual Studio Marketplace. + + [Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) + +2. Close all Visual Studio instances running, if any. + +3. Double-click to install the downloaded VSIX file. You will see the VSIX installation prompts with the corresponding installed Visual Studio version checkbox for select the Visual Studio to install extension. + + ![VSIX-Installation-Window](images/VSIXinstallation1.png) + +4. Click the **Install** button. + +5. After the installation is complete, open Visual Studio. You can now use Syncfusion® extensions from the Visual Studio under the **Extensions** menu. + + ![SyncfusionMenu](images/SyncfusionMenu.png) \ No newline at end of file diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-3.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-3.png new file mode 100644 index 0000000..57c618b Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-3.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-4.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-4.png new file mode 100644 index 0000000..f9f8669 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-4.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details.png new file mode 100644 index 0000000..2b4ddbc Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details1.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details1.png new file mode 100644 index 0000000..46cdd6a Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item-details1.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item.png new file mode 100644 index 0000000..2535be1 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-Syncfusion-item.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-item.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-item.png new file mode 100644 index 0000000..871d68d Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Add-item.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI.png new file mode 100644 index 0000000..5e5f066 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png new file mode 100644 index 0000000..87567a4 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AppRegistration.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AppRegistration.png new file mode 100644 index 0000000..10d90b9 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AppRegistration.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png new file mode 100644 index 0000000..91b41ab Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Backuplocation.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Backuplocation.png new file mode 100644 index 0000000..5d37d91 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Backuplocation.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png new file mode 100644 index 0000000..d36667a Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClientIdCreation.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClientIdCreation.png new file mode 100644 index 0000000..aa14ff4 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClientIdCreation.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png new file mode 100644 index 0000000..8db726c Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantId.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantId.png new file mode 100644 index 0000000..76d5584 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantId.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png new file mode 100644 index 0000000..c30adee Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Code-Generator-ComponentRenderCode.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Code-Generator-ComponentRenderCode.png new file mode 100644 index 0000000..bd8c4ae Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Code-Generator-ComponentRenderCode.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Code-Generator-OutputWindow.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Code-Generator-OutputWindow.png new file mode 100644 index 0000000..58e6899 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Code-Generator-OutputWindow.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Configuration1.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Configuration1.png new file mode 100644 index 0000000..ee6fa3e Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Configuration1.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/CreateNewWindow.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/CreateNewWindow.png new file mode 100644 index 0000000..50a5dd6 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/CreateNewWindow.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/CreateNewWizard.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/CreateNewWizard.png new file mode 100644 index 0000000..3da1c28 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/CreateNewWizard.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png new file mode 100644 index 0000000..7030999 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/GoogleLogin.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/GoogleLogin.png new file mode 100644 index 0000000..b8d0e1f Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/GoogleLogin.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/HomePage.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/HomePage.png new file mode 100644 index 0000000..901cd28 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/HomePage.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Localization.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Localization.png new file mode 100644 index 0000000..172d008 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Localization.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Login.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Login.png new file mode 100644 index 0000000..8067ba1 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Login.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png new file mode 100644 index 0000000..c5bc24d Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Migration.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Migration.png new file mode 100644 index 0000000..9e15f7c Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Migration.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Migration1.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Migration1.png new file mode 100644 index 0000000..a4e35a6 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Migration1.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Migration2.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Migration2.png new file mode 100644 index 0000000..2004bd7 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/Migration2.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MigrationAddin.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MigrationAddin.png new file mode 100644 index 0000000..0ec7ac0 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MigrationAddin.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MigrationMenu.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MigrationMenu.png new file mode 100644 index 0000000..c274a45 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MigrationMenu.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MigrationSuccess.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MigrationSuccess.png new file mode 100644 index 0000000..1a85683 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/MigrationSuccess.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png new file mode 100644 index 0000000..9c27e18 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/OauthclientId.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/OauthclientId.png new file mode 100644 index 0000000..f4d0524 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/OauthclientId.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/RedirectedURI.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/RedirectedURI.png new file mode 100644 index 0000000..c2ed0e4 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/RedirectedURI.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/RegisterApplication.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/RegisterApplication.png new file mode 100644 index 0000000..ea37b34 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/RegisterApplication.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png new file mode 100644 index 0000000..4dcbb5c Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.png new file mode 100644 index 0000000..cf6d6d5 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/SyncfusionMenu.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/SyncfusionMenu.png new file mode 100644 index 0000000..1bb2639 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/SyncfusionMenu.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png new file mode 100644 index 0000000..8912a7d Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/WebAppRegister.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/WebAppRegister.png new file mode 100644 index 0000000..29de53d Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/WebAppRegister.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png new file mode 100644 index 0000000..bdd9c69 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/WebApplogIn.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/WebApplogIn.png new file mode 100644 index 0000000..1317eef Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/WebApplogIn.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/aadredirecteduri.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/aadredirecteduri.png new file mode 100644 index 0000000..da380c6 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/aadredirecteduri.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png new file mode 100644 index 0000000..c9e9324 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/createmenu.png b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/createmenu.png new file mode 100644 index 0000000..9993de4 Binary files /dev/null and b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/images/createmenu.png differ diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/item-template.md b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/item-template.md new file mode 100644 index 0000000..6b756e4 --- /dev/null +++ b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/item-template.md @@ -0,0 +1,73 @@ +--- +layout: post +title: Syncfusion Spreadsheet Editor SDK Item Template | WinForms | WPF | Syncfusion +description: Syncfusion Spreadsheet Editor SDK Item Templates provides to add the predefined forms with Syncfusion component in Windows Forms or WPF application. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Add Syncfusion® Spreadsheet Editor SDK Components to the WinForms or WPF Application + +Syncfusion® supports Visual Studio Item Templates to add Syncfusion®Spreadsheet Editor SDK Components to the corresponding applications with their references. + +I> The Syncfusion® Spreadsheet Editor SDK item templates are available from v30.1.37. + +The following steps will guide you in adding the Syncfusion® Spreadsheet Editor SDK components to your Visual Studio WinForms or WPF application. + +## Add Components using Syncfusion® Spreadsheet Editor SDK Item Template + +1. Open a new or existing WinForms or WPF application. + + **Option 1:** + + From the **Solution Explorer, right-click** on the WinForms or WPF application. Choose **Add Syncfusion® Spreadsheet...**. + + ![Choose Add Syncfusion® Item option from right click project](images/Add-Syncfusion-item.png) + + **Option 2:** + + Click **Extensions > Essential Studio® for Spreadsheet Editor SDK > Add Syncfusion® Spreadsheet…** in Visual Studio. + + ![Choose Add Syncfusion® Item option from menu](images/Add-item.png) + +2. The Syncfusion® Spreadsheet Editor SDK Item Template wizard will be launched, displaying available components for the selected platform (WinForms or WPF). + + - Windows Forms: + + ![Syncfusion® WinForms Spreadsheet Editor SDK Item template Components](images/Add-Syncfusion-ui.png) + + - WPF: + + ![Syncfusion® WPF Spreadsheet Editor SDK Item template Components](images/Add-Syncfusion-ui1.png) + +3. Select the Components from the Component list within your Spreadsheet Editor SDK Item template. The features associated with the selected Component will be presented. + +4. Choose an assembly reference option such as GAC location, Essential Studio® installed location, or NuGet packages to specify where the required Syncfusion® assemblies are added to the project. + + N> If the Syncfusion® Essential WindowsForm or WPF build is installed, the Installed location and GAC options will be enabled. Without installing the Syncfusion® Essential WindowsForm or WPF setup, use the NuGet option. The GAC option will not be available when using the Syncfusion® WinForms Components in a .NET Core application. The Version drop-down lists the installed WinForms versions. + +5. Click **Add**, and a pop-up will appear providing information about adding Component **files** and **NuGet/Assemblies** details. + + - Windows Forms: + + ![Syncfusion® WinForms Spreadsheet Editor SDK Item template details](images/Add-Syncfusion-item-3.png) + + - WPF: + + ![Syncfusion® WPF Spreadsheet Editor SDK Item template details](images/Add-Syncfusion-item-4.png) + + +6. Click **OK** to incorporate the chosen Components into the application, along with the necessary Syncfusion® assemblies. + + - Windows Forms: + + ![Syncfusion® WinForms Spreadsheet Editor SDK Item template Gallery](images/Add-Syncfusion-item-details.png) + + - WPF: + + ![Syncfusion® WPF Spreadsheet Editor SDK Item template Gallery](images/Add-Syncfusion-item-details1.png) + +7. Then, Syncfusion® licensing registration required message box will be shown if you installed the trial setup or NuGet packages since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.Syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-Syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion® license key to your project. Refer to this [blog](https://blog.Syncfusion.com/post/Whats-New-in-2018-Volume-2-Licensing-Changes-in-the-1620x-Version-of-Essential-Studio.aspx) post for understanding the licensing changes introduced in Essential Studio®. + + ![Syncfusion® Spreadsheet Editor SDK Item template Gallery](images/Syncfusion-Item-Template-Gallery-7.png) \ No newline at end of file diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/overview.md b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/overview.md new file mode 100644 index 0000000..2ef775c --- /dev/null +++ b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/overview.md @@ -0,0 +1,20 @@ +--- +layout: post +title: Overview of Syncfusion® Spreadsheet Editor SDK Extension for Visual Studio | Syncfusion +description: Learn here all about introduction on Syncfusion® Spreadsheet Editor SDK extension for Visual Studio which made integration ease. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Overview of Blazor Extension for Visual Studio + +The Syncfusion® Spreadsheet Editor SDK Extension for Visual Studio seamlessly integrates Spreadsheet component into Blazor, WPF and Windows Forms applications. By utilizing Syncfusion’s NuGet packages and customizable themes, developers can effortlessly enable robust Excel document viewing, editing, and printing capabilities. Enhance your application’s document management with a streamlined, efficient, and versatile solution. + +The Syncfusion® Spreadsheet Editor SDK extensions provides the following add-ins in Visual Studio: + +[Template-Studio](template-studio): Creates Syncfusion® applications based on platform (Blazor, WPF, Windows Forms) with required configuration for development with Syncfusion® Spreadsheet Editor SDK components. + +[Code Generator](code-generator): Adds Syncfusion® Spreadsheet Editor SDK component code in razor file of Blazor Application at required place. + +[Item Template](item-template): Adds predefined Syncfusion® Spreadsheet Editor SDK controls and the required assemblies in WinForms and WPF Application. diff --git a/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/template-studio.md b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/template-studio.md new file mode 100644 index 0000000..d6d3fa6 --- /dev/null +++ b/Extension/Spreadsheet-Editor-SDK-Extension/Visual-Studio/template-studio.md @@ -0,0 +1,397 @@ +--- +layout: post +title: Template Studio in Spreadsheet Editor SDK - Syncfusion +description: Learn here about how to create an application based on platform selection (Blazor, WPF and Windows Forms) using Syncusion® Spreadsheet Editor SDK Components with the help of template studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Syncfusion® Spreadsheet Editor SDK Template Studio + +Syncfusion® provides the Spreadsheet Editor SDK Template Studio, which allows you to create a Syncfusion application based on the platform selection such as Blazor, WPF and Windows Forms using Syncfusion® Spreadsheet Editor SDK components. The Syncfusion® application is created with the required Syncfusion® NuGet references, namespaces, styles, and component render code. The Template Studio includes an easy-to-use project wizard that guides you through the process of creating an application with Syncfusion® Spreadsheet Editor SDK components. + +The steps below will assist you to create your **Syncfusion® Application** through **Visual Studio 2022**: + +N> Before use the Syncfusion® Project Template, check whether the Syncfusion® Spreadsheet Editor SDK Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/download-and-installation) help topic. + +1. Open Visual Studio 2022. + +2. To create a Syncfusion® application, use either one of the following options: + + **Option 1** + + Choose **Extension -> Syncfusion -> Essential Studio® for Spreadsheet Editor SDK -> Create New Syncfusion Project...** from the **Visual Studio menu**. + + ![CreateMenu](images/createmenu.png) + + **Option 2** + + Choose **File -> New -> Project** from the menu. This launches a new dialogue for creating a new application. Syncfusion® templates can be found by filtering the application type for **Syncfusion** or by entering **Syncfusion** as a keyword in the search option. + + ![CreateNewWindow](images/CreateNewWindow.png) + +3. Select the **Syncfusion® Spreadsheet Editor SDK Template Studio** and click **Next**. + + ![CreateNewWizard](images/CreateNewWizard.png) + +4. The Syncfusion® Spreadsheet Editor SDK Template Studio wizard will be launched. Select the platform to add the Syncfusion® Spreadsheet Editor SDK components. + + ![PlatformSelection](images/Platform.png) + +5. Based on the platform selection, choose the configurations and create the respective application to add the Syncfusion® Spreadsheet Editor SDK components. + + - Blazor Platform: + + - **Project type section** + + Choose one of the Syncfusion® Blazor application types based on the version of the .NET SDK you are using. + + | .NET SDK version | Supported Syncfusion Blazor Application Type | + | ---------------- | -------------------------------------------- | + | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion Blazor Web App | + | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion Blazor WebAssembly App | + + > **Note:** Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + + In the **Syncfusion Blazor Web App** application type, you can configure the following options: + + + + + + + + + + + + +
+ Interactivity type + + Server, WebAssembly, Auto (Server and WebAssembly) +
+ Interactivity location + + Global, Per page/component +
+ + ![WebAppTemplate](images/webapptemplate.png) + + In the **Syncfusion Blazor WebAssembly App** application type, you can choose Progressive Web Application. + + ![WASMTemplate](images/wasmtemplate.png) + + > **Note:** The Progressive Web Application will be enabled if .NET 8.0 version or higher is installed. + + You can choose the required (.NET 9.0 and .NET 8.0), themes, https configuration, localization option, authentication type, Blazor Web App, and Blazor Web Assembly application types. + + Depending on your Syncfusion Blazor Application Type, refer to the table below for supported authentication types. + + | Syncfusion Blazor Application Type | Supported Authentication Types | + | ------------- | ------------- | + | Syncfusion Blazor Web App | None and Individual Accounts | + | Syncfusion Blazor WebAssembly App | None, Individual Accounts and Microsoft Identity Platform | + + Click **Create** button. The Syncfusion® Blazor application has been created. The created Syncfusion® Blazor app has the Syncfusion NuGet packages, styles, and the render code for Syncfusion® Spreadsheet Editor SDK component. + + ![Readme](images/readme.png) + + - WPF and Windows Forms Platform + + - **Configuration Section** + + You will have the option to specify your preferred .NET Framework Version, select the desired language(CSharp or Visual Basic), and choose the reference type according to your requirements. + + ![Configuration](images/Config.png) + + > **Note:** The installed location and GAC options will be available only after the Syncfusion® Essential® WPF or Windows Forms setup has been installed. Use the NuGet option instead of installing the Syncfusion® Essential® WPF or Windows Forms setup. Also, the GAC option will not be available when you choose .NET 6.0, .NET 7.0, and .NET 8.0 from the project type option in Visual Studio. + + Click **Create** button. The Syncfusion® WPF or Windows Forms application has been created. The created application has the Syncfusion NuGet packages, styles, and the render code for Syncfusion® Spreadsheet Editor SDK component. + + - WPF: + + ![Readme](images/readme2.png) + + - Windows Forms: + + ![Readme](images/readme3.png) + +9. The Syncfusion® application based on the platform selection configures with most recent Syncfusion® NuGet packages version, selected style, namespaces, selected authentication, and component render code for Syncfusion® Spreadsheet Editor SDK components. + +10. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio®. + +## Authentication Configuration for Blazor Platform + +We need to register the created application in the Google API Console for Individual Accounts and in Azure Active Directory for the Microsoft Identity Platform. From the Google API Console registration, we can obtain the client ID for Individual Accounts. From the Azure Active Directory registration, we can obtain the tenant ID and application client ID for the Microsoft Identity Platform. We need to configure these ID values in the created applications; only then will the application run correctly with authentication support. + +### Individual Accounts Authentication + +#### Web Application and Progressive Web Application + +1. Go to below credentials page for the Google cloud platform API console. + + + +2. Click Create Credentials and OAuth Client Id. + + ![Google API console credentials page](images/GoogelAPIConsoleCredentials.png) + + ![Google API Oauth client Id](images/OauthclientId.png) + +3. Select Application type as Web Application in client Id creation. + + ![ApplicationType](images/ClientIdApplicationtype.png) + +4. Add your publish URL link as an Authorized URI and login URL as Redirected URI. + + ![RedirectedURI](images/RedirectedURI.png) + +5. Click save then OAuth client id will be created and copy that credential. + + ![ClientIdCreation](images/ClientIdCreation.png) + +6. Add that Client Id, and RedirectUri in appsettings.json file of your application. + + ![ClinetIdConfiguration](images/ClinetIdConfiguration.png) + +7. Change the build configuration bind as google from Local in program.cs file. + + ![buildconfigurationbind](images/buildconfigurationbind.png) + +### Microsoft Identity Platform Authentication + +#### Server Application + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI like {Redirect URI}/signin-oidc and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +7. Configure those client tenant id, application id, and domain in your application appsettings.json file. + + ![Project configuration](images/Configuration1.png) + +#### Web Application and Progressive Web Application + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +8. Configure those client tenant id and application id in your application appsettings.json file. + + ![Clinet ID and Tenant ID configuration](images/ClinetTenantIdConfiguration.png) + +#### ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application + +##### Client project Registration and Configuration + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +8. Configure those client tenant id and application id in your application appsettings.json file. + + ![Clinet ID and Tenant ID configuration](images/ClinetTenantIdConfiguration.png) + +##### Server project Registration and configuration + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![Server App Registration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Server Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Add a scope API in Expose an API page. + + ![Add scope API](images/AddScopeAPI.png) + +8. Give scope name, admin consent display name, and admin consent description and click Add scope. Scope API will be created, copy those scope API Value. + + ![Add scope API configuration](images/AddScopeAPI1.png) + +9. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +10. Configure those client tenant id, application id, added scope api id, and domain in your application appsettings.json file. + + ![Project configuration](images/Configuration1.png) + +11. Configure the scope API in client application program.cs file below highlighted place. + + ![Scope API configuration](images/ScopeAPIConfiguration.PNG) + +### Run application + +You can run the application and see the Syncfusion® components you selected. Select a component to see component output. + +![Blazor Template output page](images/HomePage.png) + +You can select a culture language in combo box at top right on the output page to apply the culture in the application. + +![Blazor Template output page](images/Localization.png) + +N> **Note:** Above culture combo box will be enabled in sample output if localization option is selected in configuration window from Syncfusion Blazor Template Studio wizard. + +## Register and Login Application + +### Individual Authentication + +#### Blazor Web App + +##### Applying Database Migrations and User Registration in the .NET 8.0 and .NET 9.0 Blazor Web App + +##### Applying Database Migrations: + +In the Blazor Web App, it's essential to apply pending migrations to the database before proceeding with user registration. Choose one of the following options: + +**Option 1: Using Visual Studio Package Manager Console** + +Navigate to **View -> Other Windows -> Package Manager Console** in Visual Studio. + +Run the following command in the Package Manager Console: + + ```Update-Database``` + +**Option 2: Using Command Prompt** + +Open a command prompt in your project directory and execute the following command: + + ```dotnet ef database update``` + +##### User Registration: + +1. Launch the application and register by submitting your email address and creating a password. + + ![Register the WebApp](images/WebAppRegister.png) + +2. Confirm your registration by clicking **Click here to confirm your account.** + + ![Confirming the WebApp registration](images/WebAppRegisterConfirmation.png) + +3. Submit your registered email address and password to log in to the application. + + ![LogIn to the WebApp](images/WebApplogIn.png) + +#### Server Application, ASP.NET Core hosted Web Application, and Progressive Web Application with ASP.NET Core hosted + +1. For register the application, submit your email address and create a password. + + ![Register the application](images/RegisterApplication.png) + +2. Confirming registration by clicking **Click here to confirm your account.** + + ![Register the confirmation](images/RegisterConfirmation.png) + +3. Submit your registered email address and password to login the application. + + ![login to the application](images/Login.png) + +#### Web Application and Progressive Web Application + +1. Login to the application using Gmail accounts. + + ![Google login](images/GoogleLogin.png) + +### Microsoft Identity Platform + +#### Server Application, Web Application, Progressive Application, ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application + +1. Login to your application using your Microsoft account. + +2. Accept permission request of your application. + + ![Accept permission](images/MicrosoftAuthentication.png) diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/code-generator.md b/Extension/Word-Editor-SDK-Extension/Visual-Studio/code-generator.md new file mode 100644 index 0000000..d32b42f --- /dev/null +++ b/Extension/Word-Editor-SDK-Extension/Visual-Studio/code-generator.md @@ -0,0 +1,44 @@ +--- +layout: post +title: Code Generator in Word Editor SDK | Syncfusion +description: Learn here about adding the Word Editor SDK Component using Code Generator of Syncfusion Word Editor SDK Extension for Visual Studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Add Blazor Word Editor SDK component code + +Syncfusion® offers a Code Generator component for Blazor platform, enabling seamless integration of the Syncfusion® Word Editor SDK component into your Razor files with minimal effort. It automatically inserts the necessary code, including Syncfusion® Word Editor SDK components, required namespaces, styles, and NuGet references, at your chosen location. It simplifies the process by interacting with data models and embedding the Syncfusion® Word Editor SDK components with the desired features directly into your application. + +The steps below will assist you to add the Syncfusion® Word Editor SDK components code in your Blazor application through **Visual Studio 2022**: + +N> Before using the Syncfusion® Blazor Word Editor SDK Code Generator, check whether the Syncfusion® Blazor Word Editor SDK Extension is installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. + +1. Open your existing Blazor application or create a new Blazor application in the Visual Studio 2019 or Visual Studio 2022. + +2. To open the Syncfusion® Blazor Word Editor SDK Code Generator, select one of the options below in the Razor file, and then add Syncfusion® Word Editor SDK components: + + **Option 1:** + + To generate a specific component code, right-click on the editor of the Razor file at the required line and Select the **Syncfusion® Blazor Word Editor SDK Code Generator...** + + ![CodeGeneratorCommand](images/Code-Generator-Command.png) + + **Option 2:** + + Open the .razor file and place the cursor at the required line then choose **Extension -> Syncfusion® -> Essential Studio® for Word Editor SDK -> Syncfusion® Blazor Word Editor SDK Code Generator…** from the Visual Studio menu. + + ![CodeGeneratorMenu](images/Code-Generator-Menu.png) + + It generates the selected Syncfusion® Word Editor SDK component render code and inserts it wherever the cursor is positioned. + +![ComponentRenderCode](images/Code-Generator-ComponentRenderCode.png) + +3. In the Output window, select the **Syncfusion® Blazor Word Editor SDK Code Generator** from the **“Show output from”** drop-down to see the changes made to your application. + + ![OutputWindow](images/Code-Generator-OutputWindow.png) + +4. The selected Syncfusion® Blazor Word Editor SDK component code is inserted into the active Razor file, and the application is configured with the latest NuGet package, styles, and namespaces required for the selected component. + +5. If you have installed the trial setup or NuGet packages from nuget.org, you must register the Syncfusion® license key to your application as Syncfusion® has introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2) post to know more about the licensing changes introduced in Essential Studio®. diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/download-and-installation.md b/Extension/Word-Editor-SDK-Extension/Visual-Studio/download-and-installation.md new file mode 100644 index 0000000..a1982ca --- /dev/null +++ b/Extension/Word-Editor-SDK-Extension/Visual-Studio/download-and-installation.md @@ -0,0 +1,71 @@ +--- +layout: post +title: Download and Installation of Syncfusion® Word Editor SDK Extension | Syncfusion +description: Check out the documentation for download and installation of Syncfusion® Word Editor SDK Extension for Visual Studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Download and Installation + +Syncfusion® publishes the Visual Studio extension in the below Visual Studio marketplace link. You can either install it directly from Visual Studio or download and install it from the Visual Studio marketplace. + +[Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=) + + +## Prerequisites + +The following software prerequisites must be installed to install the Syncfusion® Word Editor SDK extension, as well as to creating, adding snippet, converting, and upgrading applications. + +* [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/). + +* [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet). + +* [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet). + +## Install through the Visual Studio Manage Extensions + +The steps below assist you to how to install the Syncfusion® Word Editor SDK extensions from **Visual Studio Manage Extensions**. + +1. Open the Visual Studio 2022. + +2. Navigate to **Extension ->Manage Extensions** and open the Manage Extensions. + +3. On the left, click the **Online** tab and type **"Syncfusion® Word Editor SDK"** in the **search box**. + + ![Online-Manage-Extension-window](images/OnlineExtension.png) + +4. Click the **Download** button in the **“Syncfusion® Word Editor SDK Template Studio”** extensions. + +5. Close all Visual Studio instances after downloading the extensions to begin the installation process. You will see the following VSIX installation prompt. + + ![VSIX-Installation-Window](images/VSIXinstallation.png) + +6. Click the **Modify** button. + +7. After the installation is complete, open Visual Studio. + +8. Now, under the menu **Extensions**, you can use the Syncfusion® extensions from the Visual Studio. + + ![SyncfusionMenu](images/SyncfusionMenu.png) + +## Install from the Visual Studio Marketplace + +The steps below illustrate how to download and install the Syncfusion® Word Editor SDK extension from the Visual Studio Marketplace. + +1. Download the Syncfusion® Word Editor SDK Extensions from the below Visual Studio Marketplace. + + [Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) + +2. Close all Visual Studio instances running, if any. + +3. Double-click to install the downloaded VSIX file. You will see the VSIX installation prompts with the corresponding installed Visual Studio version checkbox for select the Visual Studio to install extension. + + ![VSIX-Installation-Window](images/VSIXinstallation1.png) + +4. Click the **Install** button. + +5. After the installation is complete, open Visual Studio. You can now use Syncfusion® extensions from the Visual Studio under the **Extensions** menu. + + ![SyncfusionMenu](images/SyncfusionMenu.png) \ No newline at end of file diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI.png new file mode 100644 index 0000000..5e5f066 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png new file mode 100644 index 0000000..87567a4 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AddScopeAPI1.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AppRegistration.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AppRegistration.png new file mode 100644 index 0000000..10d90b9 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AppRegistration.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png new file mode 100644 index 0000000..91b41ab Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/AuthenticationCheckBox.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Backuplocation.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Backuplocation.png new file mode 100644 index 0000000..5d37d91 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Backuplocation.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png new file mode 100644 index 0000000..d36667a Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClientIdApplicationtype.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClientIdCreation.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClientIdCreation.png new file mode 100644 index 0000000..aa14ff4 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClientIdCreation.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png new file mode 100644 index 0000000..8db726c Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClinetIdConfiguration.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantId.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantId.png new file mode 100644 index 0000000..76d5584 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantId.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png new file mode 100644 index 0000000..c30adee Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ClinetTenantIdConfiguration.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Configuration1.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Configuration1.png new file mode 100644 index 0000000..ee6fa3e Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Configuration1.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/CreateNewWizard.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/CreateNewWizard.png new file mode 100644 index 0000000..9f2091e Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/CreateNewWizard.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png new file mode 100644 index 0000000..7030999 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/GoogelAPIConsoleCredentials.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/GoogleLogin.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/GoogleLogin.png new file mode 100644 index 0000000..b8d0e1f Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/GoogleLogin.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/HomePage.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/HomePage.png new file mode 100644 index 0000000..901cd28 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/HomePage.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Localization.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Localization.png new file mode 100644 index 0000000..172d008 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Localization.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Login.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Login.png new file mode 100644 index 0000000..8067ba1 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Login.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png new file mode 100644 index 0000000..c5bc24d Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MicrosoftAuthentication.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Migration.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Migration.png new file mode 100644 index 0000000..9e15f7c Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Migration.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Migration1.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Migration1.png new file mode 100644 index 0000000..a4e35a6 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Migration1.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Migration2.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Migration2.png new file mode 100644 index 0000000..2004bd7 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/Migration2.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MigrationAddin.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MigrationAddin.png new file mode 100644 index 0000000..0ec7ac0 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MigrationAddin.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MigrationMenu.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MigrationMenu.png new file mode 100644 index 0000000..c274a45 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MigrationMenu.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MigrationSuccess.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MigrationSuccess.png new file mode 100644 index 0000000..1a85683 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/MigrationSuccess.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png new file mode 100644 index 0000000..9c27e18 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/NameSupportedAccountType.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/OauthclientId.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/OauthclientId.png new file mode 100644 index 0000000..f4d0524 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/OauthclientId.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/RedirectedURI.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/RedirectedURI.png new file mode 100644 index 0000000..c2ed0e4 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/RedirectedURI.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/RegisterApplication.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/RegisterApplication.png new file mode 100644 index 0000000..ea37b34 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/RegisterApplication.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png new file mode 100644 index 0000000..4dcbb5c Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/RegisterConfirmation.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.png new file mode 100644 index 0000000..cf6d6d5 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/ScopeAPIConfiguration.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png new file mode 100644 index 0000000..337b59e Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/VSIXinstallation1.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/WebAppRegister.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/WebAppRegister.png new file mode 100644 index 0000000..29de53d Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/WebAppRegister.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png new file mode 100644 index 0000000..bdd9c69 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/WebAppRegisterConfirmation.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/WebApplogIn.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/WebApplogIn.png new file mode 100644 index 0000000..1317eef Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/WebApplogIn.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/aadredirecteduri.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/aadredirecteduri.png new file mode 100644 index 0000000..da380c6 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/aadredirecteduri.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png new file mode 100644 index 0000000..c9e9324 Binary files /dev/null and b/Extension/Word-Editor-SDK-Extension/Visual-Studio/images/buildconfigurationbind.png differ diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/item-template.md b/Extension/Word-Editor-SDK-Extension/Visual-Studio/item-template.md new file mode 100644 index 0000000..91ef085 --- /dev/null +++ b/Extension/Word-Editor-SDK-Extension/Visual-Studio/item-template.md @@ -0,0 +1,55 @@ +--- +layout: post +title: Syncfusion Word Editor SDK Item Template | WPF | Syncfusion +description: Syncfusion Word Editor SDK Item Templates provides to add the predefined forms with Syncfusion component in WPF application. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Add Syncfusion®Word Editor SDK Components to the WPF Application + +Syncfusion® supports Visual Studio Item Templates to add Syncfusion®Word Editor SDK Components to the corresponding applications with their references. + +I> The Syncfusion® Word Editor SDK item templates are available from v30.1.37. + +The following steps will guide you in adding the Syncfusion® Word Editor SDK components to your Visual Studio WPF application. + +## Add Components using Syncfusion® Word Editor SDK Item Template + +1. Open a new or existing WPF application. + + **Option 1:** + + From the **Solution Explorer, right-click** on the WPF application. Choose **Add Syncfusion® Word Editor SDK...**. + + ![Choose Add Syncfusion® Item option from right click project](images/Add-Syncfusion-item.png) + + **Option 2:** + + Click **Extensions > Essential Studio® for Word Editor SDK > Add Syncfusion® Word Editor…** in Visual Studio. + + ![Choose Add Syncfusion® Item option from menu](images/Add-item.png) + +2. The Syncfusion® Word Editor SDK Item Template wizard will be launched, displaying available components for WPF application. + +![Syncfusion® WPF Word Editor SDK Item template Components](images/Add-Syncfusion-ui.png) + +3. Select the Components from the Component list within your Word Editor SDK Item template. The features associated with the selected Component will be presented. + +4. Choose an assembly reference option such as GAC location, Essential Studio® installed location, or NuGet packages to specify where the required Syncfusion® assemblies are added to the project. + + N> If the Syncfusion® Essential WPF build is installed, the Installed location and GAC options will be enabled. Without installing the Syncfusion® Essential WPF setup, use the NuGet option. The GAC option will not be available when using the Syncfusion® WPF Components in a .NET Core application. The Version drop-down lists the installed WPF versions. + +5. Click **Add**, and a pop-up will appear providing information about adding Component **files** and **NuGet/Assemblies** details. + +![Syncfusion® WPF Word Editor SDK Item template details](images/Add-Syncfusion-item-4.png) + + +6. Click **OK** to incorporate the chosen Components into the application, along with the necessary Syncfusion® assemblies. + +![Syncfusion® WPF Word Editor SDK Item template Gallery](images/Add-Syncfusion-item-details.png) + +7. Then, Syncfusion® licensing registration required message box will be shown if you installed the trial setup or NuGet packages since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.Syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-Syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion® license key to your project. Refer to this [blog](https://blog.Syncfusion.com/post/Whats-New-in-2018-Volume-2-Licensing-Changes-in-the-1620x-Version-of-Essential-Studio.aspx) post for understanding the licensing changes introduced in Essential Studio®. + + ![Syncfusion® Word Edittor SDK Item template Gallery](images/Syncfusion-Item-Template-Gallery-7.png) \ No newline at end of file diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/overview.md b/Extension/Word-Editor-SDK-Extension/Visual-Studio/overview.md new file mode 100644 index 0000000..acea74e --- /dev/null +++ b/Extension/Word-Editor-SDK-Extension/Visual-Studio/overview.md @@ -0,0 +1,20 @@ +--- +layout: post +title: Overview of Syncfusion® Word Editor SDK Extension for Visual Studio | Syncfusion +description: Learn here all about introduction on Syncfusion® Word Editor SDK extension for Visual Studio which made integration ease. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Overview of Blazor Extension for Visual Studio + +The Syncfusion® Word Editor SDK Extension for Visual Studio seamlessly integrates a robust Word Processor component into Blazor and WPF applications. By leveraging Syncfusion’s NuGet packages and customizable themes, developers can effortlessly enable advanced Word document viewing, editing, and printing capabilities without Microsoft Office dependencies. This empowers developers to focus on core application logic while streamlining document management with efficiency and flexibility. + +The Syncfusion® Word Editor SDK extensions provides the following add-ins in Visual Studio: + +[Template-Studio](template-studio): Creates Syncfusion® applications based on platform (Blazor and WPF) with required configuration for development with Syncfusion® Word Editor SDK components. + +[Code Generator](code-generator): Adds Syncfusion® Word Editor SDK component code in razor file of Blazor Application at required place. + +[Item Template](item-template): Adds predefined Syncfusion® Word Editor SDK controls and the required assemblies in WPF Application. diff --git a/Extension/Word-Editor-SDK-Extension/Visual-Studio/template-studio.md b/Extension/Word-Editor-SDK-Extension/Visual-Studio/template-studio.md new file mode 100644 index 0000000..b60519d --- /dev/null +++ b/Extension/Word-Editor-SDK-Extension/Visual-Studio/template-studio.md @@ -0,0 +1,397 @@ +--- +layout: post +title: Template Studio in Word Editor SDK - Syncfusion +description: Learn here about how to create an application based on platform selection (Blazor and WPF) using Syncusion® Word Editor SDK Components with the help of template studio. +platform: extension +control: Syncfusion Extensions +documentation: ug +--- + +# Syncfusion® Word Editor SDK Template Studio + +Syncfusion® provides the Word Editor SDK Template Studio, which allows you to create a Syncfusion application based on the platform selection such as Blazor and WPF using Syncfusion® Word Editor SDK components. The Syncfusion® application is created with the required Syncfusion® NuGet references, namespaces, styles, and component render code. The Template Studio includes an easy-to-use project wizard that guides you through the process of creating an application with Syncfusion® Word Editor SDK components. + +The steps below will assist you to create your **Syncfusion® Application** through **Visual Studio 2022**: + +N> Before use the Syncfusion® Project Template, check whether the Syncfusion® Word Editor SDK Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/download-and-installation) help topic. + +1. Open Visual Studio 2022. + +2. To create a Syncfusion® application, use either one of the following options: + + **Option 1** + + Choose **Extension -> Syncfusion -> Essential Studio® for Word Editor SDK -> Create New Syncfusion Project...** from the **Visual Studio menu**. + + ![CreateMenu](images/createmenu.png) + + **Option 2** + + Choose **File -> New -> Project** from the menu. This launches a new dialogue for creating a new application. Syncfusion® templates can be found by filtering the application type for **Syncfusion** or by entering **Syncfusion** as a keyword in the search option. + + ![CreateNewWindow](images/CreateNewWindow.png) + +3. Select the **Syncfusion® Word Editor SDK Template Studio** and click **Next**. + + ![CreateNewWizard](images/CreateNewWizard.png) + +4. The Syncfusion® Word Editor SDK Template Studio wizard will be launched. Select the platform to add the Syncfusion® Word Editor SDK components. + + ![PlatformSelection](images/Platform.png) + +5. Based on the platform selection, choose the configurations and create the respective application to add the Syncfusion® Word Editor SDK components. + + - Blazor Platform: + + - **Project type section** + + Choose one of the Syncfusion® Blazor application types based on the version of the .NET SDK you are using. + + | .NET SDK version | Supported Syncfusion Blazor Application Type | + | ---------------- | -------------------------------------------- | + | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion Blazor Web App | + | [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0), [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) | Syncfusion Blazor WebAssembly App | + + > **Note:** Refer to the .NET SDK support for Syncfusion Blazor Components [here](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk). + + In the **Syncfusion Blazor Web App** application type, you can configure the following options: + + + + + + + + + + + + +
+ Interactivity type + + Server, WebAssembly, Auto (Server and WebAssembly) +
+ Interactivity location + + Global, Per page/component +
+ + ![WebAppTemplate](images/webapptemplate.png) + + In the **Syncfusion Blazor WebAssembly App** application type, you can choose Progressive Web Application. + + ![WASMTemplate](images/wasmtemplate.png) + + > **Note:** The Progressive Web Application will be enabled if .NET 8.0 version or higher is installed. + + You can choose the required (.NET 9.0 and .NET 8.0), themes, https configuration, localization option, authentication type, Blazor Web App, and Blazor Web Assembly application types. + + Depending on your Syncfusion Blazor Application Type, refer to the table below for supported authentication types. + + | Syncfusion Blazor Application Type | Supported Authentication Types | + | ------------- | ------------- | + | Syncfusion Blazor Web App | None and Individual Accounts | + | Syncfusion Blazor WebAssembly App | None, Individual Accounts and Microsoft Identity Platform | + + Click **Create** button. The Syncfusion® Blazor application has been created. The created Syncfusion® Blazor app has the Syncfusion NuGet packages, styles, and the render code for Syncfusion® Word Editor SDK component. + + ![Readme](images/readme.png) + + - WPF Platform + + - **Configuration Section** + + You will have the option to specify your preferred .NET Framework Version, select the desired language(CSharp or Visual Basic), and choose the reference type according to your requirements. + + ![Configuration](images/Config.png) + + > **Note:** The installed location and GAC options will be available only after the Syncfusion® Essential® WPF or Windows Forms setup has been installed. Use the NuGet option instead of installing the Syncfusion® Essential® WPF or Windows Forms setup. Also, the GAC option will not be available when you choose .NET 6.0, .NET 7.0, and .NET 8.0 from the project type option in Visual Studio. + + Click **Create** button. The Syncfusion® WPF or Windows Forms application has been created. The created application has the Syncfusion NuGet packages, styles, and the render code for Syncfusion® Word Editor SDK component. + + - WPF: + + ![Readme](images/readme2.png) + + - Windows Forms: + + ![Readme](images/readme3.png) + +9. The Syncfusion® application based on the platform selection configures with most recent Syncfusion® NuGet packages version, selected style, namespaces, selected authentication, and component render code for Syncfusion® Word Editor SDK components. + +10. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio®. + +## Authentication Configuration for Blazor Platform + +We need to register the created application in the Google API Console for Individual Accounts and in Azure Active Directory for the Microsoft Identity Platform. From the Google API Console registration, we can obtain the client ID for Individual Accounts. From the Azure Active Directory registration, we can obtain the tenant ID and application client ID for the Microsoft Identity Platform. We need to configure these ID values in the created applications; only then will the application run correctly with authentication support. + +### Individual Accounts Authentication + +#### Web Application and Progressive Web Application + +1. Go to below credentials page for the Google cloud platform API console. + + + +2. Click Create Credentials and OAuth Client Id. + + ![Google API console credentials page](images/GoogelAPIConsoleCredentials.png) + + ![Google API Oauth client Id](images/OauthclientId.png) + +3. Select Application type as Web Application in client Id creation. + + ![ApplicationType](images/ClientIdApplicationtype.png) + +4. Add your publish URL link as an Authorized URI and login URL as Redirected URI. + + ![RedirectedURI](images/RedirectedURI.png) + +5. Click save then OAuth client id will be created and copy that credential. + + ![ClientIdCreation](images/ClientIdCreation.png) + +6. Add that Client Id, and RedirectUri in appsettings.json file of your application. + + ![ClinetIdConfiguration](images/ClinetIdConfiguration.png) + +7. Change the build configuration bind as google from Local in program.cs file. + + ![buildconfigurationbind](images/buildconfigurationbind.png) + +### Microsoft Identity Platform Authentication + +#### Server Application + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI like {Redirect URI}/signin-oidc and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +7. Configure those client tenant id, application id, and domain in your application appsettings.json file. + + ![Project configuration](images/Configuration1.png) + +#### Web Application and Progressive Web Application + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +8. Configure those client tenant id and application id in your application appsettings.json file. + + ![Clinet ID and Tenant ID configuration](images/ClinetTenantIdConfiguration.png) + +#### ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application + +##### Client project Registration and Configuration + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![AppRegistration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +8. Configure those client tenant id and application id in your application appsettings.json file. + + ![Clinet ID and Tenant ID configuration](images/ClinetTenantIdConfiguration.png) + +##### Server project Registration and configuration + +1. Go to below Azure Active Directory App Registration page. + + + +2. Click New Registration in App Registration page. + + ![Server App Registration](images/AppRegistration.png) + +3. Give name of the application and selected supported type as single tenant. + + ![Name and supported Account type](images/NameSupportedAccountType.png) + +4. Dropdown the page, select platform as web and give your application Redirect URI and click Register. + + ![Server Platform and Redirect URI](images/aadredirecteduri.png) + +5. App will be registered, go to the Authentication page and tick Access token an Id token check box. + + ![Access token and Id token](images/AuthenticationCheckBox.png) + +6. Migrate the API by clicking the highlighted arrow like in below image. + + ![API Migration](images/Migration1.png) + + ![Migration configuration](images/Migration2.png) + +7. Add a scope API in Expose an API page. + + ![Add scope API](images/AddScopeAPI.png) + +8. Give scope name, admin consent display name, and admin consent description and click Add scope. Scope API will be created, copy those scope API Value. + + ![Add scope API configuration](images/AddScopeAPI1.png) + +9. Get client tenant id and application id form overview page. + + ![Clinet tenat id](images/ClinetTenantId.png) + +10. Configure those client tenant id, application id, added scope api id, and domain in your application appsettings.json file. + + ![Project configuration](images/Configuration1.png) + +11. Configure the scope API in client application program.cs file below highlighted place. + + ![Scope API configuration](images/ScopeAPIConfiguration.PNG) + +### Run application + +You can run the application and see the Syncfusion® components you selected. Select a component to see component output. + +![Blazor Template output page](images/HomePage.png) + +You can select a culture language in combo box at top right on the output page to apply the culture in the application. + +![Blazor Template output page](images/Localization.png) + +N> **Note:** Above culture combo box will be enabled in sample output if localization option is selected in configuration window from Syncfusion Blazor Template Studio wizard. + +## Register and Login Application + +### Individual Authentication + +#### Blazor Web App + +##### Applying Database Migrations and User Registration in the .NET 8.0 and .NET 9.0 Blazor Web App + +##### Applying Database Migrations: + +In the Blazor Web App, it's essential to apply pending migrations to the database before proceeding with user registration. Choose one of the following options: + +**Option 1: Using Visual Studio Package Manager Console** + +Navigate to **View -> Other Windows -> Package Manager Console** in Visual Studio. + +Run the following command in the Package Manager Console: + + ```Update-Database``` + +**Option 2: Using Command Prompt** + +Open a command prompt in your project directory and execute the following command: + + ```dotnet ef database update``` + +##### User Registration: + +1. Launch the application and register by submitting your email address and creating a password. + + ![Register the WebApp](images/WebAppRegister.png) + +2. Confirm your registration by clicking **Click here to confirm your account.** + + ![Confirming the WebApp registration](images/WebAppRegisterConfirmation.png) + +3. Submit your registered email address and password to log in to the application. + + ![LogIn to the WebApp](images/WebApplogIn.png) + +#### Server Application, ASP.NET Core hosted Web Application, and Progressive Web Application with ASP.NET Core hosted + +1. For register the application, submit your email address and create a password. + + ![Register the application](images/RegisterApplication.png) + +2. Confirming registration by clicking **Click here to confirm your account.** + + ![Register the confirmation](images/RegisterConfirmation.png) + +3. Submit your registered email address and password to login the application. + + ![login to the application](images/Login.png) + +#### Web Application and Progressive Web Application + +1. Login to the application using Gmail accounts. + + ![Google login](images/GoogleLogin.png) + +### Microsoft Identity Platform + +#### Server Application, Web Application, Progressive Application, ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application + +1. Login to your application using your Microsoft account. + +2. Accept permission request of your application. + + ![Accept permission](images/MicrosoftAuthentication.png) diff --git a/extension-toc.html b/extension-toc.html index 4bc0da4..2ea0057 100644 --- a/extension-toc.html +++ b/extension-toc.html @@ -28,6 +28,31 @@ +
  • + Document SDK Extension + +
  • JavaScript Extension