canvas-header-widget

Parameters

• type
• topic
• usecase
• title

URL Structure

../canvas-header-widget/header.html?page=r0.1day1

Adding to a canvas page

<!-- -------------------------------------------- 
    iFrame Header for page roverview0
    See https://bit.ly/comanage-canvas-header-key and
    https://github.internet2.edu/InCommon-Training/canvas-header-widget
    For additional details 
  ----------------------------------------------- -->

<div style="position: relative; height: 0; overflow: hidden; padding-top: 30px; padding-bottom: 200px;">
  <iframe style="position: absolute; top: 0; left: 0; border: none; width: 100%; height: 230px;" src="https://github.internet2.edu/pages/InCommon-Training/canvas-header-widget/header.html?page=r0.1day1"></iframe>
</div>

<!-- TOPIC NAVIGATION -->
  <!-- Include course-specific navigation here with links. -->

<!-- PAGE CONTENT -->
<div class="cvt-reading-content">

  <!-- The content -->

</div>

Changing the header

page URL Variable (aka, pageValue Variable)

When embedding the header as an iFrame, you will include a "page" parameter at the end of the URL (in the example above the value of page is r0.1day1):

https://github.internet2.edu/pages/InCommon-Training/canvas-header-widget/header.html?page=[page variable goes here]

Each page refers to one page within Canvas that will display this header. Each page is listed in the pageValue variable (located in a file called pageIndex.js in this repository) which looks something like this:

The pageValue Variable

var pageValue = {
  'r0.1.0preday1': {
      course: 'registry', 
      topic: 'r-preday1', 
      type: 'overview', 
      day: 'prework', 
      usecase: 'b', 
      title: 'Preparation for DAY ONE'
    },
  'r0.1day1': {
      course: 'registry', 
      topic: 'r-day1', 
      type: 'overview', 
      day: 'day1', 
      usecase: 'b', 
      title: 'Workshop DAY ONE'
    },
  'r0.2.0preday2': {
      course: 'registry', 
      topic: 'r-preday2', 
      type: 'overview', 
      day: 'prework', 
      usecase: 'b',
      title: 'Preparation for DAY TWO'
    },
  .
  . 
  .
}

Each pageValue entry contains the following variables:

• course - the course for which the entry is for. See the courseValues Variable section below for more details.
• topic - the topic that the page belongs to. In the case of COmanage registry, this value matches the Canvas Module that the page is in. See the topicValues Variable section below for more details.
• type - the type of resource the page is, for example, a learning module, hands on exercise, or overview page. See the typeValues Variable section below for more details.
• day - NOT USED. The workshop day that the resource will be used.
• usecase - The exercise use case that the resource is used for (if applicable). See the usecaseValues Variable section below for more details.
• title - the title that should be displayed on the page

TO HELP PREPARE THE ENTRIES FOR pageValue, we used a Google Sheet spreadsheet. This spreadsheet can be found in the COmanage Page references for headers file in the Internet2 folder,

COmanage Training > Canvas Blueprint Resources

courseValues Variable

LOCATION: courseNum.js file in this repository

