Introduction
Dialog boxes (also called modals or pop-ups) appear on top of your current screen to help you enter information, make important decisions, or complete specific tasks. CAREFUL uses dialog boxes to keep your work organised and ensure patient safety by requiring explicit confirmation for critical actions.
Before You Start
No special permissions are required to interact with dialog boxes. However, certain dialog boxes will only appear if you have the necessary permissions for the action they perform (for example, only Administrators can see the "Invite user" dialog box).
Understanding Dialog Boxes
All dialog boxes in CAREFUL share these common features:
Close button (✕): Located in the top right corner of every dialog box. This is the only way to dismiss a dialog without taking action.
Action buttons: Located at the bottom of the dialog box. Common button labels include:
- Submit or Save - Confirms your entries and completes the action
- Cancel - Closes the dialog without saving changes
- Yes or No - Confirms or rejects an important decision
- Confirm - Proceeds with a critical action (often shown in red for destructive actions)
SAFETY FEATURE: You cannot dismiss dialog boxes using the ESC key on your keyboard. This prevents accidental loss of information you've entered. You must explicitly click the ✕ button or an action button to close the dialog.
Types of Dialog Boxes
CAREFUL uses three main types of dialog boxes:
1. Data Entry Dialog Boxes
These dialog boxes contain form fields where you enter information. Examples include:
- Invite user - Enter name, mobile number, and role when inviting a new staff member
- Create Action - Enter action description, assignee, and due date
- New note - Add clinical notes to a patient's record
- Edit Demographics - Update a patient's personal information
How to use:
- Fill in all required fields (marked with an asterisk if mandatory)
- The Submit button remains greyed out until all required information is entered
- Click Submit to save your changes, or Cancel to close without saving
- If there's a validation error, you'll see a message explaining what needs correcting
2. Confirmation Dialog Boxes
These dialog boxes ask you to confirm an action before it's completed. They typically show a question and offer Yes and No buttons, or Confirm and Cancel buttons.
Examples:
- Set to OFF duty - "Are you sure you want to set yourself off duty?"
- Remove user from team - "Are you sure you want to remove [name] from this team?"
- Cancel invitation - "Are you sure you want to cancel this invitation?"
Dangerous or irreversible actions use red Confirm buttons to signal caution.
3. Warning and Safety Dialog Boxes
CAREFUL uses special multi-step dialog boxes for actions that could affect patient safety. These dialog boxes perform checks before allowing you to proceed.
Example: Discharge patient
When you attempt to discharge a patient, CAREFUL checks whether the patient has outstanding actions assigned:
- Green tick icon - No outstanding actions. You'll see "Are you sure?" with Yes and No buttons.
- Red warning icon - Outstanding actions found. The dialog box displays a table listing all open actions with their assignees and due dates. You must either:
- Return to the patient record and close actions individually, then try again, OR
- Enter a reason (e.g., "Patient has gone home") and click Close all to bulk-close all actions
This two-stage process ensures you don't accidentally discharge a patient with unresolved care tasks.
Example: Handover all patients
When handing over multiple patients, the dialog box checks each patient and shows:
- Green - Patient can be handed over
- Amber warning - Minor issue (you can proceed but should review)
- Red error - Blocking issue (you cannot hand over this patient until resolved)
Working with Dialog Boxes
Opening a Dialog Box
Dialog boxes open when you:
- Click an item in a kebab menu (⋮)
- Click an action button (e.g., Add Patient, Create Action)
- Click a table row action
The screen will darken, and the dialog box appears in the centre.
Filling in Forms
- Click in the first field to begin typing
- Use Tab to move between fields quickly
- For dropdown fields, click to see available options and select one
- For search fields (e.g., selecting a user), start typing a name to see matching results
- For date fields, click the calendar icon to choose a date
Validation messages: If you enter invalid information (e.g., a password that's too short), you'll see a red message below the field explaining the problem.
Completing or Cancelling
- To complete the action: Click the Submit, Save, or Confirm button
- To cancel without saving: Click the ✕ button in the top right corner, or click Cancel
When you click Submit, the button will show a loading spinner whilst the action processes. The dialog box will close automatically when the action succeeds.
If an error occurs (e.g., network timeout), the dialog box remains open and displays an error message so you can try again.
Mobile Differences
On mobile devices:
- Dialog boxes take up the full screen width
- When you tap into a text field, the keyboard appears and the dialog adjusts its height automatically
- The dialog scrolls to bring the active field into view
- Use the ✕ button at the top right to close
Tips
- Don't rush: Dialog boxes for critical actions (discharge, handover, user removal) deliberately require multiple clicks to prevent mistakes. This is a safety feature.
- Read warning messages: If you see a red or amber warning icon, read the message carefully before proceeding.
- Check your entries: Before clicking Submit, review what you've entered. Some actions (like discharging a patient) cannot be easily undone.
- Loading states: When a button shows a spinner, wait for the action to complete. Don't click multiple times or close the browser.
- Validation errors: If the Submit button is greyed out, check for empty required fields or validation messages below fields.