Working Example

OLPD-CIDE tag

Loading…

Code for example above

Add the courses JavaScript to the page:


{% block bottom_js %}{{ parent() }}
<script src="/assets/dist/js/courses.min.js"></script>
{% endblock %}

In this case we're not using the loader macro. It's just HTML:


<div id="courses-container" class="loader-container" aria-live="polite"
    data-courses-app {# The JavaScript is looking for this to indicate that it should pull a feed in #}
    data-a="both" {# The value from the "a" parameter in Link Pro in the course tool: https://apps.cehd.umn.edu/Programs/LinkPro.aspx #}
    data-d="both" {# The value from the "d" parameter in Link Pro in the course tool: https://apps.cehd.umn.edu/Programs/LinkPro.aspx #}
    data-p="OLPD-CIDE" {# The value from the "p" parameter in Link Pro in the course tool: https://apps.cehd.umn.edu/Programs/LinkPro.aspx #}
    data-t="" {# OPTIONAL The value from the "t" parameter in Link Pro in the course tool: https://apps.cehd.umn.edu/Programs/LinkPro.aspx #}
    data-h="0" {# OPTIONAL The value from the "h" parameter in Link Pro in the course tool: https://apps.cehd.umn.edu/Programs/LinkPro.aspx #}
    data-target-element-selector="#courses-container" {# The element selector for the feed html #}
    data-template-path="/assets/dist/views/cehd/courses/" {# The path the the Nunjucks template #}
    data-template-name="list.html" {# The name of the Nunjucks template #}
    data-limit="2"> {# How many courses to put in each group #}
    <div class="loader">
        <div class="loader-figure "></div>
        <p class="loader-label">Loading&hellip;</p>
    </div>
</div>

The code explained

Including the JavaScript file in the example above enables us to include some parameters in HTML data attributes.

Providing the information in the format above is enough to pull in a specific tag. The data-template-path and data-template-name attributes indicate where the Nunjucks template is. Templates have to be in the public directory so browsers can access them.

That's what will render the list of courses.


{% for program in data.programs %}
    {% if loop.index < data.limit %}
    <h3>{{ program.title }}</h3>
    <p>{{ program.courseDescription }}</p>
    {% endif %}
{% endfor %}

Course feed data points

Course feed data points
key	description	type	example
academicCareer	GRAD or UNDERGRAD	string	GRAD
catalogNumber	Course catalog number	string	5103
courseDescription	Short course description	string	Examination of systems and philosophies of education globally...
deliveryMethod	Is the course online?	string	not online
description	Concise description	string	Comparative Education
program	Internal program reference	string	OLPD-CIDE
programDescription	Short program descriptor	string	EDPA
title	Course title	string	EDPA 5103