Ask AI
Skip to main content

Replace placeholder on title ui element

Function: Replace Text in a Title Element​

This action allows you to dynamically update specific text within a 'Title' UI element on your application's pages. You can define a placeholder in your title, and then use this action to replace that placeholder with any desired text, making your titles dynamic and responsive to user data or application state.

Input,

  • UI element: The specific Title UI element on your page where you want to replace text. This is a required input.
  • Placeholder: The unique text string (e.g., \{\{username\}\}) that you want to find and replace within the Title UI element. This is a required input for the action to perform any replacement.
  • Value: The new text that will replace the specified Placeholder. This is a required input for the action to perform any replacement.

Output,

This action does not produce a direct output. Its effect is a modification of the specified "UI element" on your page.

Execution Flow,

Real-Life Examples,

Here are some practical examples of how you can use this action:

Example 1: Personalizing a Welcome Message

Imagine you have a welcome message on your application's homepage that you want to personalize for each logged-in user.

  • Inputs:
    • UI element: Welcome_Header (a Title UI element on your homepage, initially set to "Welcome, {{UserName}}!")
    • Placeholder: \{\{UserName\}\}
    • Value: John Doe (retrieved from the currently logged-in user's profile)
  • Result: The Welcome_Header UI element on the homepage will update to display "Welcome, John Doe!".

Example 2: Displaying Dynamic Product Count in a Shopping Cart

You want to show the number of items in a user's shopping cart directly in the cart's title.

  • Inputs:
    • UI element: Cart_Summary_Title (a Title UI element on the shopping cart page, initially set to "Your Cart ({{ItemCount}} items)")
    • Placeholder: \{\{ItemCount\}\}
    • Value: 3 (calculated based on the number of items currently in the user's cart)
  • Result: The Cart_Summary_Title UI element will update to show "Your Cart (3 items)".

Example 3: Updating an Order Status Header

On an order details page, you want the title to reflect the current status of the order.

  • Inputs:
    • UI element: Order_Details_Header (a Title UI element on the order details page, initially set to "Order Details - Status: {{OrderStatus}}")
    • Placeholder: \{\{OrderStatus\}\}
    • Value: Shipped (retrieved from the order's current status in your database)
  • Result: The Order_Details_Header UI element will change to "Order Details - Status: Shipped".