Creating Custom Module In Evoq Content

Steps in brief

1. Install DNN extension for Visual Studio
2. Create a custom module using Visual Studio
3. Install the module in Evoq site
4. Add module in any Evoq page

Install DNN Extension for Visual Studio

To create any custom module using Visual Studio we first need to install the extension which will be needed to create a project for DNN.

To install the extension for VS we have two options

1. Using Visual Studio extensions
   
   
   1. Open the Tools option from the Visual Studio menu
   2. Select Extensions and Updates
   3. Search DNN in the search bar after selecting the Online option from the ribbon on the left-hand side.
      
   4. Click on the install option after the option (install option will appear in the extension is not already installed)

2. Downloading the .msi file and installing it,
   
   
   1. Download the .msi file from the given link
   2. Install the file in your system

Create a custom module using Visual Studio

1. Open Visual as Administrator
2. Create a new project in Visual Studio
   
3. Select DNN from the menu on the Left-hand Side and select the option C# Compiled Module to create a custom module.
4. Keep in mind the below-listed points while creating the solution,
   
   
   • Give the name to the module
   • Uncheck the option create the directory for the solution
   • Uncheck the option Add to source control
   • Set the path for the project in the DesktopModules folder of the website
     
     Example: ...\MyDemo1\DesktopModules

5. Popup, as shown below, will appear on clicking Enter the details in the popup. And Click on Ok.
   
6. The page will open which will show some steps necessary for developing the custom module. The file structure of the project for creating the module will be as shown.
   
   View.ascx and view.ascx.cs file will be necessary for development of basic module. Other files such as Edit.ascx, Edit.ascx.cs, Settings.ascx and Settings.ascx.cs files can be useful for development of Advance module.

7. Read and follow the instructions given in the visual studio and make the respective changes for smooth development of the module.
8. Open the View .ascx file and add some content to view on the page of the site and save
9. Change the Debug mode from Debug to Release and Build the solution
10. An Install folder will be created inside the DesktopModules folder containing two zip files.

Example: ...\MyDemo1\DesktopModules\DemoModule1\install

Install and Source files will be created, from which we will need Install file.

Install the module in Evoq site

To use the custom developed module, we need to install the module in the site.

Steps for installing the module are

1. Select the settings options from the personal bar and click on
   
2. Click on Install Extension
   
   
3. Upload the zip File for installing the Module which was created in step – 2. Select the Install zip file.
   
4. Click on next and follow the steps. Accept the terms and click install. Custom module is now installed and ready to use in the site. To check whether the module has been installed or not, check the list of modules if the name of the module will appear in the list then the module has been successfully installed.

Add module in any Evoq page

To show the content of our custom module or to use the functionality of our module, we need to drag and drop that module in the specific page.

To use the module either we can create a new page for that or else we can place the module in any of the default pages of the site. If we choose to create a new page then we need to follow the below given steps.

1. Click on pages
   
2. Click on Add page. Enter the Details and save the page.
   
3. View that page and click on the add module option of any of the content pane. You can use any of the options from the below images to add to the module.
   
4. One popup will appear for selecting inbuilt/custom modules.
   
5. The content of the module will be placed in the content pane which you select for adding the module.
   
6. Publish the page if you want the content to remain as it is and if you want the changes when the page is in view mode rather than only in edit mode.

A demo of the install file is attached. If you want to install the module in your site, then download the install file and follow steps 3 and 4.