How to configure XML for LTI to open in new tab?

[zweifel]

Hi Everyone,

I was installing a LTI application to canvas. I want this LTI to appear in User navigation and Course Navigation of canvas. And when someone clicks on it, it should open in new tab. After installing this everything is fine except one. LTI app is not appearing in the new tab. I found in configuration API Importing Extended Tool Configurations - Canvas LMS REST API Documentation following code for new tab <lticm:property name=" windowTarget ">_blank </lticm:property>

Below is XML for my LTI:

<?xml version="1.0" encoding="UTF-8"?>

<cartridge_basiclti_link xmlns="http://www.imsglobal.org/xsd/imslticc_v1p0"

   xmlns:blti = "http://www.imsglobal.org/xsd/imsbasiclti_v1p0"

   xmlns:lticm ="http://www.imsglobal.org/xsd/imslticm_v1p0"

   xmlns:lticp ="http://www.imsglobal.org/xsd/imslticp_v1p0"

   xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"

   xsi:schemaLocation = "http://www.imsglobal.org/xsd/imslticc_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticc_v1p0.xsd

   http://www.imsglobal.org/xsd/imsbasiclti_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imsbasiclti_v1p0.xsd

   http://www.imsglobal.org/xsd/imslticm_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticm_v1p0.xsd

   http://www.imsglobal.org/xsd/imslticp_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticp_v1p0.xsd">

<blti:launch_url>https://.starfishsolutions.com/starfish-ops/support/ltiLogin.html</blti:launch_url>

<blti:title>Starfish</blti:title>

   <blti:description>Go to Starfish</blti:description>

   <blti:extensions platform="canvas.instructure.com">

<lticm:property name="privacy_level">public</lticm:property>

<lticm:options name="course_navigation">

<lticm:property name="enabled">true</lticm:property>

</lticm:options>

<lticm:options name="user_navigation">

<lticm:property name="url">https://.starfishsolutions.com/starfish-ops/support/ltiLogin.html</lticm:property>

         <lticm:property name="enabled">true</lticm:property>

<lticm:property name=" windowTarget ">_blank </lticm:property>

</lticm:options>

</blti:extensions>

</cartridge_basiclti_link>

Any suggestions to resolve this will be appreciated.

[garth]

 @zweifel ​ your XML looks like it's missing some stuff, but if it's working...

Have you looked at this tool to help generate your XML:

• XML Config Builder

Anyway, try moving your "windowTarget" into your placement options.

Using your XML it would look like this:

<lticm:options name="course_navigation">

<lticm:property name="enabled">true</lticm:property>

<lticm:property name=" windowTarget ">_blank </lticm:property>

</lticm:options>

<lticm:options name="user_navigation">

<lticm:property name="url">https://.starfishsolutions.com/starfish-ops/support/ltiLogin.html</lticm:property>

<lticm:property name="enabled">true</lticm:property>

<lticm:property name=" windowTarget ">_blank </lticm:property>

</lticm:options>

Placing the "windowTarget" in my XML like this is working, launching my LTI tool in a new browser tab.

I hope this helps.

[zweifel]

Thank you Garth.  It works now. 

[garth]

Sweet!  Thanks for posting back : )

[tom_lamy]

Hi. Does anyone know if there is there a property that will set the order of the menu item in course nav?

[garth]

 @tom_lamy ‌ i have not used lti to configure course navigation, but i have used the api to arrange course navigation in a specific way

• https://community.canvaslms.com/groups/canvas-developers/blog/2016/09/09/api-use-case-standardize-co...‌

Not sure if that's exactly what you're looking for, but maybe it will help.

[themidiman]

Hi Thomas

The LTI XML code doesn't specify position in the course navigation. But there is an API endpoint that can do this after the LTI configuration is completed: Tabs - Canvas LMS REST API Documentation 

[tom_lamy]

Hi Jeff,

I would have never thought to look at tabs. It worked like a charm. Note that under the PUT call to update a tab for course there is a note that says "The Home and Settings tabs are not manageable, and can't be hidden or moved". I found this to be true for Announcements (position 2) as well.

