Hi, 

Use list widget and set the aggregate as source 

Hi, 

To dynamically display menu labels horizontally in a Menu Block using an Aggregate in OutSystems (Traditional Web), follow these step-by-step instructions:(OutSystems Success)

Step-by-Step Guide

1. Create or Modify the Menu Block

• Navigate to the Interface tab in Service Studio.

• Under UI Flows > Common, locate the existing Menu Block or create a new one.(OutSystems)

2. Add an Aggregate to Fetch Menu Items

• Within the Menu Block, add an Aggregate (e.g., GetMenuItems_Root) that retrieves your menu items from the MenuItem entity.

• Apply filters as needed (e.g., ParentId = NullIdentifier() to fetch top-level menu items).

3. Insert a List Widget for Dynamic Rendering

• Drag a List widget into the desired container within the Menu Block.

• Set the Source Record List of the List widget to the Aggregate you created (GetMenuItems_Root.List).(OutSystems)

4. Design the List Items

• Inside the List widget, add an Expression widget to display the menu label:

  • Set the Expression to GetMenuItems_Root.List.Current.MenuItem.Label.

• Optionally, wrap the Expression in a Link widget to enable navigation:

  • Set the Destination to the appropriate screen or URL.(OutSystems, OutSystems)

5. Arrange Menu Items Horizontally

• To display the menu items horizontally, adjust the CSS:

  • Set the Style Classes of the List widget to include horizontal-menu or a custom class.

  • Define the horizontal-menu class in your theme or page-specific CSS:

    .horizontal-menu {

      display: flex;

      flex-direction: row;

      list-style-type: none;

      padding: 0;

      margin: 0;

    }

    
    

    .horizontal-menu li {

      margin-right: 20px;

    }

    
    

    }

  • Ensure that each List Item (

  • ) is styled appropriately to align horizontally.

    
    

6. Test the Menu

• Publish your application.

• Navigate to a screen that includes the Menu Block.

• Verify that the menu items are displayed horizontally and reflect the data from your Aggregate.(OutSystems)

By following these steps, you can dynamically render horizontal menu labels in your OutSystems application using data from an Aggregate.

Thanks,
bharathiraja