Error using CardService in Google Apps Script Google Sheets Workspace Add-On - user-interface

I am building a Google Workspace add-on for Google Sheets and I'm trying to show a dialog using a card built by the CardService but I get the following error message.
TypeError: Cannot read properties of undefined (reading 'newCardHeader')
It appears the CardService object is undefined?
What am I doing wrong?
Code.gs
const ui = SpreadsheetApp.getUi();
const onOpen = e => {
ui.createAddonMenu()
.addItem( 'Help', 'showHelp', )
.addToUi();
}
const buildCard = () => {
const header = CardService.newCardHeader()
.setTitle( "CardTitle", );
const card = CardService.newCardBuilder()
.setHeader( header, )
.build();
return card;
}
const showHelp = () => {
const card = buildCard();
ui.showDialog( card, );
}

Summary from comments:
#TheMaster Actually, I think you might have solved it. When you asked whether it's an editor add-on or a workspace add-on. I guess I thought it was a workspace add-on but, in fact, it might have only been an editor add-on as I am writing the script in the script files bound to a Google Sheet. And that might be what's preventing the CardService from working?
So, make sure the add-on is a Google Workspace add-on and the code is written in a standalone script. If the script is written in the code editors bound to a Google Sheet, then the CardService won't work as the CardService is only available to Google Workspace add-ons and not Google Editor add-ons.

Related

Firefox - ReferenceError: PaymentRequest is not defined

I am trying to implement google pay on a website. The external library for google pay is loaded from pay.google.com. In this google script, they call the browser api PaymentRequest(). This api is built in popular browsers like Safari, Chrome, etc.
I have google pay working, but it does not work on Firefox. When the external script is loaded, it calls PaymentRequest and in the console the following error is shown:
ReferenceError: PaymentRequest is not defined
Link to google pay script
https://pay.google.com/gp/p/js/pay.js
Mozilla Firefox official webpage states that PaymentRequest is supported in secure context.
https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API
I copy and paste only the same code provided from the official source
From my perspective, PaymentRequest is not supported in Firefox and does not work. What am I missing?
Check out the console for both chrome and safari.
Google Pay is working for me on Firefox 78.0.1 on macOS using the following: https://jsfiddle.net/fw5t6caL/
Yes, it does log an error in the console at the following bit of code:
google.payments.api.UseCanMakePaymentResultFromPayjs && (new PaymentRequest([{
supportedMethods: [
'https://google.com/pay'
]
}
], {
total: {
label: 'Estimated Total Price',
amount: {
currency: 'USD',
value: '10'
}
}
})).canMakePayment().then(function (a) {
return ef = a
}).catch (function () {
return ef = !1
});
...but it does work. Are you able to try with the JSFiddle linked above?
Also, as an FYI, we've recently released a React and Web Component to simplify the Google Pay integration process. Consider using it as an alternative as it should make it easier to integrate.
Screenshot of JSFiddle output:
I am having the same Problem since a few days:
Uncaught ReferenceError: PaymentRequest is not defined
https://pay.google.com/gp/p/js/pay.js:272
This happens (I believe) in the Stripe Plugin for WooCommerce. The Error appears in Chrome and Firefox. No Idea at the Moment what I can do to fix it.

How to debug gmail-addons with real email

I want to create a gmail add-on. I've already created the quick start application:
https://developers.google.com/gmail/add-ons/guides/quickstart
So, trigger function for that example is :
function buildAddOn(e) {
// Activate temporary Gmail add-on scopes.
var accessToken = e.messageMetadata.accessToken;
GmailApp.setCurrentMessageAccessToken(accessToken);
var messageId = e.messageMetadata.messageId;
var senderData = extractSenderData(messageId);
var cards = [];
// Build a card for each recent thread from this email's sender.
if (senderData.recents.length > 0) {
senderData.recents.forEach(function(threadData) {
cards.push(buildRecentThreadCard(senderData.email, threadData));
});
} else {
// Present a blank card if there are no recent threads from
// this sender.
cards.push(CardService.newCardBuilder()
.setHeader(CardService.newCardHeader()
.setTitle('No recent threads from this sender')).build());
}
return cards;
}
In apps script editor, you can debug this function, but, since we are not in gmail, we can not get the "e" parameter, so actually you can not debug it with the real data.
I have deployed that example as a developer add-on and I can use it in my gmail account. I tried to find the function somewhere in the code, I put debugger; or console.log() but I was not able to debug in browser.
So, how can I debug gmail add-on script with real gmail data ?
Gmail addons can't run client-side code so the browser console will not be very helpful but we could use Logger to log messages to Script Editor or to use console to log messages to Stackdriver.
I'd suggest using the built in Logger: https://developers.google.com/apps-script/reference/base/logger.
You can view logs each time your add on runs.

