⚡ CHEAT SHEET: COMMON ACTION PROMPTS

#powered by eMOBIQ AI ## Copy-Paste Templates for Common App Functions

📝 CREATE & SAVE

Basic Form Creation

Create a form with the following fields:
- [FIELD_1] (text input, required)
- [FIELD_2] (email input, required)
- [FIELD_3] (dropdown with options: A, B, C)

Add submit button labeled "[BUTTON_TEXT]"
Save data to [local storage / Supabase table: "table_name"]

Form with Validation

Create form with validation:

Fields:
- Name (required, 2-100 characters)
- Email (required, valid email format)
- Phone (optional, format: +XX XXXX XXXX)

Validation rules:
- Show error messages below invalid fields
- Error text in red
- Disable submit until all validations pass
- Check on blur (when user leaves field)

On valid submit:
- Save data
- Show success message
- Clear form

Form with Multiple Steps

Create a multi-step form:

Step 1: Personal Info
- Fields: [LIST]
- Next button: validate before proceeding

Step 2: Additional Details
- Fields: [LIST]
- Back button, Next button

Step 3: Review & Submit
- Show all entered data
- Edit buttons for each section
- Submit button

Progress indicator showing current step (1 of 3, 2 of 3, etc.)

👀 DISPLAY & VIEW

Show List of Items

Display all [ITEMS] from [storage] as a list.

For each item show:
- [FIELD_1] (large, bold)
- [FIELD_2] (medium, regular)
- [FIELD_3] (small, gray)

Layout:
- Cards with white background
- Rounded corners
- Drop shadow
- Spacing between cards: 12px
- Mobile-responsive

Sort by [FIELD] in [ascending/descending] order

If no items: show "[EMPTY MESSAGE]" with icon

Show Item Details

When user taps an item in the list:

Navigate to detail screen showing:
- [FIELD_1] (header, large, bold)
- [FIELD_2] (subheader)
- Divider line
- [FIELD_3]: [VALUE]
- [FIELD_4]: [VALUE]
- [FIELD_5]: [VALUE]

Add buttons at bottom:
- Edit (blue)
- Delete (red)
- Back arrow at top left

Show loading state while fetching details

Display with Cards Layout

Display [ITEMS] in a card grid layout:

Each card shows:
- Image/icon at top
- Title (bold)
- Subtitle
- 2-3 key data points
- Action button

Grid layout:
- 2 columns on mobile
- 3 columns on tablet
- 4 columns on desktop

Cards:
- Equal height
- White background
- Hover effect (slight elevation)
- Tappable

🔍 SEARCH & FILTER

Add Filters

Add filter functionality to [LIST_SCREEN].

Filter button next to search bar:
- Icon: funnel
- Badge showing active filter count

Filter panel (opens as modal/drawer):

Filters:
- Status (radio: All, Active, Inactive)
- Category (checkboxes: [LIST])
- Date range (date pickers)

Buttons:
- "Apply Filters" (primary)
- "Reset All" (secondary)

After applying:
- Show active filters as chips above list
- Each chip has X to remove that filter
- Update count: "Showing X of Y [items]"

Sorting Options

Add sort functionality:

Sort dropdown/menu showing:
- [FIELD_1] A-Z
- [FIELD_1] Z-A
- [FIELD_2] (newest first)
- [FIELD_2] (oldest first)
- [NUMERIC_FIELD] (high to low)
- [NUMERIC_FIELD] (low to high)

Apply selected sort immediately
Show current sort in dropdown label
Remember sort preference

✏️ UPDATE & EDIT

Edit Form

Create edit form for [ITEM]:

When "Edit" button clicked:
1. Navigate to edit screen
2. Load current data from [storage]
3. Pre-fill all form fields with existing values

Form features:
- Same validation as create form
- [ID_FIELD] is read-only (grayed out)
- Track changes (detect if data modified)
- Enable "Save Changes" only if form valid AND changed

