Category: SlidesApp

Using Hyperlinks in Dialogs and Sidebars to open a URL in a new Tab with Google Apps Script

If you’ve landed on this page you’re probably wondering why your hyperlinks are not working in your Google Workspace dialogue (dialog for my U.S. friends) box or sidebar.

This affects all locations where you can build a sidebar or dialogue with Google Apps Scripts, Sheets, Docs, Slides and Forms.

You might even hit F12 in your browser to inspect the code and found this dreaded error:

Unsafe attempt to initiate navigation for frame with origin ‘https://docs.google.com’ from frame with URL ‘https://n-yyi3lctp…<<fileID>>…-0lu-script.googleusercontent.com/userCodeAppPanel’. The frame attempting navigation of the top-level window is sandboxed, but the flag of ‘allow-top-navigation’ or ‘allow-top-navigation-by-user-activation’ is not set.

linking from a Google Workspace sidebar or dialog error Unsafe attempt to initiate navigation for frame

Why your Links aren’t working in your Google Workspace Dialogs and Sidebars

So what’s going on?

Dialogues and sidebars in Google Workspace are set in iframes. Essentially, this is a nested webpage on your main page. Take a look at the examples, below. I’m in Chrome here and I have selected the Developer Tools Element Selector (Ctrl + Shift + C for PC) and clicked on the Sidebar and Dialogue box respectively.

For the Sidebar.

Google Workspace Sidebars are in iframes

And for the dialogue box.

Google Workspace Dialogs are in iframes

When you create a simple HTML hyperlink in your anchor tag like this:

<a href="https://yagisanatode.com">Website</a>
You are asking the iframe to open a URL in its parent window, your Sheet, Doc, Slide or Form, and browsers generally don’t like to let you do this.

The Solution

The solution is really easy. Simply add target="_blank" to your anchor element:

<a href="https://yagisanatode.com" target="_blank">Website</a>
The target ‘_blank’  attribute will generally open the link in a new tab for most browsers. Note that a user may change their settings to open in a new window instead of a new tab.
Target ‘_blank’ implicitly adds the rel="noopener" behaviour on most browsers to prevent the destination link from tampering with the original source.

The video

https://youtu.be/bAXD8chlQyQ

Example Implementation

If you want to see an example implementation you can get your own copy of the sample Sheet with bound Apps Script from the link below:
Easter eggs, a bonus Google Sheet formula for linking images in a cell and a fun way to call object methods from a Ui method are all in the example sheet.
Once you made a copy of the Sheet, click on the ‘More’ custom menu item and select from the Sidebar or Dialogue box implementation to see it in action. You will have to Authorise the scopes the first time though.
To look at the code, go to Extensions > Apps Script.
Have fun!

If you have found the tutorial helpful, why not shout me a coffee ☕? I'd really appreciate it.

Create and Publish a Google Workspace Add-on with Apps Script Course

Need help with Google Workspace development?

My team of experts can help you with all of your needs, from custom app development to integrations and security. We have a proven track record of success in helping businesses of all sizes get the most out of Google Workspace.

Schedule a free consultation today to discuss your needs and get started or learn more about our services here.

~Yagi

Google Apps Script: Automated PDF Certificated Creator That Is Emailed to the Attendee (Updated Feb 2022)

Google Apps Script: DriveApp, PropertiesService, SpreadsheetApp, GmailApp, SlidesApp. Google Slides, Google Sheets.

Have you ever wondered how people create certificates en mass and send them out automatically? You are in the right place.

In this tutorial, we are going to:

  1. Create Certificates of Attendance for multiple attendees using Google Slides and a list of attendees in Google Sheets.
  2. Send those certificates as an attached PDF to the attendees.

We’ll set it up so it is super user-friendly with a handy menu in your Google Slide template so that all you have to do is to update your Google Sheet of names each time you run the course and then click a few buttons.

Google Apps Script Menu Items in Google Slides

Also, we will run an example so you can see how it all works and what you need to do to set it up.

For the coders out there, I think I have documented the Google Apps Script code enough for you to figure out how to quickly implement your own project. However, I have also added a smalls discussion of some parts of the code at the end.

This is a standalone tutorial. However, it draws from two main tutorials if you want to explore those first (Though it is not essential):

Let’s get cracking.

Continue reading “Google Apps Script: Automated PDF Certificated Creator That Is Emailed to the Attendee (Updated Feb 2022)”