Using the Attachment Component

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 tutorial, you will configure your Workspace to include an Appointment Calendar. The Appointment Calendar component provides some default values out of the box so that the component can be set up to show data without much configuration. The properties we will configure will be staples that solve the pain points when it comes to calendar configurations such as Time Zones, Languages, and default selected dates.

This guide assumes you are meeting these environment requirements:

Family Release: Xanadu

UI Builder Release: 26.2.59

Roles Required: admin

You will:

• Create a Workspace Experience using UI Builder.
• Add an Appointment Calendar component.
• Configure its parameters to account for common pain points.

Step 1. Getting Started

1. Log in to your ServiceNow instance.

2. Navigate to Now Experience Framework > UI Builder in the filter navigator to open the UI Builder interface.

1. Click Create (in the upper right corner) > Experience

4. Fill in the fields as such:

Name: Calendar Configurations

App Shell UI: Workspace App Shell

URL Path: calendar-configurations

Landing Path: home

Roles: canvas_user

5. Click Create

1. On the following pop up, Click Open experience

You now have a Workspace Experience shell!

Step 2. Adding Page

1. Select the Plus button next to Pages and Variants

2. Select Create from Scratch Instead

3. Update Name to "My Appointment Calendar"

4. Click Continue

5. Then, select Looks good

6. Afterwards, select Continue

7. Select the Build responsive choice

8. Select Create

You now have a Next Experience page that's ready to undergo development!

Step 3. Adding the Appointment Calendar

1. In the content tree, underneath the Body, select Add Content >
2. Components
3. Content
4. Appointment calendar
5. Click Add

You now have added an Appointment Calendar to the page.

Step 4. Configuring the Appointment Calendar

Let's give our users the ability to change their view from Day to Week on demand

1. Select your component (Appointment calendar 1) by either selecting its visualization on the page or by selecting the components name underneath the content tree on the left.
2. After it has been selected, navigate to the component configuration panel to the right > Configure tab > Calendar configuration section > View > Select 'Day'

3. Underneath the Advanced calendar configuration section, check the Show View selector checkbox.

If this is left unchecked, the view set in step 2 will be the only view available to the end users.

Now let's bind the time zone of the calendar to the instances calendar, to do that -

1. Underneath the Calendar configuration tab, hover over Time zone until you see the small, stacked circles to 'Bind Data and use scripts' > select it

1. When the Bind data to Time zone pop up displays select Data types tab > Page properties > session > user > timeZone

2. After selecting the timeZone data pill you will see a small upward arrow to the right of the pill, select it to move the pill to the top of the window.

1. Select Apply

Now we will repeat steps 4.3- 4.6 for the Calendars Locale

1. Underneath Calendar configuration tab, hover over Locale until you see the small, stacked circles to 'Bind Data and use scripts' > select it

2. When the Bind data to Locale pop up displays select Data types tab > Page properties > session > user > language

3. After selecting the language data pill you will see a small upward arrow to the right of the pill, select it to move the pill to the top of the window.

4. Select Apply

Lets set the appointment calendar to always show today's date when it loads

1. Underneath Calendar configuration tab, hover over Selected date until you see the small, stacked circles to 'Bind Data and use scripts' > select it

2. When the Bind data to Selected date pop up displays select the 'Use Script' icon in the upper right.

3. After the Use script to define Selected date panel appears, Update the section to the following script:

function evaluateProperty({api, helpers}) {
let currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
return currentDate.toISOString();
}

The updated script section will look like this:

4. Select Apply

Save and Test

1. In the upper right corner of the page, select Save.

2. Then select Preview (to the left of Save).

The preview pane will now display.

3. In the preview pane, the functionality configured will display, be sure to test the page by impersonating different users in the environment (with different time zones), Changing the View as each user to ensure functionality, and as users with different languages.

Troubleshooting

If any of the functionality is missing after configuration be sure to double check your UI builder version as well as your family release. An environment that is consistent with the article will ensure less hiccups and speedbumps.

Another area that can sometimes cause issues would be cache. Be sure to reset the UI Builder cache, as well as browser cache, from time to time to ensure your browser is working from a 'clean slate'.

Conclusion

Congratulations! 🎉 When it comes to the Appointment Calendar, the key properties like time zone, language, and the default selected date, are just the foundation of configurations. These configurations offer a personalized user experience that meets users' expectations and can be a jumping point for calendar-based workflows. Be sure to stay tuned for the series to learn more about UI Builder components!

Check out the Next Experience Center of Excellence for more resources