Note that metadata about this value is included in the courseValues variable in the courseNum.js` file in this repository, including the Canvas LMS course number.

topicValues Variable

LOCATION: registryPages.js file in this repository

Each topic refers to one of the topics that a page can belong to. The topicValues variable includes metadata about each topic and looks something like this:

The topicValues Variable

var topicValues = {
    'r-preday1': {
      name: 'Preparation for DAY ONE', 
      wayfinding: 'wayfinding/Day1.png?raw=true', 
      wayfindingWt: 'wayfinding-white/Day1.png?raw=true', 
      moduleURL: '/pages/0-intro-workshop-day-0-pre-work-required', 
      exerciseURL: '/pages/0-intro-workshop-day-0-pre-work-required'
    },
    'r-day1': {
      name: 'DAY ONE', 
      wayfinding: 'wayfinding/Day1.png?raw=true', 
      wayfindingWt: 'wayfinding-white/Day1.png?raw=true', 
      moduleURL: '/pages/0-intro-workshop-day-0-pre-work-required', 
      exerciseURL: '/pages/0-intro-workshop-day-0-pre-work-required'
    },
    . 
    .
    . 
  }

Each topicValues entry contains the following variables:

• name - the text that describes the topic
• wayfinding - a relative link to an image used for wayfinding for this topic. There are two versions; this is the black/dark one. These images can be found in the wayfinding folder in this repository.
• wayfinding@t - - a relative link to an image used for wayfinding for this topic. There are two versions; this is the white/light one. These images can be found in the wayfinding-white folder in this repository.
• moduleURL - NOT USED. This item was put in place to enable page update of the iFrame parent of this header, but this can only work if cross-origin resource sharing is available - see below
• exerciseURL - NOT USED. This item was put in place to enable page update of the iFrame parent of this header, but this can only work if cross-origin resource sharing is available - see below

typeValues Variable

LOCATION: registryPages.js file in this repository

Each type refers to one of the topics that a page can belong to. The typeValues variable includes metadata about each type and looks something like this:

The typeValues Variable

var typeValues = {
    'module': {
      name: 'module', 
      alt: 'Pre-work/learning module', 
      wayfinding: 'wayfinding/MODULE.png?raw=true', 
      wayfindingWt: 'wayfinding-white/MODULE.png?raw=true'
    },
    'exercise': {
      name: 'exercise',
      alt: 'Hands-on Exercise', 
      wayfinding: 'wayfinding/WORKBOOK.png?raw=true', 
      wayfindingWt: 'wayfinding-white/WORKBOOK.png?raw=true'
    },
    . 
    .
    . 
  }

Each typeValues entry contains the following variables:

• name - the text that describes the type
• alt - the text that should be displayed if the image is not available.
• wayfinding - a relative link to an image used for wayfinding for this type. There are two versions; this is the black/dark one. These images can be found in the wayfinding folder in this repository.
• wayfinding@t - - a relative link to an image used for wayfinding for this type. There are two versions; this is the white/light one. These images can be found in the wayfinding-white folder in this repository.

usecaseValues Variable

LOCATION: registryPages.js file in this repository

Each usecase refers to one of the use case that a page (usually an exercise) can refer to. The usecaseValues variable includes metadata about each use case and looks something like this:

The usecaseValues Variable

var usecaseValues = {
    'e': {
        name: 'Enterprise', 
        alt: 'Enterprise use case', 
        wayfinding: 'wayfinding/Enterprise.png?raw=true',
        wayfindingWt: 'wayfinding-white/Enterprise.png?raw=true'
    },
    'eg': {
        name: 'Enterprise; Guest Registry', 
        alt: 'Enterprise; Guest Registry', 
        wayfinding: 'wayfinding/EntGst.png?raw=true',
        wayfindingWt: 'wayfinding-white/EntGst.png?raw=true'
    },
    . 
    .
    . 
  }

Each typeValues entry contains the following variables:

• name - the text that describes the use case
• alt - the text that should be displayed if the image is not available.
• wayfinding - a relative link to an image used for wayfinding for this use case. There are two versions; this is the black/dark one. These images can be found in the wayfinding folder in this repository.
• wayfinding@t - - a relative link to an image used for wayfinding for this use case. There are two versions; this is the white/light one. These images can be found in the wayfinding-white folder in this repository.

A NOTE ABOUT THE LACK OF EMBEDDED LINKS IN THE HEADER

Although there is commented-out code that would enable the header to contain links to refresh the parent frame, they have not been enabled because they would require cross-origin control between Canvas and the location where this header is stored. This is possible in Canvas LMS by setting up CORS headers, but was not implemented in Spring 2024 when the header was created, so the applicable code has been commented out.

NOTE: CORS (Cross Origin Resource Sharing) headers will need to be set up on Canvas eventually to allow for Canvas courses to display images or documents that may be served from other locations, for example, Github, gDrive, or other locations on the web.

APPENDIX

example Topic Navigation for the COmanage Registry course:

<div style="background: var(--cvt-blue-lt); padding: 0.5rem 1rem">
    <!--Topic - 1 | Getting started-->
    <a class="cvt-btn" style="border: 1px solid var(--cvt-gray-dkt); background: var(--cvt-white);" href="/courses/77/pages/1-getting-started">
        <img src="https://github.internet2.edu/InCommon-Training/comanage-files/blob/master/registry/course-images/wayfinding/1-GettingStarted.png?raw=true" alt="1 Getting Started" style="height:20px;">
    </a>

    <!--Topic - 2 | People-->
    <a class="cvt-btn" style="border: 1px solid var(--cvt-gray-dkt); background: var(--cvt-white);" href="/courses/77/pages/2-people">
        <img src="https://github.internet2.edu/InCommon-Training/comanage-files/blob/master/registry/course-images/wayfinding/2-People.png?raw=true" alt="2 People" style="height:20px;">
    </a>

    <!--Topic - 3 | Structure-->
    <a class="cvt-btn" style="border: 1px solid var(--cvt-gray-dkt); background: var(--cvt-white);" href="/courses/77/pages/3-Structure">
        <img src="https://github.internet2.edu/InCommon-Training/comanage-files/blob/master/registry/course-images/wayfinding/3-Structure.png?raw=true" alt="3 Structure (Organizations)" style="height:20px;">
    </a>

    <!--Topic - 4 | IDs and Auth-->
    <a class="cvt-btn" style="border: 1px solid var(--cvt-gray-dkt); background: var(--cvt-white);" href="/courses/77/pages/4-IDs-and-Authenticators">
        <img src="https://github.internet2.edu/InCommon-Training/comanage-files/blob/master/registry/course-images/wayfinding/4-IDsAndAuth.png?raw=true" alt="4 IDs and Authenticators" style="height:20px;">
    </a>

    <!--Topic - 5 | Enrollment-->
    <a class="cvt-btn" style="border: 1px solid var(--cvt-gray-dkt); background: var(--cvt-white);" href="/courses/77/pages/5-Enrollment-Flows">
        <img src="https://github.internet2.edu/InCommon-Training/comanage-files/blob/master/registry/course-images/wayfinding/5-Enrollment.png?raw=true" alt="5 Enrollment Flows" style="height:20px;">
    </a>

    <!--Topic - 6 | Provisioners-->
    <a class="cvt-btn" style="border: 1px solid var(--cvt-gray-dkt); background: var(--cvt-white);" href="/courses/77/pages/6-Provisioners">
        <img src="https://github.internet2.edu/InCommon-Training/comanage-files/blob/master/registry/course-images/wayfinding/6-Provisioners.png?raw=true" alt="6 Provisioners" style="height:20px;">
    </a>

    <!--Topic - 7 | Offboarding-->
    <a class="cvt-btn" style="border: 1px solid var(--cvt-gray-dkt); background: var(--cvt-white);" href="/courses/77/pages/7-Offboarding">
        <img src="https://github.internet2.edu/InCommon-Training/comanage-files/blob/master/registry/course-images/wayfinding/7-Offboarding.png?raw=true" alt="7 Offboarding" style="height:20px;">
    </a>
</div>
<div>
    <p><strong>QUICK LINKS</strong>: <a href="/courses/77">HOME and COURSE OVERVIEW</a> | <a href="/courses/77/pages/0-intro-workshop-day-0-pre-work-required">PREWORK for Day 1</a> | <a href="/courses/77/pages/0-intro-workshop-day-1">DAY 1</a> | <a href="/courses/77/pages/0-intro-workshop-day-2-pre-work-required">PREWORK Day 2</a> | <a href="/courses/77/pages/0-intro-workshop-day-2">DAY 2</a> | <a href="/courses/77/pages/workbook-use-cases">Workbook Use Cases</a></p>
    <p><a href="/courses/77/pages/201-dot-0-installing-comanage">Return to SECTION OVERVIEW</a></p>
</div>
<hr/>