Add CN ePortfolio as a regular LTI tool

Hint: to ensure best user experience, please kindly advise your users to use Google Chrome or Firefox browsers to access CN ePortfolio. Please complete three parts of the guide.

PART1: Install LTI Tool

Step 1: Go to Settings

• Select the Settings option on the left-hand menu of the institution admin page.

Step 2: Click on “Apps”

• Click on the “Apps” tab at the top of the page.
• In the “Apps” tab, click on the blue “Add App” button.

Step 3: Configure App Settings

• Select the Configuration Type “Paste XML” from the drop down
• Enter “CN ePortfolio” into the name field
• Enter the LTI key in the Consumer key field. (We will share this information with you separately, please do not share this confidential credential)
• Enter the LTI secret in the Shared Secret field. (We will share this information with you separately, please do not share this confidential credential)
• Copy and paste the following code into the XML Configuration field. Be sure to copy and paste all of it. Then click submit.

__________________________________________________________________________________________

________________________________________________________________________________________________________________________

HINT: *If your institution is a Canvas licensee, please contact lti@coursenetworking.com and request a consumer key and shared secret specifically generated to connect a CN Channel to your LTI license keys*

Step 4: Display

• After submitting the CN ePortfolio App configuration information, it appears under the “External Tools” section.
• If you click on “Account” from the left-side Global Navigation Menu of Canvas and select “Profile” from the opened menu, on the next page you will see the “CN ePortfolio” on the loaded page:

• If you click on “CN ePortfolio” it will load your CN ePortfolio. Therefore, click on “CN ePortfolio and you will see a page like below:

Note: In our case the URL to access “CN ePortfolio” is http://<domain_address>/user/1/external_tools/6 . This address would be necessary for the next steps to add “CN ePortfolio” as an item into the Canvas Global Navigation.

Enable custom JavaScript and CSS file upload into Canvas

To add the “CN ePortfolio” to the Canvas Global Navigation we need load a small piece of JavaScript code in addition to Canvas default codes. Canvas Administrator can enable this feature from the Institutional Admin settings page. Be sure to complete parts 2 and 3.

PART2: Customize JS File

 Step 1: Go to Settings

To add the CN ePortfolio LTI to the global navigation, you need to make a small change in provided JavaScript file which is provided by CourseNetworking. Here is the JavaScript code that needs to be modified and uploaded into the Canvas.

_________________________________________________________________________________________ 

________________________________________________________________________________________________________________________

On above code, you can replace the second part in the ( ) of “addMenuItem” (the highlighted section) with the address of “CN ePortfolio” LTI tool obtained in “Step 4” of “Add CN ePortfolio as a regular LTI tool”.

This code should be saved as file with “.js” extension.

If you are using the Canvas default theme, you need to create a new JS file. If you already have a custom theme, you just need to edit your existing JS file. 

The JavaScript file should be added into your current theme. For this purpose, you can go through the following steps:

PART3: Add JS File to Theme

Step 1: Go to Current Theme

• Go to Themes section of your institution in Canvas and select your currently using theme.

Step 2: Upload

• Follow the steps shown on below figure to upload the JavaScript file and save the theme (i.e. 1 being the first thing you do)

Check the Result

At this step we are done with the settings and you can go to homepage to check the result. The “CN ePortfolio” item should be appeared on the left side menu of Canvas and by clicking on that, the “CN ePortfolio” will be shown to user.