> For the complete documentation index, see [llms.txt](https://muhammad-taha-bin-farooq.gitbook.io/sheet-linker/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://muhammad-taha-bin-farooq.gitbook.io/sheet-linker/fetch-in-unity/ui-toolkit-advance/creating-ui-documents.md).

# Creating UI Documents

This system comprises three primary documents:

1. [Loading UI](#loading-ui)
2. [Main Events UI](#mian-events-ui)
3. [Event Item UI](#event-item-ui)

These documents can be located in the UI Folder.

<figure><img src="https://3467764585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4ujLeyUb7fFQKDxNyJFC%2Fuploads%2F111lpGbRM93hFz3FISil%2Fimage.png?alt=media&amp;token=394c214d-4350-4603-945e-74a03ad2c142" alt=""><figcaption></figcaption></figure>

#### Loading UI:

This is the most basic UXML. It includes a background, text, and a loading bar. The entire document appears as follows:

<figure><img src="https://3467764585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4ujLeyUb7fFQKDxNyJFC%2Fuploads%2FnM7a1cVLGFquPmiPN4lz%2Fimage.png?alt=media&amp;token=ecb54bf0-0c08-4577-8b4e-1b61573eb817" alt=""><figcaption></figcaption></figure>

This includes a *background (BG)*, *loading text*, and a *progress bar*. That's all there is to it.

#### Mian Events UI:

This document serves as the primary document for the UI. It is instantiated from the UI Document class.

<figure><img src="https://3467764585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4ujLeyUb7fFQKDxNyJFC%2Fuploads%2FR7Gj8aRFLRrYc5qlYzpV%2Fimage.png?alt=media&amp;token=aa17b65a-cd14-4516-b03c-3d802bf9f8f7" alt=""><figcaption></figcaption></figure>

This UXML looks like this:

<figure><img src="https://3467764585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4ujLeyUb7fFQKDxNyJFC%2Fuploads%2Fu7wjdKBpZGsOBogfQLDs%2Fimage.png?alt=media&amp;token=b5bafceb-e51c-400b-97c6-e5899f4bc546" alt=""><figcaption></figcaption></figure>

In this hierarchy, you'll notice there are elements such as *Title*, *Events Scroll*, and [*Loading Document*](#loading-ui). I will populate the Events Scroll with event items. The Loading Document is present to display the progress of data loading.

#### Event Item UI:

This is a somewhat intricate UI document that encompasses various pieces of information. The entire document is displayed as follows:

<figure><img src="https://3467764585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4ujLeyUb7fFQKDxNyJFC%2Fuploads%2F674xsTxxzNlzlOcmqRQP%2Fimage.png?alt=media&amp;token=5f73de5b-cd9d-4827-befb-b802901c8720" alt=""><figcaption></figcaption></figure>

In this layout, you’ll notice the following elements:

* ‘BG’ serves as the background.
* ‘FG’ is used for the title. Within the title’s child elements, you’ll find the title text and time text.
* The ‘Body’ follows next, and its layout is split into two sections: the Icon and the Description Container.
* Within the Icon Panel, there’s an Icon image and a [Loading panel](#loading-ui).
* The Description Container houses the Text and a button.

The subsequent step involves instantiating these items.