Office 365 Add-In

About Office Add-In

• HTML, CSS, JS와 같은 웹 기술을 사용하여 Office App을 확장하고 상호 작용할 수 있음

• Office 클라이언트에 새로운 기능 추가 : 외부 데이터를 Office 로 가져오고 Office 문서를 자동화하며 Office 클라이언트에서 타사 기능을 제공하는 등의 작업을 수행합니다. 예를 들어, Microsoft Graph API를 사용하여 생산성을 높이는 데이터에 연결

 

Office Add-In 구성요소

• Manifest : 추가 기능의 설정 및 기능을 지정하는 XML 파일

 

• Web App

 

 

Office Add-In 클라이언트 확장 및 상호 작용

• 기능 확장 => 매니페스트에 지정

• 삽입 가능한 작업 창

• Outlook 기능 확장
• Office Java Scripts API        

 

Office Add-In 추가 기능 가이드

https://docs.microsoft.com/en-us/office/dev/add-ins/overview/learning-path-beginner?view=outlook-js-preview

1. 조건
2. 기초
3. 도구 설치 및 첫번째 추가 기능 개발

1. Code
2. 자바스크립트 라이브러리 이해
3. 매니페스트 이해

 

 

 

파일 업로드 프로그레스바

https://www.positronx.io/angular-file-upload-with-progress-bar-tutorial/

 

 

Outlook 추가 기능 명령

• 읽기 창 또는 팝업 창에서 메시지를 읽기
• 메시지 작성
• 주최자로서 약속 또는 회의 만들기 또는 보기
• 참석자로 회의보기

 

추가 기능 매니페스트 목적 이해

매니페스트 정의

매니페스트에서 다음을 포함하여 추가 기능에 대한 주요 정보를 정의합니다.

• 추가 기능 메타 데이터 (예 : ID, 버전, 설명, 표시 이름, 기본 로캘)
• 추가 기능이 Office와 통합되는 방법에 대한 정보 (예 : 대상 응용 프로그램, 사용자 지정 기능, 추가 기능 명령)
• 추가 기능이 브랜딩 및 명령 아이콘 화에 사용해야하는 이미지의 위치
• 추가 기능에 필요한 권한
• 추가 기능의 크기 (예 : 콘텐츠 추가 기능의 기본 크기, Outlook 추가 기능의 요청 된 높이)
• 추가 기능이 메시지 또는 약속에서 활성화되어야하는시기를 지정하는 규칙 (Outlook 만 해당)

 

매니페스트 사용 방법

추가 기능 매니페스트는 다음과 같은 방식으로 사용됩니다.

• 추가 기능이 실행되는 Office 응용 프로그램은 매니페스트의 정보를 사용하여 추가 기능 UI를 렌더링하고 사용자 지정 단추 나 메뉴 항목을 연결합니다.
• 추가 기능을 AppSource에 게시하는 경우 :

 

 

 

 

스크립트 랩 => 엑셀, 워드, 파워포인트에서 작동

 

Outlook JavaScript API 기능 이해

객체 모델

• Mail Box
• Item

 

인증

• Outlook 추가 기능은 인터넷 어디에서나 정보에 액세스 할 수 있습니다. 
• 몇 가지 예에는 추가 기능을 호스팅하는 서버, 내부 네트워크 또는 클라우드의 다른 곳이 포함됩니다.
• 해당 정보가 보호되는 경우 추가 기능에 사용자를 인증 할 수 있는 방법이 필요합니다.
•  Outlook 추가 기능은 특정 시나리오에 따라 다양한 인증 방법을 제공합니다.

 

Exchange 사용자 ID 토큰

• Exchange 사용자 ID 토큰은 추가 기능이 사용자의 ID를 설정하는 방법을 제공합니다.
• 사용자의 신원을 확인하면 사용자를 한 번 시스템에 인증 한 다음 사용자 요청 토큰을 향후 요청에 대한 권한으로 수락 할 수 있습니다.
• 추가 기능이 Exchange 온-프레미스 사용자가 주로 사용하거나 사용자가 제어하는 타사 서비스에 액세스해야하는 경우 사용자 ID 토큰 사용을 고려하십시오.
• 추가 기능은 getUserIdentityTokenAsyncExchange 사용자 ID 토큰을 얻기 위해 전화를 걸 수 있습니다 .

 

OAuth2 흐름을 통해 얻은 액세스 토큰

• 추가 기능은 인증을 위해 OAuth2를 지원하는 타사 서비스에 액세스 할 수도 있습니다. 
• 애드 인이 제어 할 수 없는 타사 서비스에 액세스 해야 하는 경우 OAuth2 토큰 사용을 고려하십시오. 
• 이 방법을 사용하면 애드 인은 {displayDialogAsync} 예를 들어 OAuth2 흐름을 초기화하는 방법을 사용하여 서비스에 로그인하라는 메시지를 표시합니다 .

 

