diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-add-new-dd-module.png b/docs/en/tutorials/modular-crm/images/abp-studio-add-new-dd-module.png new file mode 100644 index 0000000000..20b6a62202 Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-add-new-dd-module.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-add-new-folder-command.png b/docs/en/tutorials/modular-crm/images/abp-studio-add-new-folder-command.png new file mode 100644 index 0000000000..51978faafc Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-add-new-folder-command.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-create-new-module-dialog-step-db.png b/docs/en/tutorials/modular-crm/images/abp-studio-create-new-module-dialog-step-db.png new file mode 100644 index 0000000000..265944a18c Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-create-new-module-dialog-step-db.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-create-new-module-dialog-step-ui.png b/docs/en/tutorials/modular-crm/images/abp-studio-create-new-module-dialog-step-ui.png new file mode 100644 index 0000000000..dbadc8403e Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-create-new-module-dialog-step-ui.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-create-new-module-dialog.png b/docs/en/tutorials/modular-crm/images/abp-studio-create-new-module-dialog.png new file mode 100644 index 0000000000..3011239f36 Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-create-new-module-dialog.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-new-folder-dialog.png b/docs/en/tutorials/modular-crm/images/abp-studio-new-folder-dialog.png new file mode 100644 index 0000000000..42ed49c36c Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-new-folder-dialog.png differ diff --git a/docs/en/tutorials/modular-crm/images/abp-studio-solution-explorer-with-folders.png b/docs/en/tutorials/modular-crm/images/abp-studio-solution-explorer-with-folders.png new file mode 100644 index 0000000000..7650ff28a3 Binary files /dev/null and b/docs/en/tutorials/modular-crm/images/abp-studio-solution-explorer-with-folders.png differ diff --git a/docs/en/tutorials/modular-crm/index.md b/docs/en/tutorials/modular-crm/index.md index 3702641e3b..580609b146 100644 --- a/docs/en/tutorials/modular-crm/index.md +++ b/docs/en/tutorials/modular-crm/index.md @@ -28,10 +28,68 @@ Initially, you see a `ModularCrm` solution and a `ModularCrm` module under that > An ABP Studio module is typically a .NET solution and an ABP Studio solution is an umbrella concept for multiple .NET Solutions (see the [concepts](../../studio/concepts.md) document for more). -`ModularCrm` module is your main application, which is a layered .NET solution that consists of several packages (.NET projects). You can expand the `ModularCrm` module to see these packages: +`ModularCrm` module is your main application, which is a layered .NET solution that consists of several packages (.NET projects). You can expand the `ModularCrm` module to see its packages: ![solution-explorer-modular-crm-expanded](images/solution-explorer-modular-crm-expanded.png) +## Creating the Product Module + +In this part, you will create a new module for product management and add it to the main application. + +You can create folders and sub-folders in *Solution Explorer* to better organize your solution. Right-click to the solution root on the *Solution Explorer* panel, and select Add -> New Folder command: + +![abp-studio-add-new-folder-command](images/abp-studio-add-new-folder-command.png) + +That command opens a dialog where you can set the folder name: + +![abp-studio-new-folder-dialog](D:\Github\abp\docs\en\tutorials\modular-crm\images\abp-studio-new-folder-dialog.png) + +Create `main` and `modules` folder using the *New Folder* command, then move the `ModularCrm` module into the `main` folder (simply by drag & drop). The *Solution Explorer* panel should look like below now: + +![abp-studio-solution-explorer-with-folders](images/abp-studio-solution-explorer-with-folders.png) + +Now, we can create a new module in our solution. Right-click the `modules` folder on the *Solution Explorer* panel, and select the *Add* -> *New Module* -> *DDD Module* command: + +![abp-studio-add-new-dd-module](images/abp-studio-add-new-dd-module.png) + +This command opens a new dialog to define properties of the new module. You can use the following values to create a new module named `ModularCrm.Products`: + +![abp-studio-create-new-module-dialog](images/abp-studio-create-new-module-dialog.png) + +When you click the *Next* button, you are redirected to the UI selection step. Here, you can select the UI type you want to support in your module: + +![abp-studio-create-new-module-dialog-step-ui](images/abp-studio-create-new-module-dialog-step-ui.png) + +A module; + +* May not contain a UI part to leave the UI development to the final application. +* May contain a single UI implementation that is typically in the same technology with the main application. +* May contain more than one UI implementation if you want to create a reusable application module and you want to make that module usable by different applications with different UI technologies. For example, all of [pre-built ABP modules](https://abp.io/modules) support multiple UI options. + +In this tutorial, we are selecting the MVC UI since we are building that module only for our `ModularCrm` solution and we are using the MVC UI in the main application. So, select the MVC UI and click the *Next* button. + +The next step is to select the database provider (or providers) you want to support with your module: + +![abp-studio-create-new-module-dialog-step-db](images/abp-studio-create-new-module-dialog-step-db.png) + +Since our main application is using Entity Framework Core and we will use the `ModularCrm.Products` module only for that main application, we can select the *Entity Framework Core* option and click the *Create* button. + + + + + + + + + + + + + + + + +