Skip to content

Implementing Dynamic UI in Devity

This tutorial covers how to create Dynamic UI in Devity, enabling real-time updates and interactive user experiences without requiring app updates.

Prerequisites

Before you begin, ensure you have: - Access to the Devity Console - A basic understanding of UI components and actions - A published Spec or a new spec in progress

Step 1: Understanding Dynamic UI

Dynamic UI allows elements on the screen to: - Change based on user input - React to backend data - Update dynamically without requiring an app release

Components Involved:

  • Rules: Define conditions for UI behavior
  • Expressions: Create logical conditions for dynamic updates
  • Actions: Trigger events based on user interactions

Step 2: Creating a Dynamic UI Spec

  1. Navigate to the Spec Builder in Devity Console
  2. Click Create New Spec or edit an existing one
  3. Add Renderers and Widgets (e.g., text fields, buttons, dropdowns)

Step 3: Using Rules for Dynamic UI

  1. Define a Rule:
  2. Example: A Submit button should only be enabled when all form fields are filled.
  3. Attach the Rule to Widgets:
  4. Select the button widget
  5. Go to Rules → Add New Rule
  6. Set condition: FormField1 != "" AND FormField2 != ""
  7. Action: Enable Button

Step 4: Binding Dynamic Data

  1. Using API Data:
  2. Add an API call action to fetch real-time data
  3. Bind response fields to widgets (e.g., show user name in a label)
  4. Using Expressions:
  5. Define calculated values using arithmetic/logical expressions
  6. Example: Display Discounted Price based on selected items

Step 5: Implementing Conditional UI

  1. Show/Hide Components:
  2. Example: Display a Promo Code Field only if the user selects a discount option.
  3. Rule: If discount == true, then show PromoField
  4. Change Styles Dynamically:
  5. Modify background color, text size, or visibility based on conditions

Step 6: Preview and Test

  1. Use the Preview Mode in Devity Console
  2. Verify that UI updates dynamically based on inputs and rules
  3. Debug using the Inspector Tool

Step 7: Publish and Deploy

  1. Click Publish to push updates
  2. The app fetches the latest JSON spec automatically
  3. No app update is required for UI changes to take effect

Next Steps

  • Explore advanced Event Handling with multiple triggers
  • Integrate with external APIs for real-time updates
  • Create reusable Custom Widgets for dynamic UI

By following these steps, you can leverage Devity’s Server-Driven UI to build flexible, real-time updating user interfaces without requiring traditional app updates.