When working with LMS it makes sense to provide access to eJournal from the main LMS user navigation bar. For example when a student wants to upload personal evidence, not tied to a particular course.
- Inside Canvas, go to Admin > Developer Keys and edit the eJournal tool configuration by clicking on the pencil icon.
- Add the user navigation to the placements, click save.
- Switch the method on top to 'JSON Input'. Then add the following to the highlighted text (we only need the value under 'placements'). What you need to enter depends on the existing JSON:
"extensions": [
{
"settings": {
"placements": [
...
{
"placement": "user_navigation",
"message_type": "LtiResourceLinkRequest",
"display_type": "full_width"
}
...
],
},
}
]
- Add the following JS code to the Theme JS file. Change the [INSTANCE_URL] to your Canvas URL, and [EXTERNAL_TOOL_ID] to the tool ID (they both appear only once). You can find them as follows:
/**
// @name Global Nav - Custom Links
// @namespace https://github.com/robert-carroll/ccsd-canvas
//
**/
(function () {
'use strict';
// configure links
const links = [
{
title: 'eJournal',
icon_svg: '<svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">\
<path d="M1653.333 1707H266.667c-88.214 0-160-71.787-160-160V960.333H640v213.334h640V960.333h533.333V1547c0 88.213-71.786 160-160 160Zm-906.666-640h426.666V853.667H746.667V1067Zm-480-533.333h1386.666c88.214 0 160 71.786 160 160v160H1280V747H640v106.667H106.667v-160c0-88.214 71.786-160 160-160Zm480-266.667c0-29.44 23.893-53.333 53.333-53.333h320c29.44 0 53.333 23.893 53.333 53.333v160H746.667V267Zm906.666 160H1280V267c0-88.213-71.787-160-160-160H800c-88.213 0-160 71.787-160 160v160H266.667C119.68 427 0 546.68 0 693.667V1547c0 146.987 119.68 266.667 266.667 266.667h1386.666c146.987 0 266.667-119.68 266.667-266.667V693.667C1920 546.68 1800.32 427 1653.333 427Z" fill-rule="evenodd"/>\
</svg>',
href: `https://[INSTANCE_URL]/users/${ENV.current_user.id}/external_tools/[EXTERNAL_TOOL_ID]`,
target: ''
}, // ready for another
];
// leave this alone
const globalNavCustomLinks=()=>{const e=document.querySelector("html").getAttribute("dir")??"ltr",t="#menu",o=`span[dir="${e}"] div[role="dialog"] ul`;if(!document.querySelector(t)&&!document.querySelector(o))return;const r=(e,r=!0)=>{e.forEach((e=>{((e,r=!0)=>{const n=e.title.replace(/\W/g,"_").toLowerCase(),s=r?o:t,c=document.querySelector(`${s} li:last-child`),i=r?`${o} svg[name="IconDashboard"]`:"#global_nav_dashboard_link";var l=document.querySelector(i).closest("li").cloneNode(!0);l.setAttribute("id",(r?"rspv-":"")+`global_nav_${n}_link-item`),l.querySelector("svg").parentElement.classList.add((r?"rspv-":"")+`svg-${n}-holder`),l.querySelector("a").setAttribute("id",(r?"rspv-":"")+`global_nav_${n}_link`),l.querySelector("a").href=e.href,void 0!==e.target&&e.target.includes("_blank","_self","_parent")&&l.querySelector("a").setAttribute("target",e.target);try{(l.querySelector('span[letter-spacing="normal"]')||l.querySelector(".menu-item__text")||l.querySelector('span[class$="text"]')).textContent=e.title}catch(e){console.log(e)}const a=l.querySelector((r?".rspv-svg":".svg")+`-${n}-holder`);var u;if(1==r?u=l.querySelector("svg").classList:(l.classList.remove("ic-app-header__menu-list-item--active"),u=["ic-icon-svg","menu-item__icon","ic-icon-svg--apps","ic-icon-svg-custom-tray","gnct_icon_svg"]),l.querySelector("svg").remove(),1==/^icon-[a-z]/.test(e.icon_svg)?a.insertAdjacentHTML("afterbegin",`<div id="${(r?"rspv-":"")+`global_nav_${n}_svg`}" role="presentation"><i class="icon-line ${e.icon_svg} gnct_inst_menu_icon"></i></div>`):/^http/.test(e.icon_svg)?fetch(e.icon_svg,{mode:"cors",method:"GET",headers:{"Access-Control-Request-Method":"GET",Accept:"text/plain","Content-Type":"text/plain"}}).then((e=>e.text())).then((e=>{a.insertAdjacentHTML("afterbegin",e),l.querySelector("svg").setAttribute("id",(r?"rspv-":"")+`global_nav_${n}_svg`),u.forEach((e=>{l.querySelector("svg").classList.add(e)}))})).catch(console.error.bind(console)):/^<svg/.test(e.icon_svg)&&(a.insertAdjacentHTML("afterbegin",e.icon_svg),l.querySelector("svg").setAttribute("id",`rspv-global_nav_${n}_svg`),u.forEach((e=>{l.querySelector("svg").classList.add(e)}))),void 0!==e.position&&"number"==typeof e.position){var d=(1==r?o:"#menu")+` > li:nth-of-type(${e.position})`;document.querySelector(d).after(l)}else void 0!==e.position&&"after"==e.position?c.after(l):c.before(l)})(e,r)}))},n=function(e,t){let c=document.querySelector(o);c?null!=c&&null!=document.querySelector(".mobile-header-hamburger").offsetParent&&(t.disconnect(),r(links,!0),s()):void 0===t&&new MutationObserver(n).observe(document.body,{childList:!0,subtree:!0})},s=function(e,t){let r=document.querySelector(o);null==r?null==r&&(t.disconnect(),n()):void 0===t&&new MutationObserver(s).observe(document.body,{childList:!0,subtree:!0})};n(),r(links,!1)};
// handle css, you can remove or comment the next line if you're also using Global Nav Custom Tray
!function(){if(0==document.querySelectorAll('[data-global-nav-custom-css="set"]').length){let t={"i.gnct_inst_menu_icon:before":"font-size: 32px; width: 32px; line-height: 32px;","i.gnct_inst_menu_icon":"width: 32px; height: 32px; font-style: bold;",".gnct_icon_svg":"width: 32px !important; height: 32px !important; font-style: bold;"};if(void 0!==t&&Object.keys(t).length>0){let e=document.createElement("style");e.setAttribute("data-global-nav-custom-css","set"),document.head.appendChild(e);let n=e.sheet;Object.keys(t).forEach((function(e){n.insertRule(`${e} { ${t[e]} }`,n.cssRules.length)}))}}}();
// set left to right or right to left language direction
globalNavCustomLinks('ltr');
})();
The button will be available for all users in the (sub) account where the javascript is added. So make sure to scope this accordingly.