Having trouble getting started

[DylanWilliams1955]

Hello, I would like to access the "outlook-set-signature" sample. I can find the descriptions, but I am unclear on the repository location that I would use when opening Visual Studio and selecting "Clone a repository." Sorry for such a basic question, but I have not had to use github in the past. Thank you, Dylan

[AlexJerabek]

Hi @DylanWilliams1955,

No worries. Let's get you up and running with this samples. The repository is https://github.com/OfficeDev/Office-Add-in-samples. All of the Office Add-in samples are located in the same repository. It'll be easiest to clone the entire thing.

You can find more information about how to clone a repo here: https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository

Does that help?

[DylanWilliams1955]

Dear Alex,

Thank you very much for the help so far. My inexperience with github is really showing!

Inserting https://github.com/OfficeDev/Office-Add-in-samples did indeed create a \Source\Repos\Office-Add-in-samples\Samples\outlook-set-signature directory. So some progress! But this directory does not seem to have any .sln solution files. So I am not clear on how to load the example into Visual Studio 2022. Anything you can tell this first-timer would be most appreciated!

Thank you! Dylan

[AlexJerabek]

Hi @DylanWilliams1955,

Many of the samples don't include .sln files. They are intended to be opened in Visual Studio Code, the lightweight alternative to Visual Studio.

To run the set signature sample, you'll just need to sideload the manifest, as per the instructions here. Since you've cloned the repo and downloaded the code, you can also run the sample from localhost. This makes the service run locally on your machine, instead of using the GitHub hosted version. That way, if you make any changes, you can see them in the add-in.

[DylanWilliams1955]

Dear Alex,

I am only familiar with Visual Studio, which I have been using for a while to develop desktop applications. I have never tried to use Visual Studio Code. I am now supposed to develop a web addin similar to outlook-set-signature to go along with a companion desktop application that I prepared for submission to the Microsoft Store, also using Visual Studio.

This will be my first web addin. To practice, I set up the default Outlook web addin in Visual Studio, and got it running in the debug mode of Outlook on Microsoft Office 365.

Given this background, how would you proceed? My thought is that it would be best to stick with Visual Studio if I could. This would let me leverage what I know about the rest of the process of debugging, creating an MSIX installer for the addin (but perhaps this is not needed for Microsoft Store Submission?), and so on. What would you suggest?

Thank you so much for your help with this. Your advice so far has been fantastic!

Dylan

[AlexJerabek]

Hi @DylanWilliams1955,

First, you shouldn't need an installer for your add-in. One of the values of Office (web) Add-ins is that the end-user only needs the manifest file while your service is hosted elsewhere. You can learn more about submitting add-ins to the store here.

Second, add-ins made with the Office JavaScript APIs will work cross-platform. It sounds like you already have a COM (?) add-in for desktop, but something to consider going forward, so you're not maintaining two add-ins. Of course, the current add-in platform may not have the functionality you need, so investigating with a web-only version is fine for the moment.

All that said, you should be able to port the sample to a VS solution. There's an overview of developing add-ins in VS, but I'm not sure how helpful that'll be here. Maybe @elegault has some advice?

[DylanWilliams1955]

Dear Alex,

I spent a few more days on this, with no success either load the event-driven example outlook-set-signature into Visual Studio Code. I also spent some time trying to get the event-driven example https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/autolaunch?tabs=xmlmanifest to work for me in Visual Studio, but Visual Studio immediately flagged errors with the manifest file in the example and I didn't see the commands HTML file and the webpack config settings the article asks you to update.

Might you know of an event-driven outlook add-in example for Visual Studio with an .snl file? To get where I want to be, I would not even need a task pane. Just the simplest of event-driven add-in examples.

Thank you for all the time you have already devoted to helping me, Dylan

[AlexJerabek]

Hi @DylanWilliams1955,

I don't believe we have any event-driven Outlook samples that use .sln files. Let me assign this to @davidchesnut (who is out until Monday) to investigate some alternatives.

[DylanWilliams1955]

