Skip to main content

Web Client and Web Startup

This page covers the browser shell for the SureClinical web client: how the Angular application boots, how route state is registered, and how the startup path decides where a user lands after login.

Purpose​

The web client is the main browser entry point for SureDrive, SureCTMS, SureETMF, and related network features. It defines the route tree, authentication flow, startup checks, and browser-specific runtime behavior.

Scope​

This page focuses on the web shell and route registration layer. It does not document the details of individual workflow wizards or drive creation forms, which are covered in separate pages.

Entry Points​

  • SC/suredms-web-client/src/main/webapp/app/js/app.js
  • SC/suredms-web-client/src/main/webapp/app/js/app-browser.js
  • SC/suredms-web-client/src/main/webapp/app/js/state/app-states.js
  • SC/suredms-web-client/src/main/webapp/app/js/state/app-states-network.js
  • SC/suredms-web-client/src/main/webapp/app/js/state/app-states-workflow.js
  • SC/suredms-web-client/src/main/webapp/app/js/app-navigation.js

Primary Components​

  • app.js is the Angular application bootstrap. Its run block wires up $rootScope, handles login redirects, checks platform license state, triggers notification refresh, and controls the state transition guard logic.
  • app-states.js defines the shell states such as app, app.dashboard, app.network, app.network.drive, and the drive wizard entry points.
  • app-states-network.js defines the network search and project-facing states, including browse, audit trail, project, person, organization, and contacts flows.
  • app-states-workflow.js defines workflow-related states such as workflow dashboard, workflow process, task list, and wizard-specific routes.
  • app-browser.js detects the current browser and operating system, then adjusts runtime behavior such as disabling animations for IE/Edge.
  • ClientNavigationService is the redirect layer that chooses the default landing area based on user permissions, feature flags, and client type.

Startup Flow​

  1. The shell loads the Angular application and registers route definitions from the state files.
  2. app.js runs the initial login and state-change guard logic.
  3. If the current route requires authentication and no user is loaded, the shell triggers the login flow or auto-login logic for OAuth/access-token cases.
  4. After a successful login, the shell checks notifications, redirects to the appropriate client area, and resumes the target state.
  5. If the browser is IE or Edge, app-browser.js disables animations to reduce runtime cost.

Route and Navigation Behavior​

  • The default router fallback redirects to the user’s default client area instead of leaving the user on an unknown route.
  • State transitions are guarded by feature checks, role checks, and navigation rules in the $stateChangeStart handler.
  • Network and workflow states are nested under the shared app shell so the same authentication and layout behavior applies across product areas.
  • Some routes are parented to drive, application, or search dashboards so breadcrumbs and navigation context stay consistent.

Dependencies and Integrations​

  • BrowserService reads window.navigator state and reports browser capability information used by the shell.
  • SessionService, LoginService, and OpenIdRepository handle session recovery and identity checks.
  • NotificationService, PlatformLicenseValidityCheckService, and UserVerificationWizardService perform runtime checks that can change the active state or force a redirect.
  • AcePageService controls the shared sidebar and footer UI that the shell toggles during state changes.

Edge Cases and Constraints​

  • The shell supports OAuth and access-token based recovery paths for users who arrive from external links.
  • Some views are hidden when the current user lacks a feature or when the selected study belongs to a different client area.
  • Browser-specific behavior is intentionally conservative for older browsers and tablet/phone layouts.