콜백 토큰

• 콜백 토큰은 Exchange Web Services (EWS) 또는 Outlook REST API를 사용하여 서버에서 사용자 사서함에 대한 추가 기능 액세스를 제공합니다. 
• 애드 인은 getCallbackTokenAsync메소드 중 하나를 사용하여 콜백 토큰을 얻습니다 . 
• 액세스 수준은 추가 기능 매니페스트에 지정된 권한에 의해 제어됩니다.

 

상황 별 애드인

상황 별 추가 기능이 Outlook에 표시됩니다.

 

• 상황 별 추가 기능의 매니페스트에는 속성으로 설정된 ExtensionPoint 요소가 포함되어야 합니다 . 
• 요소 내에서 추가 기능은 이를 활성화 할 수 있는 엔티티 또는 정규식을 지정합니다. 
• 엔터티가 지정된 경우 엔터티는 개체의 속성 중 하나 일 수 있습니다.

<ExtensionPoint xsi:type="DetectedEntity">

 

• 따라서 추가 기능 매니페스트에는 유형 규칙이 포함되어야 함

<Rule xsi:type="ItemHasKnownEntity"

• 다음 예는 전화 번호를 검색 할 때 추가 기능이 메시지에서 활성화되도록 지정하는 방법을 보여줍니다.

<ExtensionPoint xsi:type="DetectedEntity">
  <Label resid="contextLabel" />
  <SourceLocation resid="detectedEntityURL" />
  <Rule xsi:type="RuleCollection" Mode="And">
    <Rule xsi:type="ItemIs" ItemType="Message" />
    <Rule xsi:type="ItemHasKnownEntity" EntityType="PhoneNumber" Highlight="all" />
  </Rule>
</ExtensionPoint>

• 상황 별 추가 기능이 계정과 연결되면 사용자가 강조 표시된 엔터티 또는 정규식을 클릭하면 자동으로 시작
• 사용자는 알려진 엔티티 또는 개발자의 정규 표현식 인 텍스트를 통해 컨텍스트 추가 기능을 시작합니다.
• 일반적으로 사용자는 엔터티가 강조 표시되므로 상황 별 추가 기능을 식별합니다.

 

모듈 애드인

• 모듈 추가 기능은 메일, 작업 및 일정과 함께 Outlook 탐색 표시 줄에 나타납니다. 
• 추가 기능에서 Outlook JavaScript API의 모든 기능을 사용하고 Outlook 리본에서 명령 단추를 만들어 사용자가 추가 기능 콘텐츠와 상호 작용할 수 있습니다.
• 모듈 애드 인을 만들려면 애드 인의 매니페스트 파일에 모듈 확장 점을 포함시킵니다. 
• 다음 예제는 모듈 확장을 정의하도록 조정 된 매니페스트 파일의 스 니펫을 보여줍니다.

...

<!-- Add Outlook module extension point. -->

 

                  xsi:type="VersionOverridesV1_0">

 

                    xsi:type="VersionOverridesV1_1">

 

    <!-- Begin override of existing elements. -->

    <Description resid="residVersionOverrideDesc" />

 

    <Requirements>

      <bt:Sets DefaultMinVersion="1.3">

        <bt:Set Name="Mailbox" />

      </bt:Sets>

    </Requirements>

    <!-- End override of existing elements. -->

 

    <Hosts>

      <Host xsi:type="MailHost">

        <DesktopFormFactor>

          <!-- Set the URL of the file that contains the

                JavaScript function that controls the extension. -->

          <FunctionFile resid="residFunctionFileUrl" />

 

          <!-- Module extension point for a ModuleApp -->

          <ExtensionPoint xsi:type="Module">

            <SourceLocation resid="residExtensionPointUrl" />

            <Label resid="residExtensionPointLabel" />

 

            <CommandSurface>

              <CustomTab id="idTab">

                <Group id="idGroup">

                  <Label resid="residGroupLabel" />

 

                  <Control xsi:type="Button" id="group.changeToAssociate">

                    <Label resid="residChangeToAssociateLabel" />

                    <Supertip>

                      <Title resid="residChangeToAssociateLabel" />

                      <Description resid="residChangeToAssociateDesc" />

                    </Supertip>

                    <Icon>

                      <bt:Image size="16" resid="residAssociateIcon16" />

                      <bt:Image size="32" resid="residAssociateIcon32" />

                      <bt:Image size="80" resid="residAssociateIcon80" />

                    </Icon>

                    <Action xsi:type="ExecuteFunction">

                      <FunctionName>changeToAssociateRate</FunctionName>

                    </Action>

                  </Control>

                </Group>

                <Label resid="residCustomTabLabel" />

              </CustomTab>

            </CommandSurface>

          </ExtensionPoint>

        </DesktopFormFactor>

      </Host>

    </Hosts>

 

    <Resources>

      ...

    </Resources>

  </VersionOverrides>

</VersionOverrides>