Google 편집기 인터페이스 빌드

Google Workspace 부가기능을 사용하면 편집 도구 내에서 맞춤설정된 인터페이스를 제공할 수 있습니다. Google Docs, Sheets, Slides 등입니다 이를 통해 사용자에게 작업을 자동화하고 타사 시스템을 편집자를 클릭합니다.

부가기능 UI 액세스

편집기에서 Google Workspace 부가기능을 열 수 있습니다. Google Workspace 빠른 시작 메뉴에 아이콘이 표시되는 경우 Docs, Sheets, Slides 사용자 오른쪽에 있는 측면 패널에 액세스 인터페이스에 추가되었습니다.

Google Workspace 부가기능은 다음 인터페이스를 표시할 수 있습니다.

  • 홈페이지 인터페이스: 부가기능의 매니페스트에 트리거 포함 EDITOR_NAME.homepageTrigger: 사용자가 부가기능을 여는 편집기의 경우 부가기능이 빌드되고 특히 모바일 사용자를 위한 홈페이지 카드를 있습니다. 부가기능의 매니페스트에 사용자가 여는 편집기의 EDITOR_NAME.homepageTrigger 넣으면 일반 홈페이지 카드가 대신 표시됩니다.

  • REST API 인터페이스: 부가기능이 REST를 사용하는 경우 API를 사용하면 문서에 대한 파일별 액세스를 요청하는 트리거를 포함할 수 있습니다. drive.file 범위를 사용합니다. 승인되고 나면 다른 트리거가 호출됨 EDITOR_NAME.onFileScopeGrantedTrigger 실행 및 파일과 관련된 인터페이스를 표시합니다.

  • 링크 미리보기 인터페이스: 부가기능 제3자 서비스와 통합되므로, 데이터를 미리 볼 수 있는 콘텐츠를 삭제합니다.

편집기 부가기능용 인터페이스 빌드

다음 단계에 따라 편집자용 편집기 부가기능 인터페이스를 빌드하세요.

  1. 해당하는 addOns.common님, addOns.docs님, addOns.sheets님, 및 addOns.slides 입력란을 부가기능 스크립트 프로젝트 매니페스트에 추가합니다.
  2. 필요한 편집자 범위를 스크립트 프로젝트 매니페스트에 이 값을 설정합니다.
  3. 에디터 전용 홈페이지를 제공하는 경우 구현하고 EDITOR_NAME.homepageTrigger 함수를 사용하여 인터페이스를 빌드합니다. 그렇지 않은 경우 common.homepageTrigger 드림 인터페이스를 사용하여 호스트 앱의 공통 홈페이지를 구축하세요.
  4. REST API를 사용하는 경우 drive.file 범위 승인 흐름을 구현합니다. 및 EDITOR_NAME.onFileScopeGrantedTrigger 트리거 함수를 사용하여 열린 파일과 관련된 인터페이스를 표시합니다. 자세한 내용은 자세한 내용은 REST API 인터페이스를 참조하세요.
  5. 서드 파티 서비스의 링크 미리보기를 구성하는 경우 https://www.googleapis.com/auth/workspace.linkpreview 범위 승인 흐름 linkPreviewTriggers 함수를 사용하세요. 자세한 내용은 링크 미리보기 인터페이스.
  6. 사용자의 버튼 클릭과 같은 UI 상호작용

편집기 홈페이지

부가기능의 스크립트 프로젝트에 홈페이지 트리거 함수를 제공해야 합니다. 단일 Card를 빌드하고 반환하는 또는 부가기능의 홈페이지를 구성하는 Card 객체의 배열입니다.

홈페이지 트리거 함수에는 이벤트 객체가 전달됩니다. 클라이언트의 플랫폼과 같은 정보가 포함된 매개변수로 사용됩니다. 다음을 수행할 수 있습니다. 이벤트 객체 데이터를 사용하여 홈페이지 구성을 맞춤설정합니다.

일반 홈페이지나 편집기 전용 홈페이지를 표시할 수 있습니다. 사용자가 부가기능을 열 때

공통 홈페이지 표시

편집기에 부가기능의 공통 홈페이지를 표시하려면 편집기 필드(예: addOns.docs) addOns.sheets님, 또는 addOns.slides, 할 수 있습니다.

다음 예는 Google Workspace 부가기능의 addons 부분을 보여줍니다. 합니다. 이 부가기능은 Docs, Sheets, Slides를 확장하고 각 호스트 앱의 홈페이지입니다.

 "addOns": {
    "common": {
      "name": "Translate",
      "logoUrl": "https://www.gstatic.com/images/branding/product/1x/translate_24dp.png",
      "layoutProperties": {
        "primaryColor": "#2772ed"
      },
      "homepageTrigger": {
        "runFunction": "onHomepage"
      }
    },
    "docs": {},
    "sheets": {},
    "slides": {}
  }
}

에디터 전용 홈페이지 표시

편집자별 홈페이지를 표시하려면 부가기능에 EDITOR_NAME.homepageTrigger를 추가하세요. 합니다.

