Skip to main content

✨ Interactions

The Interaction category helps you enhance user engagement and interactivity in your app. By attaching these actions to UI elements (e.g., buttons), you can display alerts, show temporary messages (toasts), send push notifications, or store data locally.

1. Open Alert​

Use the Open Alert action to display a popup dialog containing a title, description, and an optional action button. This is ideal for warnings, confirmations, or important messages that require immediate user attention.

How to Use​

  1. Open the Workflow Editor: Select the element on your canvas (e.g., a button) you want to attach the action to. Click on it to open left and right bar. In the left bar click Add Action → More actions....
  2. Add the Action:
    • In the workflow canvas, click the plus (+) icon.
    • Select Interaction → Open alert.
  3. Configure Alert Details:
    • Alert Header: The main title or header text for the alert (e.g., “Warning”).
    • Alert Description: Additional information about the alert (e.g., “Are you sure you want to delete this item?”).
    • Action Button Text: The text displayed on the alert’s button (e.g., “OK” or “Confirm”).
  4. Save & Test:
    • Click Save, then Preview your app. When the user interacts with the element, the alert will appear.

Use Cases:​

  • Confirmations: Asking the user to confirm an action (e.g., deleting data).
  • Warnings: Notifying the user of potential issues (e.g., incomplete forms).
  • Information: Displaying important announcements or instructions.

2. Show Toast​

A Toast is a small, temporary notification message that appears on the screen. It automatically disappears after a specified duration. This is useful for non-intrusive updates, like success messages or quick reminders.

How to Use​

  1. Open the Workflow Editor: Open the Workflow Editor: Select the element on your canvas (e.g., a button) you want to attach the action to. Click on it to open left and right bar. In the left bar click Add Action → More actions....
  2. Add the Action:
    • In the workflow canvas, click the plus (+) icon.
    • Select Interaction → Show toast.
  3. Configure Toast Details:
    • Toast Title: The main text shown in the toast (e.g., “Item saved successfully!”).
    • Duration: How long the toast remains visible. Options typically include Short or Long.
    • Position: The vertical position of the toast on the screen (Bottom, Middle, or Top).
  4. Save & Test:
    • Click Save, then Preview your app. Interacting with the element triggers the toast message.

Use Cases:​

  • Success Messages: Confirming that an action was completed (e.g., “Profile updated!”).
  • Status Updates: Indicating loading results or partial completion.
  • Reminders: Briefly informing users about small updates without disrupting their workflow.

3. Push Notification​

The Push Notification action in AppStruct enables you to send device-level notifications to your users on iOS and Android (or both). Once you’ve set up the necessary configurations, you can trigger a push notification from a button press, a specific workflow event, or any custom logic you define.

Prerequisites​

  1. Firebase Configuration:
    • You must connect your app to Firebase for handling push tokens and message delivery.
    • Follow the Firebase setup instructions in AppStruct’s Publishing section to ensure your project is linked properly.
  2. Platform Publishing:
    • If you plan to send push notifications to iOS or Android devices, your app must be configured and published (or test-deployed) on the respective platforms.
    • This ensures the device tokens can be registered correctly for push notifications.

Adding a Push Action​

  1. Select the UI element (e.g., a Button) you want to trigger the notification from.
  2. In the left bar, click Add Action → More actions... to open the workflow canvas.
  3. Click the plus (+) icon in the workflow canvas.
  4. Select Interaction → Push notification from the menu.
  5. Configure Notification Details:
    • Push Notification Title: The main headline for your notification (e.g., “Order Update”).
    • Push Notification Description: A short message describing the alert (e.g., “Your order is out for delivery!”).
    • Platform: Choose All, iOS, or Android to specify which devices will receive the notification.
    • Opened Screen on Clicking Notification: Select the screen in your app that users should be taken to when they tap the notification.
  6. Click Save.
  7. In Preview, you may see a placeholder or test message. Actual push notifications typically require a published or test environment on a real device to function.

Use Cases:​

  • Success Messages: Confirming that an action was completed (e.g., “Profile updated!”).
  • Status Updates: Indicating loading results or partial completion (e.g., “Your order is being prepared”).
  • Reminders: Briefly informing users about small updates without disrupting their workflow (e.g., “Don’t forget your upcoming appointment”).

4. Local Storage​

Use Local Storage to store small pieces of data on the user’s device (e.g., preferences, tokens, or temporary form inputs). This data persists even if the user closes the app, but is specific to their device or browser.

How to Use​

  1. Open the Workflow Editor: Open the Workflow Editor: Select the element on your canvas (e.g., a button) you want to attach the action to. Click on it to open left and right bar. In the left bar click Add Action → More actions....
  2. Add the Action:
    • In the workflow canvas, click the plus (+) icon.
    • Select Interaction → Local storage.
  3. Configure Local Storage Settings:
    • Storage Key: A unique identifier for the stored data (e.g., “userToken” or “themePreference”).
    • Value Source: Where the data is coming from. Options might include:
      • Static text: A fixed value that you enter manually.
      • Element input: Data pulled from a user input field or another element in your app.
  4. Save & Test:
    • Click Save, then Preview. Interacting with the element writes the specified data to local storage.

Use Cases:​

  • Preferences: Storing user preferences (e.g., dark mode, language settings).
  • Caching Data: Keeping temporary data so the user doesn’t have to re-enter information.
  • Authentication: Storing tokens for session management (though be mindful of security best practices).

Best Practices​

  • Use Alerts Sparingly: Overusing alerts can interrupt user flow. Reserve them for critical information or confirmations.
  • Short & Sweet Toasts: Keep toast messages brief so they’re easy to read before they disappear.
  • Push Notification Permissions: Ensure you handle user permissions correctly. Users must opt-in to receive push notifications on most platforms.
  • Local Storage Security: Avoid storing sensitive information (like passwords) in local storage. Instead, store tokens securely and implement proper security measures.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].