Comments (25)
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?
from office-add-in-samples.
@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!
from office-add-in-samples.
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 domainhttps://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
from office-add-in-samples.
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
from office-add-in-samples.
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?
from office-add-in-samples.
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
from office-add-in-samples.
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.
from office-add-in-samples.
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
from office-add-in-samples.
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
from office-add-in-samples.
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.
from office-add-in-samples.
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?
from office-add-in-samples.
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/
from office-add-in-samples.
from office-add-in-samples.
from office-add-in-samples.
from office-add-in-samples.
@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.
from office-add-in-samples.
@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.
from office-add-in-samples.
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
from office-add-in-samples.
@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.
from office-add-in-samples.
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
from office-add-in-samples.
P.S. Here are the Launch Events from manifest.xml:
<!-- Specify function to call for new message and new appointment events --> <ExtensionPoint xsi:type="LaunchEvent"> <LaunchEvents> <LaunchEvent Type="OnNewMessageCompose" FunctionName="checkSignature" /> <LaunchEvent Type="OnMessageSend" FunctionName="onMessageSendHandler" SendMode="PromptUser"/> </LaunchEvents> <SourceLocation resid="Autorun" /> </ExtensionPoint>
from office-add-in-samples.
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.
from office-add-in-samples.
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
from office-add-in-samples.
@DylanWilliams1955 Ugh, don't you hate those kinds of issues? Happens to all of us! Glad you figured it out, cheers!
from office-add-in-samples.
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
from office-add-in-samples.
Related Issues (20)
- Can not sign-in with msaljs popup on Safari browser based on Samples/auth/Office-Add-in-Microsoft-Graph-React HOT 4
- Better way to handle unidentified image URL with WebImageCellValue HOT 2
- Uncaught (in promise): InvalidRibbonDefinition: InvalidRibbonDefinition RichApi.Error: InvalidRibbonDefinition HOT 1
- Missing scopes (scp) in Bearer token from Azure AD HOT 2
- Unable to sideload the example HOT 3
- Word Addin in NET CORE 7.0 with MVC HOT 9
- doc: broken image links on Readme.md of hello-world HOT 2
- Word Add-in in NET CORE 8 with blazor HOT 3
- Request for Office Addin Sample for Blazor with SSO integration HOT 5
- Inquiry Regarding Suitable Framework for Office Add-ins Development HOT 3
- Javascript exception on initial attempt at running Office-Add-in-ASPNET-SSO sample HOT 10
- Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize HOT 1
- Need admin privs to npx install, no? HOT 2
- Outlook event-based activation examples are immature HOT 3
- Converting Outlook VSTO add-in to web add-in HOT 5
- Example works only in OWA HOT 5
- Office-Add-in-NodeJS-SSO Example fails to claim scope HOT 1
- Sample: Outlook-Add-in-SSO-NAA HOT 9
- How to debug against outlook online account with MFA? HOT 4
- Not able to display Html HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from office-add-in-samples.