Related Items
Use the “Related Items” tab layout to allow users to reference other parts of Procore in relation to your tool.
For example, an RFI or punch list item might relate to an RFI. A daily log entry might relate to a photo.
For example, an RFI or punch list item might relate to an RFI. A daily log entry might relate to a photo.
Anatomy
Empty State
When no items have been linked to, an Empty State appears on the page encouraging the user to link a related item.
Populated
As users link items, they will appear in a table.
Related Items is built off of our existing Detail Page and Panel components and all of the paddings, margins, and styles are the same.
Related Items is built off of our existing Detail Page and Panel components and all of the paddings, margins, and styles are the same.
Opening the Panel
When the user clicks Link Related Item, a panel will appear with a list of every tool type in Procore. User can scroll through and filter through this list. The list of items has a base list group with every Procore tool, and two subgroups, “Daily Log” and “Attach Files”.
Items within are all sorted alphabetically. If any Custom Tools exist in the project, they’re sorted alphabetically by their name into the first unnamed group.
Items within are all sorted alphabetically. If any Custom Tools exist in the project, they’re sorted alphabetically by their name into the first unnamed group.
Pagination
The Related Items table paginates after 24 rows.
Behavior
Related Items Panel Views
The Related Items panel offers several views that walk the user through linking an item.
Selecting an Item
Once the user has drilled down into a tool type, they’ll see a list of items for that tool. They can navigate back to the list of tools by clicking on the arrow/chevron in the header.
Item Confirmation
Once an item is selected, the user may include an optional note or comment explaining why the item has been linked.
Attaching an Item
Certain tools (Documents, Drawings, Forms, and Photos) do not link to a page in Procore but rather attach a copy of that item to the Related Items table. The item can be downloaded, but there is not a page you can go to to view the item. When you click on one of these tools, a File Select modal will appear. Other than that, the process is the same.
Panel Loading
The panel will need to load when querying a list of tools within the project, querying a list of items within each tool, etc.
Error & Empty States
There are various empty states the Related Items panel supports.
No Items in Project
Occurs when no items have been created in the project that can be added as related items.
No Results Found
Occurs when a user searches or filters and the query returns no results.
500/Server Error
Occurs when the panel results time out or fail to load.
500/Server Error Toast
Occurs when a timeout or similar prevents an item from being linked or attached. Display an error toast and allow the user to click “Link” again
No Items in Project
Occurs when no items have been created in the project that can be added as related items.
No Results Found
Occurs when a user searches or filters and the query returns no results.
500/Server Error
Occurs when the panel results time out or fail to load.
500/Server Error Toast
Occurs when a timeout or similar prevents an item from being linked or attached. Display an error toast and allow the user to click “Link” again