Thank you

[c_carrillo1]

The windowTarget _blank property does not work with user_navigation link placement.  Even if you set it in the XML, the link will still open in Canvas in-frame.  I thought I should mention this because the conversation at the top of this thread implies that it is possible to open in a new tab.  This may have worked in the past; if so, something changed in Canvas so it no longer functions with this particular placement.

[lmsstaff]

Hey all, sometimes you need to create LTIs (external tools) on a mass scale OR make changes on a mass scale.  I put together this Python script to do just that.  Maybe this will help someone.

Provided 'as is', but it works pretty well.

[dtod]

Here's some code you can use in the javascript console to update any arbitrary object value.

// take the object that you got from the url and update it with the partial object you have
function updateObjVal(object, searchObj) {
	//console.log(object);
    Object.keys(searchObj).forEach(function (k) {
        if (object[k] && typeof object[k] === 'object' && typeof searchObj[k] === 'object') {
            return updateObjVal(object[k], searchObj[k])
        }
		else{
			object[k] = searchObj[k];
		}
    });
	return object;
}

// get the existing json from the url
function updateTool(url, updateObj){
	$.ajax({
	url: url,
	type: 'GET',
	success: function(data) {
			// console.log(data);
			//console.log(updateObj);
			var updatedObj = updateObjVal(data,updateObj);
			putUpdate(url,updatedObj);
		}
	});
}

// send the updated json back
function putUpdate(url, updatedObj){
	console.log(updatedObj);
	var updateString = decodeURIComponent(jQuery.param( updatedObj ));
	$.ajax({
		url: url,
		type: 'PUT',
		data: updateString,
		success: function(data) {
			console.log('Tool was updated.');
			}
		});
}

// e.g. /api/v1/courses/281820/external_tools/22087 visible from network panel in console after you look at Placements for example
var targeturl="/api/v1/accounts/3371/external_tools/40870";

// the update object is any fragment of the json that you want to update
var updateObj = {"course_navigation": {
					"default": "disabled",
					 "text": "Some Name",
					 "label": "Some Name"
					}
				};

updateTool( targeturl, updateObj );

[c_carrillo1]

@dtod your code looks great.  Do you think you could give an example of how it could be used to make a "user navigation" placement link open in a new tab  (adding a windowTarget="_blank" to the LTI link in the Account area in Canvas) ?

[dtod]

Sure. I tend to forget that I have the JSON Formatter Chrome Extension that makes JSON really easy to look at and decipher, but you just need to look at the JSON and only need to include the object attribute you want to change or add, i.e. 

var updateObj = {"account_navigation": {
"windowTarget": "_blank"
}};

[c_carrillo1]

@dtod I sincerely appreciate your help and I apologize in advance for my lack of understanding.

The URL I'm trying to force to load in a new window is:

/users/85/external_tools/14559

the '85' in the URL changes depending on who is logged into Canvas at the moment.

I've tried both of these target URLs trying to follow your example:

/users/85/external_tools/14559
/api/v1/users/85/external_tools/14559

The update object I'm using is:

var updateObj = {"account_navigation": {
"windowTarget": "_blank"
}};

... in the end nothing I do seems to have any effect.  When I click the link, it still opens in a frame instead of in a new tab.

I feel that I am fundamentally misunderstanding the usage of this code.  May I humbly ask that you point me again in the right direction?

Thank you.

Chris

[dtod]

Your target url looks wrong. It should be /api/v1/accounts/...

Tools should be defined under App Configurations on the Account Settings. Here's what's in my network panel after looking at the placements for one of our tools.

[c_carrillo1]

I found the correct link from the console:

/api/v1/accounts/145230000000000001/external_tools/14559

I've tried a few combinations of updateObj, but I cannot get the code to either add objects or modify object values when I go to the target URL  The json is always exactly the same.

I guess perhaps I'm still not using the tool correctly.

@dtod would you be willing to have a Zoom session with me sometime to help me figure out what I'm doing wrong?

[dtod]

sure. My email is my username @vccs.edu