On Save:
- Show loading state
- Update record in [storage]
- Show success message
- Return to detail view with updated data

On Cancel:
- If no changes: return immediately
- If changed: show confirmation "Discard changes?"

Inline Edit

Add inline editing to list items:

For each item:
- Add "Edit" icon/button
- When clicked:
  * Make fields editable
  * Show Save and Cancel buttons
  * Focus on first field

On Save:
- Validate changes
- Update in [storage]
- Show success indication
- Return to read-only view

On Cancel:
- Restore original values
- Return to read-only view

Bulk Edit

Add bulk edit capability:

Selection mode:
- Add checkbox to each item
- "Select All" option in header
- Show "[X] selected" count

Bulk actions bar (bottom of screen):
- "Edit Selected" button
- Shows edit options applicable to all

Edit options:
- Change status
- Change category
- Add tag
- Update field

Apply to all selected items
Show progress: "Updating X of Y..."

🗑️ DELETE & REMOVE

Delete Single Item

Add delete functionality:

Delete button for each item:
- Color: red
- Icon: trash or X
- Position: [right side / menu / detail screen]

On click:
1. Show confirmation dialog:
   - Title: "Delete [ITEM_TYPE]?"
   - Message: "Are you sure you want to delete [ITEM_NAME]? This cannot be undone."
   - Buttons: "Cancel" (gray), "Delete" (red)

2. If confirmed:
   - Show loading indicator
   - Delete from [storage]
   - Remove from display
   - Show success message: "[ITEM] deleted"

3. If cancelled:
   - Close dialog
   - No action

Bulk Delete

Add bulk delete:

In selection mode:
- "Delete Selected" button (red)
- Shows count: "Delete X items?"

On click:
1. Show confirmation:
   - Title: "Delete X [items]?"
   - List item names to be deleted
   - Warning: "This action cannot be undone"
   - Buttons: "Cancel", "Delete All"

2. For extra safety:
   - Require typing "DELETE" to confirm
   - Or: require password/PIN

3. If confirmed:
   - Show progress: "Deleting X of Y..."
   - Delete all selected items
   - Show result: "X items deleted"
   - Exit selection mode

Soft Delete (Archive)

Add archive functionality (safer than delete):

Archive button instead of delete:
- Moves item to "Archived" status
- Item hidden from main list
- Can be restored later

Implementation:
- Update status to "archived"
- Add archived_at timestamp
- Filter out archived items in main view

Add "View Archived" section:
- Shows archived items
- Each has "Restore" button
- Optional: "Permanently Delete" (with confirmation)

📊 CALCULATIONS & STATISTICS

Display Counts

Add statistics section showing:

Cards displaying:
- Total [ITEMS]: [COUNT]
- [CATEGORY_1]: [COUNT]
- [CATEGORY_2]: [COUNT]
- [STATUS_ACTIVE]: [COUNT]

Layout:
- 2x2 grid on mobile
- 4 columns on desktop
- Each card: icon, number (large), label
- Color-coded by type

Update counts when:
- Items added/deleted
- Filters applied
- Page loads

Calculate Totals

Add calculation section:

Display:
- Total count of [ITEMS]
- Sum of [NUMERIC_FIELD]: $X,XXX.XX
- Average of [NUMERIC_FIELD]: $XXX.XX
- Minimum: [VALUE]
- Maximum: [VALUE]

Show at top of list
Update automatically when data changes
Format numbers with proper separators

Progress Indicators

Add progress tracking:

For each [ITEM] or overall:
- Show progress bar
- Display percentage: X%
- Color: green if complete, blue if in progress
- Label: "X of Y completed"

Calculate from:
- [COMPLETED_FIELD] / [TOTAL_FIELD] * 100

Visual:
- Animated progress bar
- Updates in real-time
- Shows milestone markers if applicable

💬 USER FEEDBACK & NOTIFICATIONS

Success Messages

After [ACTION], show success feedback:

