Outlook Add-In 개발

이번글은 Outlook의 Add-In개발에 대해 정리하고자 한다. 

Yeoman과 Yeoman Generator를 사용하여 기본 탬플릿을 이용한다.

 

개발환경 

• OS : Windows 11
• .Net 버전 : 8.0
• 개발도구 : Visual Studio Code
• Node.js 버전 : 18.20.4
• Yeoman 버전 : 5.0.0
• 개발언어 : React, Typescript

---

1. Yeoman Generator 확인 

\> yo --version

  만약 Yeoman generator가 설치되어 있지 않으면 아래와 같이 설치한다.

\> npm install -g yo generator-office

 

2. 프로젝트 생성

\> yo office

   > Office Add-in Task Pane project using React framework를 선택한다.

3. Script type 선택

   > TypeScript를 선택한다.

4. Add-In명칭을 입력

   First Outlook AddIn이라고 입력

5. Outlook앱 선택

6. Manifest타입선택

 XML manifest : XML형식의 매니패스트. Outlook이 아닌 다른 M365의 다른 앱과는 연동될 수 없다.

 unified manifest for microsoft 365 : JSON형식의 매니패스트. Teams앱에서 사용되어 오던 것의 확장버전이다.   

   M365의 다른 앱에 확장가능하다.

7. 모든 선택이 완료되면 프로젝트가 생성된다.

8. Visual Studio Code에서 프로젝트 오픈 후 매니패스트 확인

 - <ExtensionPoint xsi:type="MessageComposeCommandSurface"> 메시지작성시점 

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

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

 

9. 프로젝트 빌드 및 실행

~\First Outlook Addin\> npm install

~\First Outlook Addin\> npm start

 

10. Outlook에서 확인

Outlook 메시지 작성창을 열면 상단 리본에 버튼이 2개 생성됨

1) Show Task Pane 클릭

2) Perform an action 클릭

Action 실행