Questions related to global_navigation

[jb3]

When I install a LTI with a global_navigation placement, an img tag is created for the icon:

<li id="context_external_tool_612_menu_item" class="menu-item ic-app-header__menu-list-item">
<a class="ic-app-header__menu-list-link" href="https://community.canvaslms.com/accounts/1/external_tools/612?launch_type=global_navigation">
<img src="URL to .svg" alt="">
<div class="menu-item__text">
Menu Text
</div>
</a>
</li>

Question 1: How does the Canvas Commons LTI (or other related global_navigation LTI) add an inline svg icon to the global_navigation link?

<li id="context_external_tool_183_menu_item" class="menu-item ic-app-header__menu-list-item">
<a class="ic-app-header__menu-list-link" href="https://community.canvaslms.com/accounts/1/external_tools/183?launch_type=global_navigation">
<svg version="1.1" class="ic-icon-svg ic-icon-svg--lti menu-item__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64">
<path d="omitted"></path>
</svg>
<div class="menu-item__text">
Commons
</div>
</a>
</li>

I can use the Theme javascript to change it from an img tag to an inline svg but it is noticeably slower than the way that the Canvas Commons LTI is doing it.

Also, when installing an LTI with the global_navigation placement the Accounts side menu is opened up by default when the LTI menu item is clicked. I am talking about the element with ID = '#left-side' that includes menu items such as 'Courses', 'People', 'Admin Tools', 'Settings', etc. I can hide it with the Theme javascript but there is a delay.

if (document.title == "LtiWindowTitleHere") {
$('#left-side').hide();
$('#main').css('margin', '0px')
}

Question 2: How does the Canvas Commons LTI (or other related global_navigation LTI) show itself without showing that side menu described above?

Here is the xml configuration I am using:

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<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:title>theTitle</blti:title>

<blti:description>theDescription</blti:description>

<blti:custom name="custom_fields">

<lticm:property name="canvas_account_id">$Canvas.account.id</lticm:property>

<lticm:property name="canvas_account_name">$Canvas.account.name</lticm:property>

<lticm:property name="canvas_account_sis_id">$Canvas.account.sisSourceId</lticm:property>

<lticm:property name="canvas_api_domain">$Canvas.api.domain</lticm:property>

<lticm:property name="canvas_shard_id">$Canvas.shard.id</lticm:property>

<lticm:property name="canvas_membership_roles">$Canvas.membership.roles</lticm:property>

<lticm:property name="canvas_root_account_id">$Canvas.root_account.id</lticm:property>

<lticm:property name="canvas_global_root_account_id">$Canvas.root_account.global_id</lticm:property>

<lticm:property name="canvas_user_id">$Canvas.user.id</lticm:property>

<lticm:property name="canvas_user_login_id">$Canvas.user.loginId</lticm:property>

<lticm:property name="canvas_masquerading_user_id">$Canvas.masqueradingUser.id</lticm:property>

<lticm:property name="canvas_masquerading_user_user_id">$Canvas.masqueradingUser.userId</lticm:property>

<lticm:property name="person_email_primary">$Person.email.primary</lticm:property>

<lticm:property name="person_name_full">$Person.name.full</lticm:property>

<lticm:property name="person_name_full">$Person.name.full</lticm:property>

<lticm:property name="person_sourced_id">$Person.sourcedId</lticm:property>

</blti:custom>

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

<lticm:property name="tool_id">theToolID</lticm:property>

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

<lticm:options name="global_navigation">

<lticm:property name="text">theMenuItemText</lticm:property>

<lticm:property name="url">theLaunchUrl</lticm:property>

<lticm:property name="icon_url">theIconUrl</lticm:property>

<lticm:property name="visibility">admins</lticm:property>

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

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

</lticm:options>

<lticm:options name="environments">

<lticm:property name="launch_url">TheTestLaunchUrl?</lticm:property>

<lticm:property name="domain">TheTestLaunchDomain?</lticm:property>

<lticm:property name="test_launch_url">TheTestLaunchUrl</lticm:property>

<lticm:property name="test_domain">TheTestLaunchDomain</lticm:property>

<lticm:property name="beta_launch_url">TheBetaLaunchUrl</lticm:property>

<lticm:property name="beta_domain">TheBetaDomain</lticm:property>

</lticm:options>

</blti:extensions>

<cartridge_bundle identifierref="BLTI001_Bundle"/>

<cartridge_icon identifierref="BLTI001_Icon"/>

</cartridge_basiclti_link>

Thanks in advance!

[MattHanes · Accepted solution]

I apologize if this is not helpful and I don't have any experience in creating an LTI. However, my thought is that maybe you can try to recreate some of the parameters from the Commons LTI in your XML configuration? When I pull the data for Commons, it has some extra fields that might be something that can be configured in the XML.

So I was thinking that supplying that "icon_svg_path_64" as a parameter or the "canvas_icon_class" might help you with your inline problem. 

And maybe the "display_type" set to full_width is how it launches without the side menu.

[jb3]

Thanks Matt that looks promising. I will let you know if it works.

[jb3]

Matt, the display_type and icon_path_svg_64 worked for me. I found that the svg viewBox has to be 0,0,64,64 and here is the code that confirms it on github. 

Questions 1 and 2 are solved thanks!

[MattHanes]

Glad I could help!