How to Create a page in the UPC and Import it to a Canvas Child Page

The UPC is intended to house the SSC content so that only one course needs to be updated to apply changes to tools and pages across other courses. It came about because there is a lot of overlap between all the learner resource courses but the differences are stark enough that the same page can’t be used in each course. As of right now, all of the content in the LAM is housed in the UPC and referenced in the individual lam pages. Here is how to use it.

Step 1: Create a parent page in the UPC.

You will need to have your final created content housed in a page in the UPC. Right now, the UPC is organized to where each module represents a different course or body of content. This may change in the future as we move towards more universal tools and pages, but for now, make sure you have made it clear what your page is and what children it is supposed to populate. Make sure the page and module are published or it may not transfer correctly to the children pages.

Step 2: Using the import code.

The line of code that makes the UPC possible is short and simple, however each part is very important. This code will be written into the html editor of the children canvas pages. Below is the code, and a breakdown of each of its components and their functions.

<p><a class="dp-import-page" href="CUSTOM UPC URL" data-api-endpoint="CUSTOM UPC URL" data-api-returntype="Page">CUSTOM REPLACEMENT TEXT</a></p>

</div>

This is the style wrapper for the child page. It is unique to each individual course, and it is the first line of every canvas page. The unique style wrapper for each course should be included at the top of the code to make sure that the title heading and footer if applicable transfer over correctly. In future courses, UPC pages will not have a header or style, and each will be created separately in the respective child course. This is to allow for multiple courses to use the tools but still allow them their own style guides and themes.

This code will not be included in the vast majority of UPC children. It is the code that calls any custom CSS files into the page. For reference, this is what makes the LAM homepage icons grow and brighten in their hover states. If a course uses any custom CSS, that CSS file needs to be housed in the child course itself and then referenced on each applicable page.

Item 3 is the most important part of the code as this is the portion that pulls content from the UPC into the child. This code will be unique to each page in the UPC, but will remain consistent if that page is used across various courses. For example, if a page is used in both the LAM and the Learning Library, this code will be the same. The only portions of the code that change are typed out in capital letters and should be unique to each UPC page referenced.

The “CUSTOM UPC URL” is the url for the UPC page you are trying to embed in a child page. It is listed twice in the code, once after the href=” tag and once after the data-api-endpoint=” tag. It is the same in both instances.

The custom replacement text that follows the > at the end of the code is the only thing that users will see if the content is not loading correctly from the UPC. It is also the only thing that can be seen in the standard editor. If you see this after you have saved your edits and have closed editing mode, there is something wrong with your code. Make sure the url’s are typed correctly and that the UPC page and module are published.

NOTES:

This code can be used more than once on a child page. If you have multiple tools or pages that you want to include on your child page, simply put the <p><a class="dp-import-page" href="CUSTOM UPC URL" data-api-endpoint="CUSTOM UPC URL" data-api-returntype="Page">CUSTOM REPLACEMENT TEXT</a></p> portion of your code where you want it on your page and make sure the URL’s are referencing the correct UPC pages.

Try some experiments creating children in your sandbox before publishing your own content. Review the LAM pages to see some example of how the code is used. Reach out if you have any questions!