View Categories

List Inventory

5 min read

List Inventory #

  • Prerequisites
  • Overview
    • What's Different from Base Inventory
    • Sorting System
      • Sort Options
      • Custom Sort Functions
    • UI Implementation
      • List Widget Structure
      • Binding to Container
  • How To Guides
    • How to Set Up List View UI
    • How to Add Custom Sort Options
  • PREREQUISITES
Important: Read the inventory documentation first. The List-Based Inventory uses the same container system, item data, and core functionality. This document only covers what's different.

Overview #

What's Different from Base Inventory #

The List-Based Inventory is simply an alternative UI presentation for the same container system. Instead of displaying items in a grid, items are shown in a scrollable vertical list.

Key Differences:

  • Visual Presentation: Items displayed in a vertical list instead of a grid
  • Sorting Features: Built-in sorting by category, name, weight, value, etc.
  • No Spatial Positioning: Items don't have fixed positions or visual slots
  • Compact Display: Can show more items at once with smaller representations

Everything Else is Identical:

  • Uses the same BP_Inventory_Container actor
  • Items stored in the same data structure
  • All container functions work identically
  • Events (OnInventorySlotUpdated, etc.) are the same
  • Adding, removing, transferring items works the same way
  • Can switch between grid and list views for the same container

Sorting System #

The primary feature of list-based inventory is the ability to sort items by various properties.

Sort Options #

Common Sort Functions:

  • By Category: Groups items by their Gameplay Tag categories (Weapons, Consumables, Resources, etc.)
  • By Name: Alphabetical order (A-Z or Z-A)
  • By Weight: Lightest to heaviest (or reversed)
  • By Value: Cheapest to most expensive (or reversed)
  • By Quantity: Stack sizes from smallest to largest
  • By Recently Added: Newest items first

Sort Direction:

Most sort options support ascending/descending order:

  • First click: Ascending (A-Z, lightest to heaviest, etc.)
  • Second click: Descending (Z-A, heaviest to lightest, etc.)
  • UI shows current direction with arrow indicators

Active Sort Indicator:

The UI should clearly show which sort is currently active (highlighted button, checkmark, etc.)

Custom Sort Functions #

You can create custom sort functions for game-specific properties.

Examples:
  • Sort by Damage: For weapons, compare damage values
  • Sort by Armor Rating: For armor pieces, compare protection values
  • Sort by Rarity: Common → Uncommon → Rare → Epic → Legendary
  • Sort by Durability: Most damaged to least damaged

Implementation:

  • Create a function that retrieves the property from each item
  • Implement comparison logic
  • Sort the item array
  • Regenerate the list display

UI Implementation #

List Widget Structure #

The list UI is structured differently from grid UI, but binds to the same container.

UI Hierarchy:

  • Container Panel (main window)
    • Sort Controls (buttons for different sort options)
    • Scroll Box (scrollable area containing list items)
      • List Item Widgets (dynamically created for each inventory item)
    • Footer (total weight, value, item count, etc.)

List Item Widget:

Each item in the list is represented by a widget that typically displays:

  • Item icon
  • Item name
  • Quantity/stack size
  • Additional properties (weight, value, etc.)
  • Quick action buttons (optional)

Dynamic List Generation:

  • Get all items from the container using GetAllItems
  • Apply current sort function to the array
  • Clear existing list item widgets
  • For each item in sorted order:
    • Create a list item widget
    • Populate it with item data
    • Add it to the scroll box

Updates:

When the container changes:

  • Container triggers OnInventorySlotUpdated event
  • List UI receives the event
  • Re-generate the list with current sort applied
  • Optionally maintain scroll position

Binding to Container #

The list view binds to containers exactly like grid view.

Binding Process:

  • Get reference to BP_Inventory_Container actor
  • Pass container reference to the list UI widget
  • Bind to container's OnInventorySlotUpdated event
  • Generate initial list display

Container Functions Used:

  • GetAllItems: Retrieve all items for display
  • AddItem: Add items through UI interactions
  • RemoveItem: Remove items through UI interactions
  • MoveItemToSlotIndex: Transfer items between containers

All standard inventory actions work from the list view (drag-and-drop, right-click context menus, etc.)

How to guides #

How to Set Up List View UI #

This guide explains how to create a list-based UI for a container.

Step 1: Create List UI Widget #

Create a new widget blueprint (or use the provided list widget template):

  • Add a Scroll Box for the list items
  • Add sort Buttons for different sort options
  • Add footer elements for totals (weight, value, etc.)

Step 2: Create List Item Widget #

Create a widget blueprint for individual list items:

  • Add an Image for the item icon
  • Add Text fields for name, quantity, weight, value, etc.
  • Add any interactive elements (buttons, hover effects, etc.)
  • This widget is spawned for each item in the list

Step 3: Bind to Container #

When opening the inventory UI:

  • Get the container reference from AC_Inventory_Advanced
  • Create the list widget
  • Pass the container reference to the widget
  • Bind to OnInventorySlotUpdated event
  • Generate the initial list display

Step 4: Implement Sort Functions #

For each sort button:

  • Create an On Clicked event
  • Call the appropriate sort function (by category, name, weight, etc.)
  • Regenerate the list with sorted items
  • Update the active sort indicator

Step 5: Test #

Verify:

  • Adding/removing items updates the list
  • Sorting works correctly
  • All actions (use, drop, transfer, etc.) work from the list
  • Performance is acceptable with many items

Optional: Toggle Between Grid and List Views

Allow switching between grid and list for the same container:

  • Add a toggle button
  • On click, destroy current UI and create the other type
  • Bind to the same container reference
  • Container state persists across view changes

How to Add Custom Sort Options #

This guide explains how to add new sorting criteria.

Step 1: Identify Sort Property #

Determine what property to sort by (damage, armor rating, durability, rarity, etc.)

Step 2: Add Sort Button #

In the list UI widget:

  • Add a new Button for the sort option
  • Set button text/icon
  • Position with other sort buttons

Step 3: Create Sort Function #

Create a function that sorts items by your property:

  • Get all items from container using GetAllItems
  • For each pair of items, compare the property values
  • Sort the array based on comparison
  • Return sorted array
Example – Sort by Damage:

Function: SortByDamage

  1. Get all items
  2. For each pair of items:
 - Get Item A damage from item struct
 - Get Item B damage from item struct
 - Compare values
  1. Return sorted array

Step 4: Connect Button to Function #

In the sort button's On Clicked event:

  • Call your custom sort function
  • Set active sort indicator to this button
  • Regenerate the list display with sorted items

Step 5: Add Sort Direction Toggle (Optional) #

Allow ascending/descending sort:

  • Track current sort direction in a variable
  • On button click, toggle the direction
  • Apply sort with direction parameter
  • Update UI arrow indicator
What are your Feelings