UI Builder Essentials: Using the Attachment Component

[MGOPW]

Using the Attachment Component

Table of Contents

• Step 1. Open UI Builder
• Step 2. Open Home Base
• Step 3. Add Attachment Component
• Step 4. Rename the Attachment Component
• Step 5. Configure Attachment Component
• Step 6. Conditionally Disable Uploading
• Step 7. Save and Test!

Articles Hub

Want to see all of our other articles and blogs related to UI Builder and Workspaces?

Check out the hub: https://sn.Works/BytesArticles

You can copy the link above and share it!

We Value Your Feedback!

Have any suggestions or topics you'd like to see in the future? Let us know!

Give Feedback

Overview

In this article you will learn more about the Attachment Component, its use cases, and how to add the component to a record page using UI Builder. By the end, we will enable end users to attach files to a record and add the functionality to automatically remove the ability to add attachments if the record is in a Closed or Canceled State.

Before we get started, at a minimum, make sure you can meet these environment requirements:

Family Release: Xanadu

UI Builder Release: 26.2.59

Role Required: admin

What is the purpose of the Attachment Component?

• File Uploading – Allows users to upload one or multiple files.
• Drag and Drop – Users can drag and drop files for easier uploads.
• File Management – View, delete, and download attachments.

What are the potential Use Cases for the Attachment Component?

• Incident Management – Users attach screenshots or logs to incident records.
• HR Service Delivery – Employees upload documents for HR cases.
• Customer Service – Customers and Fulfillers can attach documents for clarity/processing
• Project Documentation – Teams upload files related to tasks or milestones.
• and the list goes on!

📢

Prerequisites

Before starting this tutorial, ensure you've completed the necessary prerequisites to follow along smoothly. Here are some key articles you might need to reference:

• How to make a workspace from scratch: In this article, we created the Customer Support Workspace.
• Link to Destination Opens a List Page That Is Filtered by Clicking a Data Viz

📌

Troubleshooting

If at any point something isn't working, try clearing the UI Builder cache. 

Within your page variant editor in UI builder, click the hamburger menu icon at the top-left, go to Developer > Clear UI Builder Cache.  You can also try clearing your local browser cache.

Step 1. Open UI Builder

1. In your ServiceNow instance, use the Application Navigator to go to Now Experience Framework then UI Builder.

2. When UI Builder opens, you should see the “UI Builder Home” screen.

3. Select the Experiences Tab at the top of the screen.

4. Open the Customer Support Workspace

Step 2. Open Home Base

1. Open the Home Base page by selecting Default underneath its page listing

Step 3. Add Attachment Component

1. Under the Content Tree > Body > hover over 'Column layout 1', until the 3 dots appear to the right, then select them.

2. Select 'Add before'

3. Search for attachment, in the component search bar

4. Select the Attachments component

You now have an Attachment component added to your Page

Step 4. Rename the Attachment Component

1. Under the Content tree > Body > Column 1 > hover over Attachments 1
2. Select the small dots to the right of the Attachments 1 component,
3. Select the Rename menu option

4. Fill in the fields as follows:

Component label: Attachments

Component ID: attachments

Step 5. Configure Attachment Component

1. Navigate underneath the Content tree > Body > Attachments

2. Underneath the Configuration side panel > Configure tab > Hover over Table to see the Data Bind icon (3 stacked circles), then select it

Now we will bind the table from the Lists selected record to the attachments table

3. Navigate to Data types tab > Component > List_1 > select the data pill named recordSelectedTable > click the small arrow to the right of the data pill.

4. Select Apply

For the Sys ID we will follow the same instructions.

5. In the Component Configuration panel, hover over Sys ID > select the Data Bind icon (stacked circles)

6. Navigate to Data types tab > Component > List_1 > select the data pill named recordSelectedSysId > click the small arrow to the right of the data pill

7. Select Apply

8. In the Component Configuration panel > underneath Configure > Layout mode > update the value to Compact

Step 6. Conditionally Disable Uploading

1. From the Content Tree, Select the Attachments Component

2. In the Component Configuration panel, hover over is uploading attachment disabled? until Data Binding Icon shows, then select it
3. Select <> Icon to Use a Script - from the upper right corner of the Data Bind window
4. Create the script below, in the Data Bind window.

This will check if the logged in user has the role report_admin

function evaluateProperty({ api, helpers}){

     // Retrieve the current user's roles from the session context.
     let user_roles = api.context.session.user.roles;

     // if user has role, make 'Is uploading attachments disabled' false
     return !user_roles.includes("report_admin");

}

Step 7. Save and Test

1. Impersonate a user in the environment that has, at least, the itil role and the report_admin role.
2. As that user navigate to the UI Builders Page URL for the home-base page.
3. Click on the records in the list.
4. Notice how the attachments display at the top of the page (if there are attachments on the selected record) as well as the ability to add new attachments from here.
5. Now Impersonate a user that has at least the itil role but doesn't have the report_admin role.
6. Navigate to the same page.
7. Notice how the attachments display at the top of the page (if there are attachments on the selected record) but you do not have the ability to add new attachments.

End results should appear as follows:

When Impersonating a User that has the report_admin role, and selecting a record, the +Add file link will appear, which will allow the user to upload attachments to the record.

When Impersonating a User that does not have the report_admin role, then selecting a record, the user will not see the +Add file link, meaning they won't have the ability to upload attachments to the record.

 

Conclusion

Congratulations! 🎉 You have successfully added the Attachments component, configured it, and conditionally allowed usage of it!

If you found this guide helpful, consider sharing it with peers or teams looking to elevate their UI Builder skills with dynamic pages. If you like this type of content, please mark the article "Helpful", and leave us your topic ideas in the comments.

Keep an eye out for future tutorials where we’ll dive deeper into crafting immersive, data-driven experiences. Until then—happy designing, and stay curious!

Check out the Next Experience Center of Excellence for more resources