Ask AI
Skip to main content

Add title ui element to vertical list

Function: Add Title UI Element to Vertical List​

This function allows you to easily add a new title or heading to a "Vertical List" UI element within your application. It's perfect for structuring content, creating sections, or adding clear headings to dynamic lists.

Input​

  • List UI Element (Type: PART, Subtype: vertical-list, Required): The specific "Vertical List" UI element on your page where you want to add the title. You'll typically select this from your existing UI elements.
  • Title (Type: STRING, Required): The actual text you want to display as the title.
  • Level (Type: NUMBER, Optional): This determines the heading level of your title, similar to H1, H2, H3 in web pages. A lower number (e.g., 1) usually means a larger, more prominent title, while a higher number (e.g., 3) indicates a smaller sub-heading. If not specified, it defaults to 1.
  • Size Y (Type: NUMBER, Optional): This sets the vertical height (in pixels) of the title element within the list. If not specified, it defaults to 30 pixels.

Output​

This function does not produce a direct output value that can be used in subsequent steps. Its action is to modify the specified "List UI Element" by adding the new title directly to it.

Execution Flow​

Real-Life Examples​

Here are a few ways you can use the "Add Title UI Element to Vertical List" function:

Example 1: Adding a Main Section Title to an Empty List

Imagine you have a "Vertical List" UI element named ProductDetailsList on your product page, and you want to add a main heading for the product specifications.

  • Inputs:
    • List UI Element: ProductDetailsList
    • Title: "Product Specifications"
    • Level: 1
    • Size Y: (Left blank, will use default 30 pixels)
  • Result: The ProductDetailsList UI element will now display "Product Specifications" as a prominent main heading at the top.

Example 2: Adding a Sub-Section Heading within an Existing List

You have a "Vertical List" UI element named CustomerFeedback that already contains several customer reviews. You want to add a sub-heading to separate positive feedback from negative feedback.

  • Inputs:
    • List UI Element: CustomerFeedback
    • Title: "Positive Reviews"
    • Level: 2
    • Size Y: (Left blank, will use default 30 pixels)
  • Result: A new sub-heading "Positive Reviews" will be added to the CustomerFeedback list, appearing slightly smaller than a level 1 title, helping to organize the content.

Example 3: Adding a Title with Custom Height

You're building a dashboard and have a "Vertical List" UI element named DashboardWidgets. You want to add a title for a specific widget section, and you need it to have a slightly larger vertical space.

  • Inputs:
    • List UI Element: DashboardWidgets
    • Title: "Sales Performance Overview"
    • Level: 1
    • Size Y: 50
  • Result: The DashboardWidgets UI element will include "Sales Performance Overview" as a main title, occupying 50 pixels of vertical space, making it stand out more.