Creating your first Hello World control add-in for the Web client

In Microsoft Dynamics NAV 2013 R2, the Microsoft Dynamics NAV Web client now also supports extensibility, enabling control add-ins that display, for example, a chart or a map.

This means that you can write new control add-ins that you can use on both the Windows client and on the Web client. The following tutorial will walk you through the steps of creating a Hello World example that displays on the Web client.

To complete the following steps, you will need:

• Microsoft Dynamics NAV 2013 R2 with a developer license. For more information, see System Requirements for Microsoft Dynamics NAV 2013 R2.
• CRONUS International Ltd. demonstration database.
• Microsoft Visual Studio 2008 Express, Microsoft Visual Studio 2008, Microsoft Visual Studio 2010, or Microsoft Visual Studio 2012.
• Microsoft .NET Framework Strong Name tool (sn.exe). This is included with Visual Studio and the Windows SDK.
• By default, the Microsoft .NET Framework Strong Name tool is located in C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0A\Bin\NETFX <version> Tools or in a location similar to this one, depending on what operating system you are using.
• Experience using Visual Studio.

To create your first Hello World control add-in for the Web client

1. In Visual Studio, create a new Visual C# project of type Class Library. Name the solution HelloWorld.
2. Add a reference to the following assembly:
   Microsoft.Dynamics.Framework.UI.Extensibility.dll.
3. Open the Class1.cs file and add the following lines of code:

   // Copyright ©Microsoft Corporation. All Rights Reserved.

   // This code is released under the terms of the Microsoft Public License (MS-PL, http://opensource.org/licenses/ms-pl.html.)

   using System;

   using System.Collections.Generic;

   using System.Linq;

   using System.Text;

   using System.Threading.Tasks;

   using Microsoft.Dynamics.Framework.UI.Extensibility;

    

    

   namespace HelloWorld

   {

       public class Class1

       {

           [ControlAddInExport(“HelloWorld”)]

           public interface iHelloWorld

           {

               [ApplicationVisible]

               event ApplicationEventHandler ControlAddInReady;

           }

       }

   }

4. In Visual Studio, on the Project menu, choose ClassLibrary Properties, and then choose Signing. Select the Sign the Assembly check box and choose
   a strong name key file.

5. Now build the project.

6. Once the project is built, you must copy the output assembly file to the computer that is running the Microsoft Dynamics NAV Development Environment. You locate and copy the control add-in assembly file (.dll), which is in the control add-in project output folder. By default, this is C:\Documents\MyDocuments\Visual Studio\Projects\[Your Addin Project]\[Your Class Library]\bin\Debug.

7. On the computer running the development environment, paste the assembly file in the Add-ins folder. By default, this is C:\Program Files (x86)\Microsoft Dynamics NAV\71\RoleTailored Client \Add-ins.

   At this point, in more complicated scenarios, you will create a manifest file and any resource files that you need to display your control add-in, such as images or style sheets. But for this HelloWorld example, we will skip right to registering the control add-in in Microsoft Dynamics NAV.

8. To register a control add-in, you include it in the Control Add-ins page in the Microsoft Dynamics NAV client. Enter the name of the control add-in as stated in the Microsoft.Dynamics.Framework.UI.Extensibility.ControlAddInExport, which in this code example is HelloWorld.

9. Enter the public key token, which you can determine by running the Microsoft .NET Framework Strong Name tool (sn.exe) on the assembly.

10. Enter a descriptive text for your control add-in.
    Now only a few steps remain to include your HelloWorld control add-in on a page.

11. From the Microsoft Dynamics NAV Development Environment, open Object Designer.

12. Create a new page and add a field control that can hold the HelloWorld control add-in. Something very simple like this will do:
    

13. Open the Properties window for the field control, locate the ControlAddIn property and select the HelloWorld control add-in from the Client Add-in lookup window. Choose the OK button.

14. Save and compile the page. Remember the page ID for the next step.

15. Run the new page from a web browser with the following command:
    http://MyWebServer:8080/DynamicsNAV71/WebClient/list.aspx?company=CRONUS%20International%20Ltd.&page=MyPageID

16. You should now see something like this:
    

Now you probably want to try a more advanced example. Go to Help for Microsoft Dynamics NAV 2013 R2 and read through the documentation on extending Microsoft Dynamics NAV. For more information, see Walkthrough: Creating and Using a Client Control Add-in in the MSDN Library.

Best regards,

The Dynamics NAV team