Redirect to the Docs main page.Docs

Configuration

Configuring Inspect Window

Learn how to configure the Inspect Window for your inventory UI in Ultimate Grid Inventory.

Configuring the Inspect Window

The Inspect Window is displayed when you click the Open option on an item, showing detailed information about the item.

Example of Inspect WindowLoading image

When you click the Inspect option, this window opens to display item details. It includes a movable header and a close button.

In this guide, we'll configure the Inspect Window for the new UI.

Inspect WindowLoading image


Configuring the Inspect Window

Importing the Assets

Start by importing the background and icon assets for the Inspect Window, similar to previous configurations.

Background: Use the Sprite Editor to set up borders for proper resizing.

Changing ContainerWindow background with Sprite EditorLoading image

Icons: Import the icons for the window.

Showing the icons importedLoading image

Configuring the Component

Create the Inspect Window using the UGI Menu:

Right Click on Hierarchy > Ultimate Grid Inventory > Basic Window

Showing the Basic Window UGI MenuLoading image

Set the Background Image:

Reference the background image you imported in the Image component.

Referencing the window background to the Basic Window on image componentLoading image

Update the Icons:

Change the icons for the Icon and CloseButton GameObjects with the ones you imported.

After updating, the Inspect Window should look like this:

Showing the inspect window after changing the iconsLoading image

Configuring the Content of the Inspect Window

To display item properties such as name, description, and type, use Fillers provided by Ultimate Grid Inventory. These components retrieve item properties using reflection, simplifying UI setup.

  1. Set Up the Fillers:
  • Sprite Filler:

    Showing the Sprite FillerLoading image

  • Title Filler:

    Showing title filler for inspect windowLoading image

  • Item Type Filler:

    Showing filler for item typeLoading image

  • Dimension Filler:

    Showing Dimension FillerLoading image

  • Description Filler:

    Showing the description filler with refresh layoutLoading image

If you need more performance, consider using an AbstractFiller without reflection, but you may need to write custom code.

Example of Direct Access Abstract Filler:

  using Inventory.Scripts.Core.Items;
  using TMPro;
  using UnityEngine;
  using UnityEngine.UI;
 
  namespace Inventory.Scripts.Core.Displays.Filler
  {
      public class DirectAccessAbstractFillerExample : AbstractFiller
      {
          [SerializeField] private Image itemIcon;
          [SerializeField] private TMP_Text title;
          [SerializeField] private TMP_Text description;
 
          public override void OnSet(ItemTable itemTable)
          {
              itemIcon.sprite = itemTable.ItemDataSo.Icon;
              title.SetText(itemTable.ItemDataSo.DisplayName);
              description.SetText(itemTable.ItemDataSo.Description);
          }
 
          public override void OnReset()
          {
              itemIcon.sprite = default;
              title.SetText("");
              description.SetText("");
          }
      }
  }

Create the Inspect Window Prefab:

Drag the GameObject to the Project tab to create a Prefab.

Reference the Prefab in Inventory Settings SO:

Creating Inspect Window as PrefabLoading image


Now you have configured the Inspect Window with the new UI style. You can always customize it further to match your design needs!

Go to the next page to continue configuring your grid inventory and make it unique!

This guide walks through configuring the Inspect Window, from importing assets to setting up the UI components and creating a prefab. Let me know if there's anything else you need!

On this page