다음 예는 Google Workspace 부가기능 매니페스트의 addons 부분을 보여줍니다. Docs, Sheets, Slides에서 부가기능을 사용 설정합니다. Kubernetes는 Google Docs 및 Slides의 홈페이지와 Sheets의 고유한 홈페이지를 제공합니다. 콜백 onSheetsHomepage 함수는 Sheets 전용 홈페이지 카드를 빌드합니다.

 "addOns": {
    "common": {
      "name": "Translate",
      "logoUrl": "https://www.gstatic.com/images/branding/product/1x/translate_24dp.png",
      "layoutProperties": {
        "primaryColor": "#2772ed"
      },
      "homepageTrigger": {
        "runFunction": "onHomepage"
      }
    },
    "docs": {},
    "slides": {},
    "sheets": {
     "homepageTrigger": {
       "runFunction": "onSheetsHomepage"
     },
  }
}

REST API 인터페이스

부가기능이 Google Sheets API와 같은 REST API를 사용하는 경우 onFileScopeGrantedTrigger 함수를 사용하여 새 인터페이스를 표시할 수 있습니다. 편집기 호스트 앱에서 열려 있는 파일에만 적용됩니다.

다음을 사용하려면 drive.file 범위 승인 흐름을 포함해야 합니다. onFileScopeGrantedTrigger 함수. drive.file 요청 방법을 알아보려면 자세한 내용은 현재 문서의 파일 액세스 요청을 참고하세요.

사용자가 drive.file 범위를 부여하면 EDITOR_NAME.onFileScopeGrantedTrigger.runFunction 발생할 수 있습니다. 트리거가 실행되면 상황별 트리거 함수를 실행합니다. EDITOR_NAME.onFileScopeGrantedTrigger.runFunction 필드로 지정됩니다. 부가기능 매니페스트에 있습니다.

편집기 중 하나에 대한 REST API 인터페이스를 만들려면 다음 단계를 따르세요. EDITOR_NAME를 선택한 편집기 호스트 앱으로 바꿉니다. 예를 들어 sheets.onFileScopeGrantedTrigger를 사용합니다.

  1. EDITOR_NAME.onFileScopeGrantedTrigger를 포함합니다. 를 입력합니다. 예를 들어 Google Sheets에서 이 인터페이스를 만들고 싶다면 "sheets" 섹션
  2. EDITOR_NAME.onFileScopeGrantedTrigger에 이름이 지정된 함수를 구현합니다. 섹션으로 이동합니다. 이 함수는 이벤트 객체를 인수로 허용하며 Card 객체 또는 Card 객체의 배열입니다.
  3. 여느 카드와 마찬가지로 상호작용을 위한 인터페이스를 제공합니다. 예를 들어 인터페이스에는 연결된 Action과 버튼 클릭 시 실행되는 콜백 함수가 구현되어 있어야 합니다. 알 수 있습니다.

다음 예는 Google Workspace 부가기능 매니페스트의 addons 부분을 보여줍니다. 이 부가기능은 REST API를 사용하므로 onFileScopeGrantedTrigger가 다음을 위해 포함됩니다. Google Sheets 사용자가 drive.file 범위를 부여하면 콜백 함수는 onFileScopeGrantedSheets는 파일별 인터페이스를 빌드합니다.

"addOns": {
   "common": {
     "name": "Productivity add-on",
     "logoUrl": "https://www.gstatic.com/images/icons/material/system_gm/1x/work_outline_black_18dp.png",
     "layoutProperties": {
       "primaryColor": "#669df6",
       "secondaryColor": "#ee675c"
     }
   },
   "sheets": {
     "homepageTrigger": {
       "runFunction": "onEditorsHomepage"
     },
     "onFileScopeGrantedTrigger": {
       "runFunction": "onFileScopeGrantedSheets"
     }
   }

서드 파티 서비스의 링크 미리보기를 사용 설정하려면 링크를 구성해야 합니다. 미리보기를 표시하고 미리보기를 반환하는 함수를 만드세요. 카드를 사용합니다. 사용자 승인이 필요한 서비스의 경우 함수가 변경할 수 있습니다.

링크 미리보기를 사용 설정하는 단계는 다음을 참고하세요. 스마트 칩으로 링크 미리보기.

이벤트 객체

이벤트 객체가 생성되고 전달되어 다음과 같은 함수를 트리거합니다. EDITOR_NAME.homepageTrigger 드림 또는 EDITOR_NAME.onFileScopeGrantedTrigger. 트리거 함수는 이벤트 객체를 사용하여 부가기능 카드를 구성하는 방법을 결정하거나 제공합니다.

이벤트 객체의 전체 구조는 이벤트 객체에 설명되어 있습니다.

편집자가 부가기능의 실행 호스트 앱인 경우 이벤트 객체에는 다음이 포함됩니다. Docs, Sheets 또는 Slides 클라이언트 정보를 전달하는 이벤트 객체 필드입니다.

부가기능에 현재 사용자에 대한 drive.file 범위 승인이 없는 경우 또는 문서일 때 이벤트 객체에는 docs.addonHasFileScopePermission, sheets.addonHasFileScopePermission 또는 slides.addonHasFileScopePermission 필드입니다. 부가기능에 이벤트 객체에 모든 편집기 이벤트 객체 필드가 포함됩니다.

다음 예는 sheets.onFileScopeGrantedTrigger 함수를 사용하세요. 이 부가기능에는 현재 문서에 대한 drive.file 범위 승인:

`        {
          "commonEventObject": { ... },
          "sheets": {
            "addonHasFileScopePermission": true,
            "id":"A_24Q3CDA23112312ED52",
            "title":"How to get started with Sheets"
          },
          ...
        }