Skip to main content

Appointment Details


Use the Appointment Details screen for full session information review and control.
This screen presents appointment metadata, financial information, attached documents, and status history for an authenticated doctor.

The screen appears in the embedded panel of the Appointments workspace.

This screen includes:

  • Appointment metadata: status, doctor, clinic, and patient details.
    Header section of Appointment Details with patient identity, status, and session summary
  • A layout that adapts to mobile and desktop viewports.
  • Status indicators:
    • Green: Scheduled
    • Yellow: Pending
    • Red: Canceled
    • Blue: Visit completed
  • Tabs: Details, Charges, Documents, and History.
  • Contextual actions:
    • Start Video, Cancel, and Visit took place for eligible sessions
    • Read-only view for completed or canceled sessions
  • Optional embedded chat, when configuration allows it.

Workflow

  1. From the Welcome Screen, select Manage appointments.

  2. In the Appointment List, select an appointment card.

  3. Review summary information: status, doctor, clinic, and patient.

  4. Use the tabs to view specific data:

    • Details: Patient and visit information
    • Charges: Fee and discount breakdown
    • Documents: Attached files, GOP documents, and previews
    • History: Status transitions
    Appointment Details tabs for details, charges, documents, and status history

Validations

These scenarios define how the app validates actions on the Appointment Details screen and what the integrator can expect.

ScenarioApp BehaviorSDK OutputExample
The appointment status is not Scheduled and the doctor selects Start Video.The app blocks video start and displays an error or disabled state.Validation error or no-op update.
The appointment status is Completed or Canceled and the doctor attempts to edit fields.The app presents a read-only view and blocks changes.Page object with read-only controls.
Appointment data is incomplete or invalid.The app displays an error section instead of the main content.Schema validation error.
Network access is not available when the doctor opens Documents.The app displays an error state for document previews.Network or transport-level error.
The doctor selects Visit took place without a valid appointment context.The app blocks the update and displays an inline message.Validation error for invalid state.
The system receives an unsupported file type in Documents.The app omits the preview and displays a generic document entry.Partial page object with no preview element.

Actions

These scenarios describe how the app responds to doctor actions on the Appointment Details screen and what the SDK returns.

ScenarioApp BehaviorSDK OutputExample
The doctor selects Start Video for a scheduled appointment.The app opens the video session entry point.Navigation or integration event; a later response reflects any status change.
The doctor selects Cancel.The app prompts for confirmation and applies a canceled status after confirmation.Update set that changes the appointment status and history entries.
The doctor selects Visit took place.The app prompts for confirmation and applies a completed status after confirmation.Update set that changes the appointment status and appends a history item.
The doctor selects a tab (Details, Charges, Documents, or History).The app updates the visible section with tab-specific content.Update set that targets the selected fragment.
The doctor opens a document in the Documents tab.The app presents a viewer or inline preview.Update set that refines the viewer component.
Chat is available for the appointment.The app displays an embedded chat panel.Page object with an embedded chat element in the layout.

Endpoint Resources

Appointment Details Screen

PUT 

profile/appointments/{appointment-id}

Produces the Appointment Details page for the specified appointment.

VariantBehaviorExample
Mobile variantOpens as a full-screen view.
Desktop variantLoads in the right-hand embed panel (welcome-or-details) of the Appointments screen.

UI Elements

Mobile and Core Structure

LevelReferenceTypeValuePlacement
M-3GreenAppointment status (or Yellow, Red, Blue)
M-3TitlePatient name
D-1Splitter
D-2Scroller70%
D-3TitlePatient name
D-3Spacer~
D-3GreenAppointment status (or Yellow, Red, Blue)~
D-3Spacer~
3SecondaryAppointment action 1~ on desktop
3SecondaryAppointment action 2 (etc.)~ on desktop
3Tabs~
3Bar~
3FragmentDetails
3SectionDetails
D-3GroupNot present on mobile33%
M-4Title[Patient section]
D-4RegularAppointment reference, doctor name~
D-4RegularAppointment reference
D-4RegularDoctor name
D-3GroupNot present on mobile~33%
4Title[Visit type]
4RegularVisit type~ on mobile
3Line
D-3GroupNot present on mobile33%
4ExtraDate of birth
4RegularDD/MM/YYYY
4ExtraSex
4RegularSex
4ExtraRegular medication use
4RegularMedication use (up to 2 lines)
D-3GroupNot present on mobile~33%
4ExtraContact name
4RegularContact name
4ExtraEmail
4RegularEmail
4ExtraPhone
4RegularPhone
D-3GroupNot present on mobile~34%
4ExtraProblem description
4RegularProblem description (up to 5 lines)
3Line(only if documents attached)
3ViewerDocument preview
3RegularDocument name~
3Bar
3FragmentCharges
3SectionCharges
3GrayItem
4ExtraAmount~
4Spacer~
4ExtraAmount~
4RegularAppointment fee:~
4Spacer~
4HighlightFee~
4Dashes~
4RegularTotal:
4Spacer~
4HighlightAmount~
3ViewerGOP preview
3RegularGOP name~
3Line(only if disclaimers present)
3ExtraNotes (only if disclaimers present)
3DisclaimerDisclaimer
3Bar(only if documents attached)
3FragmentDocuments
3SectionDocuments
3ExtraDocument type
3ViewerDocument preview
3RegularDocument name~
3Line(only if more documents of the same type present)
3Bar
3FragmentStatus history
3SectionStatus history
3RegularStatus transition
3ExtraTransition timestamp
D-2EmbedAppointment's chat30%

Desktop Shell

LevelReferenceTypeValuePlacement
1cs-chatToolbarCS chat
1scan-to-payToolbarScan to pay
1accountToolbarAccount
1settingsToolbarSettings
1splitterSplitter
2appointment-filterEmbedHosts Appointment List (default) or Filter30%
2welcome-or-detailsEmbedHosts Welcome Screen (default) or Appointment Details70%

Select Appointment

PATCH 

profile/appointments/{appointment-id}/details

Returns an update set that replaces the right-hand area with Appointment Details for the selected appointment.

Update Appointment Details

PATCH 

profile/appointments/{appointment-id}/update

Returns an update set that applies changes to the selected appointment revision.