Google Sheets API: How to "publish to web" for embeddable sheet?

If I wanted to publish a Google Sheets spreadsheet so I could embed it on a page within an iframe, I would manually do the following:
Navigate to Google Drive
Open a spreadsheet
File > Publish To Web > Embed > Copy the generated iframe link into an html file
How would I programmatically achieve the above through the Google Sheets API using JavaScript on the front end? I'm generating spreadsheets on the fly in my application and want to immediately embed them on the page once created.
Once the sheet is created, I can dynamically create an iframe element with the necessary attributes (the sheets ID, among others). That throws an error. From this question, it looks like a sheet needs to have a published: true attribute or something, but that requires using the Drive API - I'm trying to avoid that. Is this possible to handle only through the Sheets API?
After searching through the entire Sheets API, googling, and just general soul-searching, I had no choice but to include the Drive API and use it to do my bidding. Here's the solution I came up with. Hope this helps someone else out there!
Used this script from Google for the client-side JS library in the index.html file:
<body>
...
<script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
</body>
Then for the JS stuff:
// Cache the api's into variables.
var sheets = gapi.client.sheets;
var drive = gapi.client.drive;
// 1. CREATE NEW SPREADSHEET
sheets.spreadsheets.create({
properties: {
title: 'new-sheet'
}
}).then(function(newSpreadSheet) {
var id = newSpreadSheet.result.spreadsheetId;
// 2. PUBLISH SPREADSHEAT VIA DRIVE API
drive.revisions.update({
fileId: id,
revisionId: 1
}, {
published: true, // <-- This is where the magic happens!
publishAuto: true
}).then(function() {
// 3. DISPLAY SPREADSHEET ON PAGE VIA IFRAME
var iframe = [
'<iframe ',
'src="https://docs.google.com/spreadsheets/d/',
id,
'/pubhtml?widget=true&headers=false&embedded=true"></iframe>'
].join('');
// We're using jQuery on the page, but you get the idea.
$('#container').html($(iframe));
});
});
As you have concluded, it is not possible through the Sheets API today and is only possible through the Drive API (using the PATCH https://www.googleapis.com/drive/v3/files/fileId/revisions/revisionId request, documented at https://developers.google.com/drive/v3/reference/revisions/update).

Google service object for Google Calendar API

I am trying to use the Google Calendar API in .NET, specifically I am trying to get a list of events. According to the examples here, in different programming languages I need to create a 'service' object and an 'event' object. However, I can't find a clear explanation of what either of these objects is or how to initiate them. Does anyone have an explanation? Or can anyone provide any information or give me a link to where this is explained? It doesn't necessarily have to be in .NET
Here is the example in Java:
String pageToken = null;
do {
events = service.events().list('primary').setPageToken(pageToken).execute();
List<Event> items = events.getItems();
for (Event event : items) {
System.out.println(event.getSummary());
}
pageToken = events.getNextPageToken();
} while (pageToken != null);
Following the advice answered, I am getting the following error:
Could not load file or assembly 'Microsoft.Threading.Tasks.Extensions.Desktop, Version=1.0.16.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. The system cannot find the file specified.
Here is the code, the error occurs on the credentials = Await... line
Dim credential As UserCredential
Dim clientSecretsPath As String = Server.MapPath("~/App_Data/client_secret.json")
Dim scopes As IList(Of String) = New List(Of String)()
scopes.Add(CalendarService.Scope.Calendar)
Using stream = New System.IO.FileStream(clientSecretsPath, System.IO.FileMode.Open, System.IO.FileAccess.Read)
credential = Await GoogleWebAuthorizationBroker.AuthorizeAsync(GoogleClientSecrets.Load(stream).Secrets, scopes, "user", CancellationToken.None)
End Using
The problem with GoogleWebAuthorizationBroker is that it tries to launch a new instance of a web browser to go and get authorization where you have to click the "Grant" button.
Obviously if you're running a MVC project under IIS it's just going to get confused when the code tries to execute a web browser!
My solution:
Download the .net sample projects: https://code.google.com/p/google-api-dotnet-client/source/checkout?repo=samples
Build and run one of the projects relevant to you (Eg Calendar or Drive). Dont forget to include your client_secret.json file downloaded from the cloud console.
Run the project and it will open a new browser on your computer where you will have to click the "Grant" button. Do this once and then your MVC code will work because it will not try to open a web browser to grant the permissions.
I'm not aware of any other way to grant this permission to the SDK but it worked for me just great!
Good luck. This took me a good 5 hours to figure out.
Just had the same issue running VS2013 (using .net45 for my project):
After fetching the CalendarV3 API via NuGet you just have to manually add the reference to:
...packages\Microsoft.Bcl.Async.1.0.165\lib\net40\Microsoft.Threading.Tasks.Extensions.Desktop.dll
to the project (because it is not inserted automatically via the NuGet-Script)!
That's it! Maybe #peleyal is correcting the script somewhen in future ;)
Remember that this sample is for Java. My recommendation is to do the following:
Take a look in our VB sample for the Calendar API which is available here
You should take a look also in other sample for C#, let's say Tasks API sample
Start a new project and add a NuGet reference to Google.Apis.Calednar.v3. Remember that it's prerelease version.
Your code should look like the following:
It's based on the 2 samples above, I didn't compile or test it but it should work.
UserCredential credential;
using (var stream = new System.IO.FileStream("client_secrets.json",
System.IO.FileMode.Open, System.IO.FileAccess.Read))
{
credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(
GoogleClientSecrets.Load(stream).Secrets,
new[] { CalendarService.Scope.Calendar },
"user", CancellationToken.None);
}
// Create the service.
var service = new CalendarService(new BaseClientService.Initializer()
{
HttpClientInitializer = credential,
ApplicationName = "YOUR APP NAME HERE",
});
var firstCalendar = (await service.CalendarList.List().ExecuteAsync()).Items().FirstOrDefault();
if (firstCalendar != null)
{
// Get all events from the first calendar.
var calEvents = await service.Events.List(firstCalendar.Id).ExecuteAsync();
// DO SOMETHING
var nextPage = calEvents.NextPage;
while (nextPage != null)
{
var listRequest = service.Events.List(firstCalendar.Id);
// Set the page token for getting the next events.
listRequest.PageToken = nextPage;
calEvents = await listRequest.EsecuteAsync();
// DO SOMETHING
nextPage = calEvents.NextPage;
}
}
I had the same error, and it was due to the app trying to launch the accept screen.
I first tried to get the vb.net example from google and ran that, which I did get to work, and change to my secret info, ran and got the accept screen. I then tried my app, and it still did not work.
I noticed that the dll was found here under my project installed from the nuget packages.
...packages\Microsoft.Bcl.Async.1.0.165\lib\net40\Microsoft.Threading.Tasks.Extensions.Desktop.dll
but was not in the net45 dir. So I uninstalled the nuget packages (have to if changing the .net version) then changed my .net version for my project to 4.0 instead of 4.5, reinstalled the nuget packages, and then it worked!!

How to access HTTP Authentication dialog using Firefox SDK

I am writing a Firefox add-on for Linux users to pass credentials for NTLM authenticated sites.some what similar to AutoAuth which is written using XUL framework
https://addons.mozilla.org/en-us/firefox/addon/autoauth/
my question is how to access Authentication Dialog using Firefox SDK?
With the add-on sdk you don't have XUL overlays so only thing you really can do outside of that is to use the window watcher. Since popup windows are considered windows you'll see them in the onTrack function when they popup in the browser.
This example code watches windows looking for the window location chrome://global/content/commonDialog.xul which is similar to what the autoauth add-on is doing. That dialog is used for a number of auth questions so you'll have to do the additional work of detecting NTLM auth.
var { isBrowser } = require("sdk/window/utils");
var delegate = {
onTrack: function (window) {
if (!isBrowser(window) && window.location === "chrome://global/content/commonDialog.xul") {
// this could be the window we're looking for modify it using it's window.document
}
},
onUntrack: function (window) {
if (!isBrowser(window) && window.location === "chrome://global/content/commonDialog.xul") {
// undo the modifications you did
}
}
};
var winUtils = require("window-utils");
var tracker = new winUtils.WindowTracker(delegate);
With this code you're pretty much at the point of the autoauth add-on's load() function. You can use window.document.getElementById() to access the DOM of that window and alter the elements within it.
NOTE That the window-utils module is deprecated so you'll need to keep up with the SDK as they move from that module to (hopefully) something else similar.

Resources