{"id":588,"date":"2016-01-10T11:22:43","date_gmt":"2016-01-10T11:22:43","guid":{"rendered":"https:\/\/poiseddevelopers.com\/reality-tech\/?p=588"},"modified":"2024-04-26T12:27:14","modified_gmt":"2024-04-26T12:27:14","slug":"creating-an-ms-office-add-in-using-visual-studio-ide","status":"publish","type":"post","link":"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/","title":{"rendered":"Creating an MS Office Add-In using Visual Studio IDE"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/#Process_for_creating_MS_Office_Add-In_from_Visual_Studio_IDE\" title=\"Process for creating MS Office Add-In from Visual Studio IDE\">Process for creating MS Office Add-In from Visual Studio IDE<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/#Step_1\" title=\"Step 1:\">Step 1:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/#Step_2\" title=\"Step 2:\">Step 2:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/#Step_3\" title=\"Step 3:\">Step 3:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/#Step_4\" title=\"Step 4:\">Step 4:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/#Step_5\" title=\"Step 5:\">Step 5:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/#Step_6\" title=\"Step 6:\">Step 6:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/#Step_7\" title=\"Step 7:\">Step 7:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/#Step_8\" title=\"Step 8:\">Step 8:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/poiseddevelopers.com\/reality-tech\/creating-an-ms-office-add-in-using-visual-studio-ide\/#Office_Add-In_Installation\" title=\"Office Add-In Installation\">Office Add-In Installation<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Process_for_creating_MS_Office_Add-In_from_Visual_Studio_IDE\"><\/span>Process for creating MS Office Add-In from Visual Studio IDE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Step_1\"><\/span>Step 1:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To start constructing an Office add-in, we are going to create a separate project for each Office application i.e. Word, Excel, PowerPoint etc. Let\u2019s start with the MS-Word add-in. Open Visual studio with the IDE option FILE -&gt; New -&gt; Project:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-598 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddin1-300x217-1.webp\" alt=\"img\" width=\"300\" height=\"217\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_2\"><\/span>Step 2:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now select an appropriate template (i.e. Visual Basic, Visual C# etc) to develop an add-in project. We will select Visual Basic for this, Go to Templates -&gt; Visual Basic -&gt; Office\/SharePoint.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-599 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn2-300x191-1.webp\" alt=\"img\" width=\"300\" height=\"191\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_3\"><\/span>Step 3:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now select the appropriate add-in project to develop as shown in the screenshot below. Let\u2019s select the MS-Word add-in project, for example.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-601\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn3-300x189-1.webp\" alt=\"img\" width=\"300\" height=\"189\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_4\"><\/span>Step 4:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Name the project and select the \u2018Location\u2019 folder to save the project work. Click \u2018OK\u2019 button to create the project.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-604\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn4-300x213-1.webp\" alt=\"img\" width=\"300\" height=\"213\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_5\"><\/span>Step 5:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now we have to add a ribbon to this newly created project which will then be customized further. To add a ribbon, right click on the project, Go to Add -&gt; New Item\u2026 Then select \u2018Ribbon (Visual Designer)\u2019 component as shown below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-608\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn6-300x172-1.webp\" alt=\"img\" width=\"300\" height=\"172\" \/><\/p>\n<p>Select \u2018Ribbon (Visual Designer)\u2019 -&gt;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-613\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn7-300x99-1.webp\" alt=\"img\" width=\"300\" height=\"99\" \/><\/p>\n<p>Here\u2019s how it looks after adding the ribbon into the project:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-614\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn8-300x94-1.webp\" alt=\"img\" width=\"300\" height=\"94\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_6\"><\/span>Step 6:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now that the ribbon add step is done, we will proceed with customizing the ribbon. To design\/customize the ribbon, we use the \u2018Toolbox\u2019 controls as shown in below screen shot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-617\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn9-300x199-1.webp\" alt=\"img\" width=\"300\" height=\"199\" \/><\/p>\n<p>After customization of the ribbon, we have added one button with an image and label \u2018Upload File\u2019. We can then trigger the opening of a form on detecting the click of this button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-621\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn10-300x132-1.webp\" alt=\"img\" width=\"300\" height=\"132\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_7\"><\/span>Step 7:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now we will add a form for processing our logic to upload the file from the user\u2019s machine to the server. To add a windows form, right click on the project, Go to Add -&gt; New Item\u2026 Then select \u2018Windows Form\u2019 component as shown below screen-shots:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-624\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn11-300x178-1.webp\" alt=\"img\" width=\"300\" height=\"178\" \/><\/p>\n<p>Below is the Design form for the move file action using toolbox controls:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-626\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn12-300x73.webp\" alt=\"img\" width=\"300\" height=\"73\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn12-300x73.webp 300w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn12-768x186.webp 768w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn12.webp 937w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_8\"><\/span>Step 8:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Write logic to process\/move the opened file to the server on the click of the \u2018Move Document\u2019 button. Process followed in current Office add-in is as below:<\/p>\n<p>1. User will open his\/her document in the MS-Office application<br role=\"presentation\" data-uw-rm-sr=\"\" \/>2. After the document is opened, if the user wants this to transfer to a website location, the User can go to the Add-In section and click the \u2018Move Document\u2019 button.<br role=\"presentation\" data-uw-rm-sr=\"\" \/>3. From step 2, a form will ask for the \u2018site URL\u2019. Based on this we can find the service location from the server which is located at \u2018http:\/\/{siteurl}:{port}\/Services\/UploadService.svc\u2019<br role=\"presentation\" data-uw-rm-sr=\"\" \/>4. After click on the \u2018Move Document\u2019 from form \u2013<br role=\"presentation\" data-uw-rm-sr=\"\" \/>4.1. Copying current\/active file opened in Word (or Office) application into the TEMP location of the user\u2019s machine to read all file contents in bytes. This is because we can\u2019t read in the stream of bytes directly if the file is currently in use.<br role=\"presentation\" data-uw-rm-sr=\"\" \/>4.2. Next we read the contents from the file newly located in the TEMP location. Pass this bytes[] to the service method UploadDocument(fileContent, newFileName) in fileContent parameter and the file name us generated to process in the UploadDocument method.<br role=\"presentation\" data-uw-rm-sr=\"\" \/>4.3. After bytes[] stream is passed to the service method, it will write to the file in the TEMP location on the server which will be used to process or attach that document to the record based on the selection.<\/p>\n<p>To add the service, right click on the project, Go to Add -&gt; Service Reference\u2026<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-629\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn13-300x169-1.webp\" alt=\"img\" width=\"300\" height=\"169\" \/><\/p>\n<p>Configuring service reference in the add-in project:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-630\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn14-300x177-1.webp\" alt=\"img\" width=\"300\" height=\"177\" \/><\/p>\n<p>The Code below is added on the click action of the \u2018Move Document\u2019 button from our windows form:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-632\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn15-300x200-1.webp\" alt=\"img\" width=\"300\" height=\"200\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Office_Add-In_Installation\"><\/span>Office Add-In Installation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To install the MS Office add-in, Go to your setup location folder and click on setup.exe. This setup will install add-ins for Word, Excel, and PowerPoint applications:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-634\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn16-300x63-1.webp\" alt=\"img\" width=\"300\" height=\"63\" \/><\/p>\n<p>Screen-Shot: After installation of add-in setup:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-638\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn17-300x97-1.webp\" alt=\"img\" width=\"300\" height=\"97\" \/><\/p>\n<p>Screen-Shot: Form to move the document to the server:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-642\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/OfficeAddIn18-300x157-1.webp\" alt=\"img\" width=\"300\" height=\"157\" \/><\/p>\n<p>Press the \u201cMove\u201d button and it will open the site associated with the entered URL in the browser. The other upload document process will handle the entered website.<\/p>\n<p>For MS-Excel and MS-PowerPoint we can follow same steps.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Process for creating MS Office Add-In from Visual Studio IDE Step 1: To start constructing an Office add-in, we are going to create a separate project for each Office application i.e. Word, Excel, PowerPoint etc. Let\u2019s start with the MS-Word add-in. Open Visual studio with the IDE option FILE -&gt; New -&gt; Project: Step 2: [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":595,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[30],"tags":[],"class_list":["post-588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ms-office"],"acf":[],"_links":{"self":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":6,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"predecessor-version":[{"id":597,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/588\/revisions\/597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/media\/595"}],"wp:attachment":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}