Wanneer je met een LMS werkt, is het handig om eJournal bereikbaar te maken vanuit de hoofdnavigatiebalk van het LMS. Bijvoorbeeld wanneer een student persoonlijke bewijsstukken wil uploaden die niet aan een specifieke cursus gekoppeld zijn.
- Ga in Canvas naar Admin > Developer Keys en bewerk de configuratie van de eJournal-tool door op het potloodicoon te klikken.
- Voeg de gebruikersnavigatie toe aan de placements en klik op opslaan.
- Zet de methode bovenaan op 'JSON Input'. Voeg vervolgens het onderstaande toe aan de uitgelichte tekst (we hebben alleen de waarde onder 'placements' nodig). Wat je precies moet invoeren, hangt af van de bestaande JSON:
"extensions": [
{
"settings": {
"placements": [
...
{
"placement": "user_navigation",
"message_type": "LtiResourceLinkRequest",
"display_type": "full_width"
}
...
],
},
}
]
- Voeg de volgende JS-code toe aan het Theme JS-bestand. Vervang [INSTANCE_URL] door je Canvas-URL en [EXTERNAL_TOOL_ID] door het tool-ID (beide komen maar één keer voor). Je vindt ze als volgt:
/**
// @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');
})();
De knop is beschikbaar voor alle gebruikers in het (sub)account waar de javascript wordt toegevoegd. Zorg er dus voor dat je dit passend afbakent.
- Bewerk de Navbar die voor de organisatie wordt gebruikt
- Klik onder "Links" op "Add Links"
- Zoek naar "eJournal" en selecteer het. Is het niet beschikbaar, klik dan op "Create Custom Link" en volg stap 2.1 tot en met 2.4; ga anders door naar stap 3
2.1 Vul bij "name" "eJournal" in
2.2 Selecteer bij "URL" de optie "Insert Quicklink" en navigeer naar "eJournal" onder third party tools
2.3 Zet "Behaviour" op "Same window"
2.4 Klik op "create" - Klik op "Add"
- Het venster zou moeten sluiten en onder "Links" zou de nieuwe link "eJournal" moeten verschijnen
- Verplaats de eJournal-link naar de gewenste plek
- Klik op "Save and Close" om de nieuwe navbar op te slaan
Deze stappen werken zowel bij het bewerken van de navigatiebalk van een cursus als van een Top-Level navigatiebalk.