Ask AI
Skip to main content

Replace placeholder on text ui element

Function: Replace placeholder on text UI element​

This action allows you to dynamically update the content of a text-based display area on your application's page. It works by finding a specific placeholder (a special tag you've put in your text) and replacing it with new information you provide. This is incredibly useful for personalizing messages, displaying dynamic data, or updating information without needing to manually edit the page.

Input​

  • UI element (PART): The specific text display area on your page (like a text box, label, or paragraph) where you want to find and replace content. This must be a text-based UI element. (Required)
  • Placeholder (STRING): The unique name or identifier you've placed within your text UI element that you want to replace. For example, if your text contains \{\{customerName\}\}, you would enter customerName here. The system automatically handles the \{\{ \}\} wrapping. (Required)
  • Value (STRING): The new text, number, or data that will replace the specified placeholder. (Required)

Output​

This action does not produce any direct output. Instead, it modifies the content of the specified UI element directly on your application's page.

Execution Flow​

Real-Life Examples​

Here are some practical ways you can use the "Replace placeholder on text UI element" action:

Example 1: Personalizing a Welcome Message

Imagine you have a welcome message on your app's dashboard that says: "Hello, {{userName}}! Welcome back."

  • Inputs:
    • UI element: WelcomeMessageText (This is the text box displaying "Hello, {{userName}}! Welcome back.")
    • Placeholder: userName
    • Value: Alice (This could come from a user's profile data)
  • Result: The WelcomeMessageText UI element on the page will now display: "Hello, Alice! Welcome back."

Example 2: Displaying Dynamic Product Information

Suppose you have a product detail page with a description that includes a placeholder for the product's price: "This amazing product is available for only {{productPrice}}."

  • Inputs:
    • UI element: ProductDescriptionText (The text area containing the product description)
    • Placeholder: productPrice
    • Value: $49.99 (This could come from a database lookup)
  • Result: The ProductDescriptionText UI element will update to show: "This amazing product is available for only $49.99."

Example 3: Updating a Confirmation Message After Form Submission

After a user submits a contact form, you want to show a confirmation message like: "Thank you for contacting us, {{customerEmail}}. We will get back to you shortly."

  • Inputs:
    • UI element: ConfirmationMessageText (The text element displaying the confirmation)
    • Placeholder: customerEmail
    • Value: alice@example.com (This value would be captured from the submitted form)
  • Result: The ConfirmationMessageText UI element will display: "Thank you for contacting us, alice@example.com. We will get back to you shortly."