Viewports Reference

Overview

A viewport identifies a specific page or view within the Teachfloor dashboard. Use viewports to execute context-specific logic based on where users are in the platform.

Object Context

Some viewports provide an objectContext object containing details about the current page's associated objects (courses, modules, elements).

Available Viewports

Viewport ID	Path	Object Types
`teachfloor.dashboard.course.list`	`/:organization/courses`	-
`teachfloor.dashboard.course.detail`	`/:organization/courses/:course`	course
`teachfloor.dashboard.course.module.detail`	`/:organization/courses/:course/modules/:module`	course, module
`teachfloor.dashboard.course.element.detail`	`/:organization/courses/:course/modules/:module/elements/:element`	course, module, element
`teachfloor.dashboard.community.post.list`	`/:organization/community/:community`	-
`teachfloor.dashboard.community.member.list`	`/:organization/community/:community/members`	-
`teachfloor.dashboard.settings.general.detail`	`/:organization/settings/general`	-
`teachfloor.dashboard.settings.customization.detail`	`/:organization/settings/customization`	-
`teachfloor.dashboard.settings.team.list`	`/:organization/settings/team`	-
`teachfloor.dashboard.settings.billing.detail`	`/:organization/settings/billing`	-
`teachfloor.dashboard.settings.integration.list`	`/:organization/settings/integrations`	-
`teachfloor.dashboard.settings.notification.list`	`/:organization/settings/notifications`	-
`teachfloor.dashboard.settings.custom-field.list`	`/:organization/settings/custom-fields`	-
`teachfloor.dashboard.account.detail`	`/:organization/account`	-
`teachfloor.dashboard.learner.list`	`/:organization/learners`	-
`teachfloor.dashboard.payment.list`	`/:organization/payments`	-

Usage Example

API.on('environment.viewport.changed', (viewport, objectContext) => {
  if (viewport === 'teachfloor.dashboard.course.detail') {
    // Access course object
    const course = objectContext.course;
    console.log('Current course:', course);
  }
});