My first Add-In

Hello everyone,

I’m working on developing my first Add-In for Outlook 365. In theory, it’s quite simple—it’s a drop-down menu with two options. Each option opens a new email and loads a different template, depending on the selection.

So far, the menu is functioning smoothly. Selecting option A displays the corresponding template, and the same goes for option B.

However, I’m facing a problem: I can’t get the user’s signature to load automatically as expected, even though the signature is properly configured and set as the default for new emails.

I’ve attached part of my manifest.xml and command.ts files for you to review. If you could provide some guidance on how to resolve this issue, I’d greatly appreciate it.

Thank you so much for your support!

manifest.xml

<Requirements>
<Sets>
<Set Name="Mailbox" MinVersion="1.5"/>
</Sets>
</Requirements>
<FormSettings>
<Form xsi:type="ItemRead">
<DesktopSettings>
<SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
<RequestedHeight>250</RequestedHeight>
</DesktopSettings>
</Form>
</FormSettings>
<Permissions>ReadWriteItem</Permissions>
<Rule xsi:type="RuleCollection" Mode="Or">
<Rule xsi:type="ItemIs" ItemType="Message" FormType="Read"/>
<Rule xsi:type="ItemIs" ItemType="Message" FormType="Edit"/>
</Rule>
<DisableEntityHighlighting>false</DisableEntityHighlighting>
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
<Requirements>
<bt:Sets DefaultMinVersion="1.5">
<bt:Set Name="Mailbox"/>
</bt:Sets>
</Requirements>
<Hosts>
<Host xsi:type="MailHost">
<DesktopFormFactor>
<FunctionFile resid="Commands.Url"/>
<ExtensionPoint xsi:type="MessageReadCommandSurface">
<OfficeTab id="TabDefault">
<Group id="msgReadGroup">
<Label resid="GroupLabel"/>

<Control xsi:type="Menu" id="DropdownMenu">
<Label resid="DropdownMenu.Label"/>
<Supertip>
<Title resid="DropdownMenu.Label"/>
<Description resid="DropdownMenu.Tooltip"/>
</Supertip>
<Icon>
<bt:Image size="16" resid="MenuIcon.16x16"/>
<bt:Image size="32" resid="MenuIcon.32x32"/>
<bt:Image size="80" resid="MenuIcon.80x80"/>
</Icon>
<Items>
<Item id="InternalAction">
<Label resid="InternalAction.Label"/>
<Supertip>
<Title resid="InternalAction.Label"/>
<Description resid="InternalAction.Tooltip"/>
</Supertip>

<Icon>
<bt:Image size="16" resid="InternalIcon.16x16"/>
<bt:Image size="32" resid="InternalIcon.32x32"/>
<bt:Image size="80" resid="InternalIcon.80x80"/>
</Icon>
<Action xsi:type="ExecuteFunction">
<FunctionName>handleInternalAction</FunctionName>
</Action>
</Item>
<Item id="ExternalAction">
<Label resid="ExternalAction.Label"/>
<Supertip>
<Title resid="ExternalAction.Label"/>
<Description resid="ExternalAction.Tooltip"/>
</Supertip>

<Icon>
<bt:Image size="16" resid="ExternalIcon.16x16"/>
<bt:Image size="32" resid="ExternalIcon.32x32"/>
<bt:Image size="80" resid="ExternalIcon.80x80"/>
</Icon>
<Action xsi:type="ExecuteFunction">
<FunctionName>handleExternalAction</FunctionName>
</Action>
</Item>
</Items>
</Control>
</Group>
</OfficeTab>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>
<Resources>
<bt:Images>

<bt:Image id="MenuIcon.16x16" DefaultValue="https://localhost:3000/assets/menu-icon-16.png"/>
<bt:Image id="MenuIcon.32x32" DefaultValue="https://localhost:3000/assets/menu-icon-32.png"/>
<bt:Image id="MenuIcon.80x80" DefaultValue="https://localhost:3000/assets/menu-icon-80.png"/>

<bt:Image id="InternalIcon.16x16" DefaultValue="https://localhost:3000/assets/int-16.png"/>
<bt:Image id="InternalIcon.32x32" DefaultValue="https://localhost:3000/assets/int-32.png"/>
<bt:Image id="InternalIcon.80x80" DefaultValue="https://localhost:3000/assets/int-80.png"/>

<bt:Image id="ExternalIcon.16x16" DefaultValue="https://localhost:3000/assets/ext-16.png"/>
<bt:Image id="ExternalIcon.32x32" DefaultValue="https://localhost:3000/assets/ext-32.png"/>
<bt:Image id="ExternalIcon.80x80" DefaultValue="https://localhost:3000/assets/ext-80.png"/>
</bt:Images>
<bt:Urls>
<bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
<bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
<bt:Url id="CommandsJs.Url" DefaultValue="https://localhost:3000/commands/commands.js"/>
</bt:Urls>
<bt:ShortStrings>

<bt:String id="GroupLabel" DefaultValue="New Client/Matter"/>

<bt:String id="DropdownMenu.Label" DefaultValue="Choose Action"/>

<bt:String id="InternalAction.Label" DefaultValue="Internal"/>

<bt:String id="ExternalAction.Label" DefaultValue="External"/>
</bt:ShortStrings>
<bt:LongStrings>

<bt:String id="DropdownMenu.Tooltip" DefaultValue="Select an action to perform."/>

<bt:String id="InternalAction.Tooltip" DefaultValue="Opens an internal email template."/>

<bt:String id="ExternalAction.Tooltip" DefaultValue="Opens an external email template."/>
</bt:LongStrings>
</Resources>
</VersionOverrides>
</OfficeApp>

command.ts

/* global Office */
Office.onReady(function (info) {
if (info.host === Office.HostType.Outlook) {
Office.actions.associate("handleInternalAction", handleInternalAction);
Office.actions.associate("handleExternalAction", handleExternalAction);
}
});
/**
* Handles the "Internal" action.
* param event The Office Add-in event.
*/
function handleInternalAction(event) {
console.log("Handling internal action...");
openEmailTemplate("internal");
event.completed();
}
/**
* Handles the "External" action.
* param event The Office Add-in event.
*/
function handleExternalAction(event) {
console.log("Handling external action...");
openEmailTemplate("external");
event.completed();
}
/**
* Opens an email template with the user's signature.
* param templateType The type of template ("internal" or "external").
*/
function openEmailTemplate(templateType) {
var templateBody = templateType === "internal"
? "This is the internal email template."
: "This is the external email template.";
var subject = templateType === "internal"
? "Internal Client/Matter"
: "External Client/Matter";
console.log("Opening email template...");
// Open a new email draft
Office.context.mailbox.displayNewMessageForm({
subject: subject,
htmlBody: templateBody,
});
// Insert the user's signature after the draft is created
Office.context.mailbox.item.body.getAsync(Office.CoercionType.Html, function (result) {
console.log("Attempting to get user's signature...");
if (result.status === Office.AsyncResultStatus.Succeeded) {
var userSignature = result.value || "";
console.log("User's signature retrieved: ", userSignature);
// Combine the template body with the user's signature
var combinedBody = templateBody + "<br/><br/>" + userSignature;
console.log("Updating email body with template and signature...");
// Update the email body with the template and the user's signature
Office.context.mailbox.item.body.setAsync(combinedBody, {
coercionType: Office.CoercionType.Html,
asyncContext: { value: "setBody" }, // Optional: track async operation
});
}
else {
console.error("Failed to get user's signature:", result.error);
}
});
}
//# sourceMappingURL=commands.js.map

Add-in

developer

microsoft 365

Forum Discussion

My first Add-In