How to Integrate Retool with Canvas LMS

In Canvas, click your account avatar (top-left) → Account → Settings. Scroll down to the Approved Integrations section and click New Access Token. Enter a purpose description like 'Retool Dashboard' and optionally set an expiration date (leaving it blank creates a non-expiring token — use expiration for security in production environments). Copy the token immediately after generation — Canvas only shows it once. The token looks like a long alphanumeric string prefixed with a number (e.g., 1234~xxxxxxxxxxxxxxxxxx). Important permission considerations: The token inherits the permissions of the account that generated it. An instructor token can access their own courses and students. An admin token can access all courses and users in the institution. For a comprehensive LMS admin dashboard, you'll want an admin-level token. Contact your Canvas system administrator if you need elevated permissions. For institution-level deployments, Canvas also supports OAuth 2.0 developer keys — this is the preferred approach for multi-user or multi-institution tools. For a single-team Retool dashboard, a personal access token is sufficient and much simpler to configure.

In Retool, navigate to the Resources tab and click Add Resource. Select REST API. Configure the resource: - Name: Canvas LMS API - Base URL: https://yourschool.instructure.com/api/v1 Replace 'yourschool' with your institution's Canvas subdomain. The /api/v1 path is included in the base URL since all Canvas REST API endpoints start with it. For authentication, select Bearer Token from the Authentication dropdown. Enter your Canvas personal access token in the Token field. Alternatively, store the token in Configuration Variables: go to Settings → Configuration Variables, create CANVAS_ACCESS_TOKEN, mark it as secret, and use {{ retoolContext.configVars.CANVAS_ACCESS_TOKEN }} as the token value. Add a Content-Type header: Key: Content-Type, Value: application/json. Click Create Resource. Test the connection by creating a query with method GET and path /courses. Canvas returns an array of course objects the authenticated user can access. If you see a JSON array of courses, the connection is working. A 401 error means the token is invalid; a 403 error means the account doesn't have permission to access that resource.

Create a query named getCourses with method GET and path /courses. Add query parameters to filter and paginate: - enrollment_type: teacher (or 'student', 'ta', 'observer' — use 'teacher' to see courses where the authenticated user is an instructor) - per_page: 50 (Canvas's default is 10; maximum is 100) - include[]: total_students (add student count to each course object) - state[]: available (filter to currently active courses; options: unpublished, available, completed, deleted) For admin-level accounts, use path /accounts/1/courses to get all courses in the institution (account ID 1 is typically the root account). Add state[]: available and per_page: 100. Canvas uses Link header-based pagination — the response headers contain a Link header with URLs for next, prev, first, and last pages. When results exceed per_page, you must follow the 'next' link to get subsequent pages. In Retool, implement this by checking if the response has a next page link and incrementing the page parameter. Create a getEnrollments query with path /courses/{{ select_course.value }}/enrollments and parameters: - type[]: StudentEnrollment - state[]: active - per_page: 100 Bind getCourses to a Select component for course selection.

1// Transformer for Canvas courses
2const courses = data || [];
3return courses.map(course => ({
4  id: course.id,
5  name: course.name,
6  code: course.course_code || '',
7  term: course.enrollment_term_id || '',
8  students: course.total_students || 0,
9  start_date: course.start_at
10    ? new Date(course.start_at).toLocaleDateString()
11    : '',
12  end_date: course.end_at
13    ? new Date(course.end_at).toLocaleDateString()
14    : '',
15  workflow_state: course.workflow_state,
16  is_public: course.is_public || false
17}));

Create a getAssignments query with method GET and path /courses/{{ select_course.value }}/assignments. Add parameters: - per_page: 50 - include[]: submission (includes the authenticated user's submission data — for admins, this is less useful; skip if building admin tools) - order_by: due_at Each assignment object includes: id, name, due_at, points_possible, submission_types, and grades_published. For submission data across all students, create a getSubmissions query with path /courses/{{ select_course.value }}/assignments/{{ select_assignment.value }}/submissions. Add parameters: - include[]: user (includes submitting user's name and email) - include[]: submission_comments (includes any feedback left by instructor) - per_page: 100 Each submission object includes: id, user_id, user (name and email when included), assignment_id, submitted_at, workflow_state ('submitted', 'unsubmitted', 'pending_review', 'graded'), score, grade, and late (boolean). The workflow_state field tells you grading status: 'submitted' means received but not graded; 'graded' means score has been recorded; 'unsubmitted' means the student hasn't submitted yet. Use this to build a grading status Table that shows instructors exactly where each student stands.

1// Transformer for Canvas submissions
2const submissions = data || [];
3return submissions.map(sub => ({
4  user_id: sub.user_id,
5  student_name: sub.user?.name || `User ${sub.user_id}`,
6  student_email: sub.user?.email || '',
7  submitted_at: sub.submitted_at
8    ? new Date(sub.submitted_at).toLocaleString()
9    : 'Not submitted',
10  status: sub.workflow_state === 'graded' ? 'Graded'
11    : sub.workflow_state === 'submitted' ? 'Needs Grading'
12    : sub.workflow_state === 'pending_review' ? 'Pending'
13    : 'Not Submitted',
14  score: sub.score !== null ? sub.score : '--',
15  grade: sub.grade || '--',
16  late: sub.late ? 'Late' : '',
17  missing: sub.missing ? 'Missing' : '',
18  comment_count: (sub.submission_comments || []).length
19}));

Add administrative actions to the dashboard for enrollment management and grade operations. For enrolling a student in a course, create an enrollUser query with method POST and path /courses/{{ select_course.value }}/enrollments. The request body should be JSON: {"enrollment": {"user_id": "{{ textInput_userId.value }}", "type": "StudentEnrollment", "enrollment_state": "active"}} For dropping a student (deactivating enrollment), use DELETE /courses/{courseId}/enrollments/{enrollmentId} — you need the enrollment ID (not the user ID) from the getEnrollments response. For grade export, Canvas does not have a direct single-call grade export endpoint. Build a JavaScript query that fetches all assignments for a course, then fetches submissions for each assignment using Promise.all, and finally combines the data into a flat structure suitable for a Table export. Retool's Table component includes a built-in CSV export button — use this to allow instructors to download grade reports. For submitting grades from Retool, use PUT /courses/{courseId}/assignments/{assignmentId}/submissions/{userId} with body {"submission": {"posted_grade": "{{ numberInput_grade.value }}", "comment": {"text_comment": "{{ textArea_feedback.value }}"}}}. For complex Canvas integrations involving custom reports across multiple terms or institutional-level analytics, RapidDev's team can help architect scalable Retool dashboards with proper Canvas admin token configuration.

1// Grade update request body
2{
3  "submission": {
4    "posted_grade": "{{ numberInput_score.value }}"
5  },
6  "comment": {
7    "text_comment": "{{ textArea_feedback.value }}"
8  }
9}