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 UI element on your page by replacing specific placeholders with new information. It's perfect for personalizing messages, displaying dynamic data, or updating content based on user interactions or data from your application.

Input​

  • UI element (UI element): The specific text-based UI element on your page where you want to find and replace text. This element must be designed to display text. (Required)
  • Placeholder (Text): The unique name of the placeholder you want to find within the chosen UI element. For example, if your UI element contains Hello \{\{user_name\}\}!, you would enter user_name here. This action automatically handles the \{\{ and \}\} formatting. (Required)
  • Value (Text): The new text or data that will replace the identified placeholder. This could be static text you type in, or dynamic data from another part of your application (e.g., a user's name, a product price, or a date). (Required)

Output​

This action does not produce a direct output value. Instead, it modifies the content of the selected UI element directly on your page, replacing the specified placeholder with the provided value.

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 "Welcome, {{user_name}}!". You want to replace \{\{user_name\}\} with the actual name of the logged-in user.

  • Inputs:
    • UI element: WelcomeMessageText (This is the name of your text UI element)
    • Placeholder: user_name
    • Value: John Doe (This would typically come from a "Current User" data source)
  • Result: The WelcomeMessageText UI element on the dashboard will now display "Welcome, John Doe!".

Example 2: Displaying Dynamic Product Information​

You have a product detail page with a description that includes a placeholder for the price: "This amazing product is available for only {{product_price}} today!" You want to update this when a user selects a different product variant.

  • Inputs:
    • UI element: ProductDescriptionText (The text UI element showing the product description)
    • Placeholder: product_price
    • Value: $49.99 (This would come from a "Product Data" source based on the selected variant)
  • Result: The ProductDescriptionText UI element will update to show "This amazing product is available for only $49.99 today!".

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, {{customer_email}}. We will get back to you shortly."

  • Inputs:
    • UI element: ConfirmationMessageText (The text UI element displaying the confirmation)
    • Placeholder: customer_email
    • Value: [email protected] (This would be the email address the user entered in the form)
  • Result: The ConfirmationMessageText UI element will display "Thank you for contacting us, [email protected]. We will get back to you shortly."