How do I make a LTI External Tool link on a Page open in a new window?

[juliann_cavende]

We have an External Tool from one of our vendors configured in Canvas. In trying to use the "embed URL" function of this tool in Pages, I can't figure out the correct post parameters to input so the link will open in a new window/tab instead of the Canvas iframe (see screenshot below).

Any suggestions on what post parameters to use which would allow this to happen? I've tried the following:

"target=_blank"

"windowTarget=_blank"

"launch_type=window"

"launch_presentation_document_target=window"

"display=borderless"

Since I can use the tool in Modules, I used the External Tool to embed a URL there and looked at the parameters being sent (based on what I read here: https://canvas.instructure.com/courses/913512/pages/lti-launch-parameters). I tried those in Pages, but the URL will only open within Canvas iframe. This is not a user-friendly view for students.

I'm not a developer, so what am I missing here? Please and thank you!

[edmond_cheng]

Hi  @juliann_cavende , if you are adding an External Tool in Modules and want it to open in a new window, all you need to do is tick the "Load in a new tab" checkbox when you are selecting the External Tool. You don't need any additional LTI launch parameters (these are just additional bits of information you may want to send to the external application in your LTI launch request).

[juliann_cavende]

Thanks Edmond. I was able to add the External Tool in Modules and open in a new window. However, my question is about adding External Tools in Pages and having those links open in a new window/tab. 

[James]

 @juliann_cavende 

When you invoke an LTI from a module, it involves a POST operation. When you embed within a page or make a regular link to it, it's a GET request. To make it POST, you need to invoke Canvas so that it can load the LTI, not the call to the remote site directly.

That means that you need to configure it to open in a new window as Edmond said.

After that, read  LTI launch data in an iframe? for how to do this.

[juliann_cavende]

Thanks James. I followed the instructions in the other post; however, that embeds the entire External Tool in an iFrame in the Page like this:

And while those links then open in a new tab/window, this is not what I'm looking to accomplish. 

We have reading links in the courses. These link out to subscription content. Currently, I am manually adding them to the Master course in Pages for each week of the course. When anything changes with these links (either our SSO or vendor related changes), I have to manually edit all the links in all the courses (since there is no find/replace option in Canvas). With this new External Tool, any changes pertaining to these links are taken care of on the backend by the vendor providing this External Tool. Thus saving me enormous amounts of time managing these links. 

Modules = Week and there are multiple Pages within the Module covering things such as lectures, discussions, and required readings. The way we want the External Tool to work in our situation is:

1. In Pages, click Edit

2. In WYSIWYG editor, click LIRN Library External Tool

3. Input the necessary data to generate the reading link URL - question being, what can I enter in the Post parameters to have the URL open in a new window.

4. Click on "Embed" and this is what is shown on the Page

When a student clicks on Reading Link, it opens within the Canvas iframe. 

There are two scrollbars on the right. Readability is low especially when using anything other than a large monitor. It's not easy to get back to where you were in your course. The best user experience is to have this link open in a new window and, perhaps wrongfully, I thought it would be as simple as adding post parameters in step #3.

[James]

Thanks for sharing additional information, the first post was a little spotty about what you were trying to do.

It sounds like those post parameters are for the system that you're calling, not for Canvas, and so adding things like target="_blank" doesn't get passed to Canvas, it gets passed to the linking site, but it doesn't have the ability to open in a new window.

What does the HTML look like after you've inserted the link ... the one on your screenshot that says "Reading Link" in blue? Is it just a regular anchor link <a href= ... or is it an embed of some kind like an iframe?

If it's a regular link, then trying adding target="_blank" rel="noopener" to the HTML inside the anchor element; that's what Canvas adds when you tell it to open a link in a new window by using Ctrl+K to insert a link.

[juliann_cavende]

Thank you James. It is a regular a href link. Adding what you suggested did work in opening it in a new window; however, it's still within the Canvas iframe. Here's the code:

<p><a href="https://necb.instructure.com/courses/2058487/external_tools/retrieve?url=https%3A%2F%2Fproxy.lirn.net%2FssoRWP2%2Flti%2FNewEnglandCollegeOfBus%2F%3Fcustom_qurl%3Dhttp%3A%2F%2Flink.galegroup.com%2Fapps%2Fdoc%2FCX3727500208%2FGVRL%3Fu%3Dlirn13050%26sid%3DGVRL%26xid%3D719fbe57" data-api-endpoint="https://necb.instructure.com/api/v1/courses/2058487/external_tools/sessionless_launch?url=https%3A%2F%2Fproxy.lirn.net%2FssoRWP2%2Flti%2FNewEnglandCollegeOfBus%2F%3Fcustom_qurl%3Dhttp%3A%2F%2Flink.galegroup.com%2Fapps%2Fdoc%2FCX3727500208%2FGVRL%3Fu%3Dlirn13050%26sid%3DGVRL%26xid%3D719fbe57" data-api-returntype="SessionlessLaunchUrl">Reading Link</a></p>

I think I remember seeing a post about removing the Canvas iframe in links, so I'll search around again. But if you have suggestions, I'd love to see them!

[James · Accepted solution]

This is where I would try display=borderless. I'm shooting mostly in the dark, not having anything to test this with easily.

I would add it to the href, right after the ? and before the url=. Since it's now more than one parameter, you'll have to add an ampersand after it.

Here's a fragment.

... external_tools/retrieve?display=borderless&url=https ...

By the way, there's nothing special about adding it first, just that it's easier to find in that really long link. I don't know if you need it on the data-api-endpoint as well, but if it doesn't work the first time, then I would add it in that location as well.

[juliann_cavende]

Thank you James - that did the trick! I really appreciate your assistance with figuring this out!

[James]

I'm glad you got it figured out.