Dear Alex,

I have also been following up on your initial suggestion that I use VS Code. It seems that this is what most people do.

I started with Eric Legault's outlook-encrypt-attachments example. I immediately get the error shown below. When I check the node.js and npm versions I get what you see below, which seems consistent with the latest LTS version listed at https://nodejs.org/en/download

C:\Users\13039>node -v v18.16.0 C:\Users\13039>npm -v 9.5.1

Any thoughts on how to get Eric's example to debug?

Thank you, Dylan

[Rick-Kirkham]

Just horning in here to note that by coincidence I got a notification from David E Craig's blog that he has a new post about the outlook-set-signature sample. He has created an alternate version: https://theofficecontext.com/2023/04/16/outlook-signature-add-in/

[DylanWilliams1955]

Hi Rick, not such a coincidence! I had asked him some questions about how to proceed, and he generated this new version and response. I tried to set it up in visual studio code today, but ran into a problem with the manifest, which I reported back to him. I am very helpful that this might get me going! Dylan.

Dylan

[+1] (303) 906-6471 @.***

---

From: Rick Kirkham @.> Sent: Sunday, April 16, 2023 4:02:39 PM To: OfficeDev/Office-Add-in-samples @.> Cc: DylanWilliams1955 @.>; Mention @.> Subject: Re: [OfficeDev/Office-Add-in-samples] Having trouble getting started (Issue #511)

Just horning in here to note that by coincidence I got a notification from David E Craig's blog that he has a new post about the outlook-set-signature sample. He has created an alternate version: https://theofficecontext.com/2023/04/16/outlook-signature-add-in/

— Reply to this email directly, view it on GitHubhttps://github.com/OfficeDev/Office-Add-in-samples/issues/511#issuecomment-1510500317, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A7C5ILAZZZNPILPWJURGF6DXBRT77ANCNFSM6AAAAAAWZNNA5Y. You are receiving this because you were mentioned.Message ID: @.***>

[DylanWilliams1955]

P.S. This was the error message I got. I checked the node and npm versions, as shown below. They seemed correct. Either way, I am very hopeful that one or the other solution will work out!

C:\Users\13039>node -v v18.16.0

C:\Users\13039>npm -v 9.5.1

Dylan Williams [+1] (303) 906-6471 @.**@.> @.***

From: Rick Kirkham @.> Sent: Sunday, April 16, 2023 4:03 PM To: OfficeDev/Office-Add-in-samples @.> Cc: DylanWilliams1955 @.>; Mention @.> Subject: Re: [OfficeDev/Office-Add-in-samples] Having trouble getting started (Issue #511)

Just horning in here to note that by coincidence I got a notification from David E Craig's blog that he has a new post about the outlook-set-signature sample. He has created an alternate version: https://theofficecontext.com/2023/04/16/outlook-signature-add-in/

- Reply to this email directly, view it on GitHubhttps://github.com/OfficeDev/Office-Add-in-samples/issues/511#issuecomment-1510500317, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A7C5ILAZZZNPILPWJURGF6DXBRT77ANCNFSM6AAAAAAWZNNA5Y. You are receiving this because you were mentioned.Message ID: @.***>

[elegault]

@DylanWilliams1955 @Rick-Kirkham Sorry for the delay in jumping in here! I'm not sure how to immediately help you Dylan, but if you're having problems with Node, take a look at the problems I went through here - they may be similar.

Also, I would recommend sticking with Visual Studio if that's what you know best. I find it's the easiest and most low-maintenance approach to getting started with Office add-ins, as it dispenses with problems with dependencies and frameworks (Node, Webpack, Yeoman) that often distract for joyful programming work. Try just mastering the getting started sample (here), and you'll be on your way.

If you're having problems with manifest schema validation in VS, make sure to update your local .xsd schema files (in C:\Program Files\Microsoft Visual Studio\2022\Professional\xml\Schemas\1033) which may not be as up to date as they should be (one such schema is here, with others nearby).

If there's anything else I can assist with, please let me know! FYI I plan on starting a series of YouTube videos on getting started with Outlook web add-in development real soon, and they'll tackle all of these annoying getting started roadblocks that everyone goes through (and which happens repeatedly, as the tech changes so often for web solutions we are always re-learning!). Content suggestions are welcome!

[DylanWilliams1955]

Dear Eric,

          Thank you very much for the note! You are the first to suggest that I continue with Visual Studio, so let me address that first. If this does not pan out, I will go back to working on a Visual Studio Code solution.

          I got the Visual Studio default solution working several weeks ago and can debug in it quite easily now. I practiced a bit by using Visual Studio to debug the core parts of my JavaScript code, until I ran out of code to debug. Like you said, the fun part.

          Where I am stuck with Visual Studio is that I am not expert enough to add the Outlook events (OnNewMessageCompose and OnMessageSend) I will need to the default solution. Might you know of a step-by-step guide to adding Outlook events to a Visual Studio solution? Alternatively, might you know of an event-driven Visual Studio example?

Thank you, Dylan

Dylan Williams [+1] (303) 906-6471 @.**@.> @.***

From: Eric Legault @.> Sent: Monday, April 17, 2023 12:57 PM To: OfficeDev/Office-Add-in-samples @.> Cc: DylanWilliams1955 @.>; Mention @.> Subject: Re: [OfficeDev/Office-Add-in-samples] Having trouble getting started (Issue #511)

@DylanWilliams1955https://github.com/DylanWilliams1955 @Rick-Kirkhamhttps://github.com/Rick-Kirkham Sorry for the delay in jumping in here! I'm not sure how to immediately help you Dylan, but if you're having problems with Node, take a look at the problems I went through here https://github.com/OfficeDev/office-js-docs-pr/issues/3840 - they may be similar.

Also, I would recommend sticking with Visual Studio if that's what you know best. I find it's the easiest and most low-maintenance approach to getting started with Office add-ins, as it dispenses with problems with dependencies and frameworks (Node, Webpack, Yeoman) that often distract for joyful programming work. Try just mastering the getting started sample (herehttps://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/outlook-quickstart?tabs=visualstudio), and you'll be on your way.

If you're having problems with manifest schema validation in VS, make sure to update your local .xsd schema files (in C:\Program Files\Microsoft Visual Studio\2022\Professional\xml\Schemas\1033) which may not be as up to date as they should be (one such schema is herehttps://learn.microsoft.com/en-us/openspecs/office_file_formats/ms-owemxml/8e722c85-eb78-438c-94a4-edac7e9c533a, with others nearby).

If there's anything else I can assist with, please let me know! FYI I plan on starting a series of YouTube videos on getting started with Outlook web add-in development real soon, and they'll tackle all of these annoying getting started roadblocks that everyone goes through (and which happens repeatedly, as the tech changes so often for web solutions we are always re-learning!). Content suggestions are welcome!

- Reply to this email directly, view it on GitHubhttps://github.com/OfficeDev/Office-Add-in-samples/issues/511#issuecomment-1511921721, or unsubscribehttps://github.com/notifications/unsubscribe-auth/A7C5ILGHDN6AYAVYXZBVWADXBWG75ANCNFSM6AAAAAAWZNNA5Y. You are receiving this because you were mentioned.Message ID: @.**@.>>

[elegault]

@DylanWilliams1955 VS or VS Code is not going to have any UI features for implementing Office JS events via auto generated code (e.g. like the member dropdowns in VS's VB code editor window that lets you choose events from objects to create event code stubs in the class). You have to declare event-based activation events (like you would in any C# class) in both the manifest and with the associated commands JS file. Take a look at this article, and my accompanying sample.

[davidchesnut]

Hi @DylanWilliams1955,

Just want to let you know that you can port VS Code samples into Visual Studio. Add-ins are just web apps, and Visual Studio supports web apps. There's a few tricky differences to be aware of.

• The manifest in Visual Studio uses a shorthand remoteAppUrl notation for the domain like <SourceLocation DefaultValue="~remoteAppUrl/Home.html" />. In VS Code the literal domain https://localhost:3000/Home.html is used. So if you copy manifest entries over be sure to convert them to the VS shorthand notation.
• Similar note, VS will use the port specified in the SSL URL project property for the web project. it will be something like https://localhost:44310/. So be sure any HTML or JS code that references port 3000 is using the VS port number instead.
• The folder structure in Visual Studio doesn't match. So if you copy files over like JS files be sure to update script tags in the HTML files that load them to include the correct location. If you can make the VS folder structure match, that's ideal. But then you also need to make sure the manifest URLs match any changes you make.

A good way to test is to run the VS project and open a browser. Then go to the URLs (mainly any the manifest references) and make sure they return the correct page or .js file. This way you can confirm resources are being served correctly before you get to the step of sideloading in Office.

Hope this helps, David

[elegault]

@DylanWilliams1955 in addition to the great guidance from @davidchesnut, one thing that is not obvious is how that manifest file is used. First, when you compile the project it will do validation against the relevant .xsd and the build will fail if there's issues. However, it will not update the ~remoteAppUrl placeholder in the compiled manifest file (in /bin/Debug/OfficeAppManifests) unless you have the manifest project set as the startup project (and set to "Start" or "Start without debugging" in the "Configure Startup Projects" dialog).

If you're like me, I prefer to manually upload my manifest and set the web server project as the only startup project (unless I'm using multiple web servers). That approach bypasses the "side-load" option which temporarily uploads the compiled version of the add-in manifest, but requires you to login to web Outlook if you have a browser set for the manifest project's Start Action (in the property page for the project). I find this approach better for frequent start/debug/stop work, esp. with Outlook Online. If you have to alter the manifest frequently or work with different Outlook accounts and clients, the side-loading approach may be better.

[DylanWilliams1955]

Dear Eric and David, This is really super, and a LOT to work on. So, I will get to work and let you know how I do. Thank you so much for all your help! Dylan

[DylanWilliams1955]

Dear Alex, Eric, David and Rick,

First, thank you so much for getting me where I am now. As it turned out, the first example I was able to compile, run and debug was Outlook-Add-In-Main set up for Visual Studio Code, so I have been sticking with that. My code is doing nearly everything I had hoped at this point. It both has a working task pane and uses the OnNewMessageCompose event to work with new e-mails before they are sent.

However,I was never able to get the Edge debugger to work for events, and I am struggling to debug an OnMessageSend event that will complete the code. In contrast to the OnNewMessageCompose event, when the OnMessageSend event is triggered, it crashes both Edge and the Edge debugger, so I am hoping that you can help me get the debugger working properly so that I can figure out what is going on.

After npm start, Webpack loads and runs, but I see the message below in the VS Code terminal area:

Just in case this is relevant, I also see that the Office Debugger has been deprecated, as shown below.

Thank you again for all your help! Dylan

[elegault]

@DylanWilliams1955 You're debugging Outlook Online and not Outlook for Windows/Mac, correct? Also, would you be able to share your .js file that has implemented the event-based activation and where you set the breakpoints? FWIW, also please review the debugging guidance if you haven't yet.

[DylanWilliams1955]

Dear Eric,

Thank you for writing back! Indeed, I am using the debugging guidance you point to. In my case I was using the specific guidance from https://learn.microsoft.com/en-ca/office/dev/add-ins/testing/debug-add-ins-using-devtools-edge-chromium as I am using Edge Cromium for the moment.

No matter what I do, I can only get the debugger to work for actions that I initiate in the task pane. After some time, I came up with the idea of using the task pane to debug the event-driven code I was developing. That was a real life saver! But I would very much like to be able to debug my event-driven code directly.

As for the problems that I am having with debugging the OnMessageSend event, I just realized that the manifest.xml file I for the example I started with sets DefaultMinVersion="1.10". But the documentation I have been working from at https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/smart-alerts-onmessagesend-walkthrough?tabs=xmlmanifest was written for 1.12. So that may be why I have not had any luck with OnMessageSend. I will have to look at this tomorrow!

Be that as it may, I still cannot debug even the OnNewMessageCompose event, even though it runs perfectly now. So I would be very interested in anything that you can tell me about why how to run the debugger properly. Here is the code that responds to the events:

`/// / global Office require / //const { default: Common } = require("./common"); const { default: SignatureEventWrapper } = require("./signatureEventWrapper"); // eslint-disable-next-line office-addins/no-office-initialize Office.initialize = () => {}; // mount the commands into Office Office.actions.associate("checkSignature", () => { const wrapper = new SignatureEventWrapper(); wrapper.addSignature(); }); //Office.actions.associate("onMessageSendHandler", onItemSendHandler); Office.actions.associate("onMessageSendHandler", onMessageSendHandler);

/ // Do we need to do this too?? // IMPORTANT: To ensure your add-in is supported in the Outlook client on Windows, remember to map the event handler name specified in the manifest's LaunchEvent element to its JavaScript counterpart. // 1st parameter: FunctionName of LaunchEvent in the manifest; 2nd parameter: Its implementation in this .js file. if (Office.context.platform === Office.PlatformType.PC || Office.context.platform == null) { Office.actions.associate("onMessageSendHandler", onMessageSendHandler); } /

function onMessageSendHandler(event) { Office.context.mailbox.item.body.getAsync("text", { asyncContext: event }, getBodyCallback); }

function getBodyCallback(asyncResult) { let event = asyncResult.asyncContext; let body = ""; if (asyncResult.status !== Office.AsyncResultStatus.Failed && asyncResult.value !== undefined) { body = asyncResult.value; } else { let message = "Failed to get body text"; //console.error(message); event.completed({ allowEvent: false, errorMessage: message }); return; }

let matches = hasMatches(body); if (matches) { let message = "There are still unresolved Rolling-Quotes tags in your e-mail.\n"; message += "You can:\n 1) Remove these tags OR\n"; message += " 2) Replace them with quotes from the Rolling-Quotes task pane\n"; message += "How would you like to proceed?"; event.completed({ allowEvent: false, errorMessage: message }); } else { event.completed({ allowEvent: true }); } } `

I am looking forward to any thoughts you might have! Dylan

[DylanWilliams1955]

P.S. Here are the Launch Events from manifest.xml:

`

        <ExtensionPoint xsi:type="LaunchEvent">
          <LaunchEvents>
            <LaunchEvent Type="OnNewMessageCompose" FunctionName="checkSignature" />
            <LaunchEvent Type="OnMessageSend" FunctionName="onMessageSendHandler" SendMode="PromptUser"/>
          </LaunchEvents>
          <SourceLocation resid="Autorun" />
        </ExtensionPoint>

`

[davidchesnut]

Hi @DylanWilliams1955,

Just to confirm are you debugging from a browser? You should be able to use developer tools to set breakpoints for your events. If you are debugging from Outlook on Windows, then it loads a separate JS runtime for the events, and you need to debug using a different approach. See Debug your event-based Outlook add-in for more details. It's a bit more complex.

[DylanWilliams1955]

Dear David,

I realized this morning that updated code gets executed right away, but updated manifests are stored in Outlook and must be deleted and then re-installed before testing. After properly updating my new manifest in Outlook the code I wrote for the “OnMessageSend” event ran and debugged perfectly the first time! (Probably because I had been fretting over the code for days trying to figure out what might be wrong!)

I am sorry for the red herring. But very pleased with all of the help you and your friends have provided me. I plan to start focusing on deployment today. Another new frontier for me!

Thank you again! Dylan

[elegault]

@DylanWilliams1955 Ugh, don't you hate those kinds of issues? Happens to all of us! Glad you figured it out, cheers!

[davidchesnut]

Hi @DylanWilliams1955 yay! Glad it is working! I'll close this thread, but feel free to ping us if you still have any issues.

Thanks, David