This article will summarize the development of Add-Ins for Outlook. 

Use the basic template using Yeoman and Yeoman Generator.

Development environment

  • OS: Windows 11
  • .Net version: 8.0
  • Development tool: Visual Studio Code
  • Node.js version: 18.20.4
  • Yeoman version: 5.0.0
  • Development language: React, Typescript

1. Check Yeoman Generator
\> yo --version

  If Yeoman generator is not installed, install it as follows.

\> npm install -g yo generator-office
 
2. Create a project
\> yo office
   > Select Office Add-in Task Pane project using React framework.

Select Office Add-in Task Pane project using React framework.





3. Select Script type
   > Select TypeScript.

Select TypeScript.






4. Enter the Add-In name
   Enter 'First Outlook AddIn'

Enter Add-in name






5. Select Outlook app
Select Outlook app













6. Select manifest type
 XML manifest : Manifest in XML format. It cannot be linked with other M365 apps other than Outlook.
 unified manifest for microsoft 365 : Manifest in JSON format. It is an expanded version of the one used in the Teams app. It can be expanded to other apps in M365.

Select manifest type













7. When all selections are made, a project is created.
Project created













8. Open the project in Visual Studio Code and check the manifest

 - <ExtensionPoint xsi:type="MessageComposeCommandSurface"> When the message was written

 - <Control xsi:type="Button" id="msgComposeOpenPaneButton"> ShowTaskpane Button

 - <Control xsi:type="Button" id="ActionButton">  Action Button

 

9. Build and run the project

~\First Outlook Addin\> npm install
~\First Outlook Addin\> npm start

 

10. Check in Outlook

When you open the Outlook message composition window, two buttons are created on the top ribbon.

Ribbon Button

1) Show Task Pane Click

Task pane

2) Perform an action Click

Action

 








Comments

Post a Comment

Popular posts from this blog

Setting up Windows Powershell with Oh-My-Posh

Image
You can install Oh My Posh to change Windows Powershell into your own unique UI. First, visit the Oh My Posh homepage. You can check the installation method and available themes on the website. Install Oh My Posh. 1.  Execute the following command in Windows Powershell     \>  winget install JanDeDobbeleer.OhMyPosh -s winget 2. Setting Windows PATH environment variable. When you install Oh My Posh, it will be installed in C:\Users\{user}\AppData\Local\Programs\oh-my-posh. You must register the location in Windows PATH.  If it is properly registered in PATH, the oh-my-posh.exe command will be executed. 3. Open the Powershell basic profile.    \>  notepad.ext $profile If the profile is registered properly, it opens as shown below. If the profile cannot be found, the error screen below opens. In this case, register the profile with the command below.    \>  New-Item -type file -path $profile -force If registered properly, the ...
Read more

[NETSDK1136] the target platform must be set to windows

  ■ Issue How to resolve the error message below when building by creating a project based on .Net 8.0 and adding the <UseWindowsForms>true</UseWindowsForms> property to the project file (.csproj). error NETSDK1136: The target platform must be set to Windows (usually by including '-windows' in the TargetFramework property) when using Windows Forms or WPF, or referencing projects or packages that do so. ■ Solution Among the properties of the project file (.csproj) < TargetFramework > net8.0 </ TargetFramework > Add -windows to TargetFramework property < TargetFramework > net8.0-windows </ TargetFramework >
Read more