Toast notification:
- Message: "[SUCCESS_MESSAGE]"
- Color: green
- Icon: checkmark
- Position: top center
- Duration: 3 seconds
- Auto-dismiss

Example:
"✓ Student registered successfully!"
"✓ Changes saved"
"✓ Item deleted"

Error Messages

If [ACTION] fails, show error:

Alert/Toast:
- Message: "[ERROR_MESSAGE]"
- Color: red
- Icon: warning/error
- Position: top center
- Stays until dismissed OR
- Auto-dismiss after 5 seconds
- "Retry" button if applicable

Example:
"✗ Could not save data. Please try again."
"✗ Connection failed. Check internet."

Loading States

While [ACTION] is in progress:

Show loading indicator:
- Spinner/progress bar
- Text: "Loading..." or "[ACTION]ing..."
- Disable user interactions
- Cover relevant area

For buttons:
- Disable button
- Change text to "Processing..."
- Show spinner on button
- Prevent double-clicks

For screens:
- Full-screen overlay
- Centered spinner
- Background dimmed

Confirmation Dialogs

Before [DESTRUCTIVE_ACTION], show confirmation:

Dialog box:
- Title: "[QUESTION]?"
- Message: "[DETAILS]"
- Show what will be affected
- Warning if irreversible

Buttons:
- "Cancel" (default, gray, left)
- "[ACTION]" (destructive, red, right)

Example:
Title: "Delete Student?"
Message: "Are you sure you want to delete John Doe? This action cannot be undone."
Buttons: "Cancel", "Delete"

📤 EXPORT & IMPORT

Export to CSV

Add export functionality:

Export button:
- Icon: download
- Text: "Export" or "Download CSV"
- Position: [top right / menu]

On click:
1. Show options dialog:
   - Export all vs current view
   - Include headers: checkbox
   - File name: input field

2. Generate CSV:
   - Columns: [FIELD_1], [FIELD_2], [FIELD_3]
   - Format dates: DD/MM/YYYY
   - Escape special characters

3. Trigger download:
   - Filename: "[name]_[date].csv"
   - Show success: "Exported X records"

Handle errors gracefully

Import from File

Add import functionality:

Import button:
- Opens file picker
- Accept: .csv, .xlsx
- Max size: [X]MB

On file selected:
1. Read and parse file
2. Validate format
3. Preview data (first 5 rows)
4. Show confirm dialog:
   - "Import X records?"
   - Option to skip duplicates

5. Import records:
   - Show progress bar
   - Handle errors per row
   - Show summary:
     * X imported successfully
     * Y skipped (duplicates)
     * Z failed (errors)

🔄 REFRESH & SYNC

Pull to Refresh

Add pull-to-refresh to [LIST_SCREEN]:

Behavior:
- User pulls down from top
- Show refresh indicator
- Trigger data reload
- Update display with fresh data
- Hide indicator when complete

Visual:
- Custom pull indicator or default
- Smooth animation
- Haptic feedback on mobile

Refresh:
- Clear cache if applicable
- Fetch latest from [storage]
- Maintain scroll position
- Show "Updated just now" timestamp

Auto-Refresh

Add automatic refresh:

Configuration:
- Refresh interval: every [X] seconds/minutes
- Only when app is active/visible
- Pause when user is interacting

Behavior:
- Silent refresh (no interruption)
- Update data in background
- Smooth transition to new data
- Show notification if new items: "X new items"

User controls:
- Toggle auto-refresh on/off
- Choose refresh interval
- Manual refresh button always available

QUICK TIPS

💡 Combine Actions: Mix and match these templates 💡 Be Specific: Add exact field names and colors 💡 Test Edge Cases: Include error handling 💡 Mobile First: Always consider mobile layout 💡 Feedback Always: Users need to know what’s happening

Copy, paste, and customize these prompts!

Version 1.0 | eMOBIQ AI Workshop Materials © Orangekloud Technology Inc.