How to Build a Content Approval Workflow in FlutterFlow

In Firestore, create a content collection with fields: title (String), body (String), authorId (String), workflowStatus (String, default 'draft'), reviewerId (String, optional), reviewComment (String, optional), createdAt (Timestamp), updatedAt (Timestamp). Then add a subcollection workflow_events under each content document with fields: action (String), userId (String), comment (String), timestamp (Timestamp). The status field drives the entire workflow: draft, submitted, inReview, approved, published, or rejected.

Create a page called MyContent. Add a ListView bound to a Backend Query on the content collection filtered by authorId equals current user. Each list item shows: title Text, a Container styled as a status badge (green for published, yellow for inReview, red for rejected, grey for draft). Use Conditional Visibility on a Submit button so it only appears when workflowStatus equals 'draft'. The Submit button runs an Action Flow: Update Document to set workflowStatus to 'submitted' and updatedAt to now, then creates a workflow_events doc with action 'submitted'.

Create a ReviewQueue page visible only to users with role 'reviewer' or 'admin'. Add a ListView querying content where workflowStatus equals 'submitted' or 'inReview', ordered by updatedAt ascending. Each item shows the title, author name, and submission date. Add two buttons: Approve and Reject. Approve runs an Action Flow that updates workflowStatus to 'approved', sets reviewerId, and creates a workflow_events doc. Reject opens a dialog with a TextField for reviewer comments, then updates status to 'rejected' with the comment stored on both the content doc and the workflow_events entry.

On the content detail page, add a section below the main content showing the workflow history. Query the workflow_events subcollection ordered by timestamp descending. Display each event in a Column: a Row with the user display name and a formatted timestamp, below it the action text (styled bold) and any comment. Use a vertical line or Container border on the left side to create a timeline visual effect. This gives authors and reviewers full visibility into every status transition and who performed it.

On the content edit page, wrap all editable fields (title TextField, body TextField) with Conditional Visibility set to show only when workflowStatus equals 'draft'. When status is anything else, show read-only Text widgets instead. Add a Request Return to Draft button visible only when status is 'rejected', which sets the status back to 'draft' and logs a workflow event. This prevents authors from editing content that is actively being reviewed, which would cause reviewers to see different content than what was submitted.

Deploy a Cloud Function triggered by Firestore onUpdate on the content collection. When workflowStatus changes, the function determines the recipient: if status changed to 'submitted', email the reviewer team; if changed to 'approved' or 'rejected', email the author. Include the content title, new status, and any reviewer comment in the email body. Use a mail-sending service like SendGrid or Firebase Extensions for email delivery. This keeps all stakeholders informed without requiring them to check the app constantly.

1// Cloud Function: onContentStatusChange
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.onContentStatusChange = functions.firestore
7  .document('content/{contentId}')
8  .onUpdate(async (change, context) => {
9    const before = change.before.data();
10    const after = change.after.data();
11    if (before.workflowStatus === after.workflowStatus) return;
12    
13    const contentTitle = after.title;
14    const newStatus = after.workflowStatus;
15    const comment = after.reviewComment || '';
16    
17    // Determine recipient based on new status
18    let recipientId;
19    if (newStatus === 'submitted') {
20      // Notify reviewers (query users with role 'reviewer')
21      const reviewers = await admin.firestore()
22        .collection('users')
23        .where('role', '==', 'reviewer').get();
24      // Send to each reviewer
25    } else {
26      recipientId = after.authorId;
27    }
28    // Send email via SendGrid or Firebase Extension
29  });