Editor actions

Spark icon

AI-generated Key Takeaways

Google Workspace add-ons use Action objects to define interactive behavior triggered by user interactions with UI widgets.
An action's callback function executes when triggered and receives an event object containing interaction details, requiring a specific response object to be returned.
Add-ons extending Editors and using REST APIs can request file access using a widget action with a specialized response object returned by its callback function.
Requesting file access involves building a homepage card to check for drive.file scope and providing a way for users to grant this scope if needed.

Use Action objects to build interactive behavior into Google Workspace add-ons.

Action objects define what happens when a user interacts with a widget (for example, a button) in the add-on UI.

Add an action to a widget

To attach an action to a widget, use a widget handler function, which also defines the condition that triggers the action. When triggered, the action executes a designated callback function. The callback function is passed an event object that carries information about the user's client-side interactions. You must implement the callback function and have it return a specific response object.

Example: Display a new card when a button is clicked

If you want to add a button to your add-on that builds and displays a new card when clicked, follow the steps below:

Create a button widget.
To set a card-building action, add the button widget handler function setOnClickAction(action).
Create an Apps Script callback function to execute and specify it as the (action) within the widget handler function. In this case, the callback function should build the card you want and return an ActionResponse object. The response object tells the add-on to display the card the callback function built.

The following example shows the creation of a button widget. The action requests the drive.file scope for the current file on behalf of the add-on.

/**
*AddsasectiontotheCardBuilderthatdisplaysa"REQUEST PERMISSION"button.
*Whenit's clicked, the callback triggers file scope permission flow. This is used in
*theadd-onwhenthehome-pagedisplaysbasicdata.
*/
functionaddRequestFileScopeButtonToBuilder(cardBuilder){
varbuttonSection=CardService.newCardSection();
//Iftheadd-ondoesnothaveaccesspermission,addabuttonthat
//allowstheusertoprovidethatpermissiononaper-filebasis.
varbuttonAction=CardService.newAction()
.setFunctionName("onRequestFileScopeButtonClickedInEditor");
varbutton=CardService.newTextButton()
.setText("Request permission")
.setBackgroundColor("#4285f4")
.setTextButtonStyle(CardService.TextButtonStyle.FILLED)
.setOnClickAction(buttonAction);
buttonSection.addWidget(button);
cardBuilder.addSection(buttonSection);
}
/**
*Callbackfunctionforabuttonaction.InstructsDocstodisplaya
*permissionsdialogtotheuser,requesting`drive.file`scopeforthe
*currentfileonbehalfofthisadd-on.
*
*@param{Object}eTheparametersobjectthatcontainsthedocument’sID
*@return{editorFileScopeActionResponse}
*/
functiononRequestFileScopeButtonClickedInEditor(e){
returnCardService.newEditorFileScopeActionResponseBuilder()
.requestFileScopeForActiveDocument().build();

File access interactions for REST APIs

Google Workspace add-ons that extend the Editors and use REST APIs can include an additional widget action to request file access. This action requires the associated action callback function to return a specialized response object:

Action attempted	Callback function should return
Request file access for current_document	`EditorFileScopeActionResponse`

To make use of this widget action and response object, all of the following must be true:

The add-on uses REST APIs.
The add-on presents the request file scope dialog using the CardService.newEditorFileScopeActionResponseBuilder().requestFileScopeForActiveDocument().build(); method.
The add-on includes the https://www.googleapis.com/auth/drive.file editor scope and onFileScopeGranted trigger in its manifest.

Request file access for current document

To request file access for the current document, follow these steps:

Build a homepage card that checks whether the add-on has drive.file scope.
For cases where the add-on hasn’t been granted drive.file scope, build a way to request that users grant drive.file scope for the current document.

Example: Get current document access in Google Docs

The following example builds an interface for Google Docs that displays the size of the current document. If the add-on doesn’t have drive.file authorization, it displays a button to initiate the file scope authorization.

/**
*Buildasimplecardthatchecksselecteditems' quota usage. Checking
*quotausagerequiresuser-permissions,sothisadd-onprovidesabutton
*torequest`drive.file`scopeforitemstheadd-ondoesn't yet have
*permissiontoaccess.
*
*@parameTheeventobjectpassedcontaininginformationaboutthe
*currentdocument.
*@return{Card}
*/
functiononDocsHomepage(e){
returncreateAddOnView(e);
}
functiononFileScopeGranted(e){
returncreateAddOnView(e);
}
/**
*Forthecurrentdocument,displayeitheritsquotainformationor
*abuttonthatallowstheusertoprovidepermissiontoaccessthat
*filetoretrieveitsquotadetails.
*
*@parameTheeventcontaininginformationaboutthecurrentdocument
*@return{Card}
*/
functioncreateAddOnView(e){
vardocsEventObject=e['docs'];
varbuilder=CardService.newCardBuilder();
varcardSection=CardService.newCardSection();
if(docsEventObject['addonHasFileScopePermission']){
cardSection.setHeader(docsEventObject['title']);
//Thisadd-onusestherecommended,limited-permission`drive.file`
//scopetogetgranularper-fileaccesspermissions.
//See:https://developers.google.com/drive/api/v2/about-auth
//Iftheadd-onhasaccesspermission,readanddisplayitsquota.
cardSection.addWidget(
CardService.newTextParagraph().setText(
"This file takes up: "+getQuotaBytesUsed(docsEventObject['id'])));
}else{
//Iftheadd-ondoesnothaveaccesspermission,addabuttonthat
//allowstheusertoprovidethatpermissiononaper-filebasis.
cardSection.addWidget(
CardService.newTextParagraph().setText(
"The add-on needs permission to access this file's quota."));
varbuttonAction=CardService.newAction()
.setFunctionName("onRequestFileScopeButtonClicked");
varbutton=CardService.newTextButton()
.setText("Request permission")
.setOnClickAction(buttonAction);
cardSection.addWidget(button);
}
returnbuilder.addSection(cardSection).build();
}
/**
*Callbackfunctionforabuttonaction.InstructsDocstodisplaya
*permissionsdialogtotheuser,requesting`drive.file`scopeforthe
*currentfileonbehalfofthisadd-on.
*
*@param{Object}eTheparametersobjectthatcontainsthedocument’sID
*@return{editorFileScopeActionResponse}
*/
functiononRequestFileScopeButtonClicked(e){
returnCardService.newEditorFileScopeActionResponseBuilder()
.requestFileScopeForActiveDocument().build();
}

Editor actions Stay organized with collections Save and categorize content based on your preferences.