Ask AI
Skip to main content

Show an element

Function: Show an element​

This action allows you to make a user interface (UI) element visible on the screen. When an element is shown, it will appear in its designated place within your application's layout, becoming accessible and viewable to your users. This is useful for dynamically revealing content, messages, or controls based on user interactions or application logic.

Input​

  • UI element: The specific user interface component (such as a button, text field, image, or an entire section) that you want to display. This input is required.

Output​

This action does not produce a direct output value. Instead, its effect is to change the visibility of the specified UI element, making it appear on the screen.

Execution Flow​

Real-Life Examples​

Example 1: Revealing a "Thank You" message after form submission​

  • Scenario: After a user successfully submits a contact form, you want to hide the form and immediately show a "Thank You" message to confirm their submission.
  • Inputs:
    • UI element: ThankYouMessageText (a text element that was initially hidden on the page)
  • Result: The ThankYouMessageText element becomes visible on the screen, providing instant feedback to the user.

Example 2: Displaying a "Loading" spinner during data retrieval​

  • Scenario: When a user clicks a button to fetch data from a database, you want to show a loading indicator to inform them that the application is working. Once the data is loaded, you would typically hide the spinner (using a "Hide an element" action) and then display the results.
  • Inputs:
    • UI element: LoadingSpinnerIcon (an icon or animation element that was initially hidden)
  • Result: The LoadingSpinnerIcon appears on the screen, visually indicating to the user that an operation is in progress.

Example 3: Showing advanced options based on user selection​

  • Scenario: You have a settings page where users can choose between "Basic" and "Advanced" modes. When the user selects "Advanced," you want to reveal additional configuration options that were previously hidden to keep the interface simple for basic users.
  • Inputs:
    • UI element: AdvancedSettingsPanel (a container element holding several advanced input fields, initially hidden)
  • Result: The AdvancedSettingsPanel and all its contents become visible, allowing the user to access and modify the advanced settings.