Questions related to global_navigation

Jump to solution
jb3
Community Novice

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.
<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!

Labels (1)
1 Solution
MattHanes
Community Champion

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.

279201_pastedImage_1.png

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.

View solution in original post