What This Screen Does
This screen displays all documents belonging to a specific member in a visual grid layout. Think of it like a digital filing cabinet where each document is shown as a card with its name, file type, size, and date. You can browse documents, select multiple files for bulk actions, upload new files, view document contents, and delete documents you no longer need.
How to Get There
Open the dashboard.
In the left-hand menu, click Members.
Click on a member’s name to open their profile.
Navigate to the Documents tab.
You are now on the File Manager Grid View screen.
Step-by-Step Guide
1. Browse Documents
Documents are displayed as cards in a responsive grid layout.
On small screens you see 1 card per row, on medium screens 2–3, and on large screens 4 per row.
Each card shows:
Information | Description |
File Icon / Thumbnail | An icon representing the file type (PDF, image, etc.), based on the file extension. |
File Name | The original file name or document name. Displayed in bold at the top of the card. |
Membership Type | If the document is tied to a membership type, its name appears below the file name in grey text. |
File Size | The size of the file (e.g. “2.4 MB”), shown at the bottom of the card. |
Last Modified Date | The date and time the document was last changed, shown next to the file size. |
Signed Status | A signed icon appears if the document has been signed. A cancel icon appears if signing was declined. |
If there are no documents, you will see a “No documents” empty state message.
2. Collapse or Expand the Document List
The panel header shows the section title and a subtitle with the total document count (e.g. “3 contracts”).
Click the arrow icon next to the title to collapse or expand the document list.
This is useful when the documents section is part of a larger page and you want to save space.
3. View a Document
Click on any document card that contains body content (the cursor will change to a pointer for these).
A dialog opens showing:
The document name as the dialog title.
The full document body rendered as formatted text.
The signature (if the document was signed), displayed as an image below a dashed line.
From this dialog you can:
Click Download PDF to open the document in a new browser tab for printing or saving as PDF.
Click Close to return to the grid.
4. Upload New Documents
Click the + (add) button in the panel header. This button only appears if the section is set as editable.
An Upload Files dialog opens.
Drag and drop files into the upload area, or click to browse your computer.
You can upload multiple files at once.
To remove a file before uploading, click the remove button next to it.
To remove all files at once, click Remove all.
Click Upload to send the files to the server.
You will see a green “File uploaded!” notification when the upload completes.
5. Select Documents
Hover over a document card’s icon area — the file icon changes into a checkbox.
Click the checkbox to select that document.
Selected cards are visually highlighted with a raised shadow effect.
You can select multiple documents by clicking checkboxes on different cards.
6. Use Bulk Actions
When one or more documents are selected, a floating action bar appears at the bottom-right of the screen.
The bar shows how many items are selected (e.g. “3 Items selected”).
Use the master checkbox on the left of the bar to select or deselect all documents at once.
Available bulk actions:
Action | What It Does |
Delete | Opens a confirmation prompt to delete all selected documents. Only appears if deletion is enabled. |
View | Opens the share/invite dialog for the selected documents. |
7. Delete a Single Document
Click the three-dot menu (⋮) on the top-right corner of a document card.
Select Delete from the dropdown menu.
A confirmation dialog appears asking “Are you sure want to delete?”
Click Delete to confirm, or close the dialog to cancel.
The document is permanently removed.
8. Share / Invite Dialog
This dialog appears when you click View in the bulk action bar.
Enter an email address in the text field to invite someone.
Click Close to dismiss the dialog.
What Happens Behind the Scenes
Uploading a File
You click the "+" button
|
v
Upload Files dialog opens
|
v
You drag-and-drop or browse for files
|
v
You click "Upload"
|
v
API call: MembersService.addDocument({ memberId, files })
|
v
Files are uploaded and attached to the member's profile
|
v
Dialog closes automatically
|
v
Success notification: "File uploaded!"
Deleting a Document
You click the three-dot menu on a document card
|
v
You select "Delete"
|
v
Confirmation dialog: "Are you sure want to delete?"
|
v
You click "Delete" to confirm
|
v
The onDeleteItem callback fires with the document ID
|
v
Document is removed from the system
|
v
Grid updates to reflect the change
Viewing a Document
You click on a document card (with body content)
|
v
Document detail dialog opens
|
v
Document body is rendered as HTML
|
v
Signature is displayed (if present)
|
v
(Optional) You click "Download PDF"
|
v
New browser tab opens with the document content
|
v
Browser print dialog appears for saving as PDF
Troubleshooting
“I see ‘No documents’ even though I uploaded files”
The upload may not have completed successfully. Try refreshing the page.
Check your internet connection — if the connection dropped during upload, the file may not have been saved.
Confirm you are looking at the correct member’s profile.
“I cannot see the + button to upload new documents”
The upload button only appears when the section is marked as editable.
Your user role may not have permission to upload documents for this member.
Ask your administrator if you should have document upload access.
“The document card is not clickable”
Only documents with body content (such as contracts or agreements) are clickable.
Documents that are plain file uploads (like images or spreadsheets) do not have a body to display — they are for reference only.
For plain files, use the three-dot menu for available actions.
“My file upload failed”
Make sure the file is not too large. Very large files may time out during upload.
Check that your internet connection is stable.
Try uploading fewer files at a time instead of many at once.
If the error persists, contact your administrator — the server may be experiencing issues.
“I accidentally deleted a document”
Deletion is permanent and cannot be undone from this screen.
Contact your administrator or support team to see if the document can be recovered from a backup.
In the future, double-check the document name in the confirmation dialog before clicking Delete.
“The Download PDF button opens a blank page”
Make sure your browser allows pop-ups for this site. The PDF opens in a new tab.
If the document body is empty, the printed page will be blank — this means the document has no content.
Try a different browser if the issue continues.
“I selected documents but the action bar does not appear”
The bulk selection feature must be enabled for your view. If selection is not available, the checkboxes will not appear on hover.
Try refreshing the page. If the action bar still does not show, the feature may not be enabled for your role.
“The signature does not appear on the document”
Not all documents have signatures. The signature section only appears if the document was electronically signed.
If a document shows a cancel icon instead of a signed icon, it means the signing was declined.
Contact the member to request they sign the document again if needed.
“The grid layout looks broken on my screen”
The grid automatically adjusts based on your screen size. Try resizing your browser window.
Clear your browser cache and refresh the page.
If the problem persists, try a different browser or check for browser extensions that may interfere with the layout.
“I want to select all documents at once”
First, select at least one document so the floating action bar appears at the bottom of the screen.
Use the master checkbox on the left side of the action bar to select or deselect all documents in one click.