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:
XanaduUI 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.
3. 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
6. 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
- In the content tree, underneath the Body, select Add Content >
- Components
- Content
- Appointment calendar
- 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
- 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.
- 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
2. When the Bind data to Time zone pop up displays select Data types tab > Page properties > session > user > timeZone
3. 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.
4. Select Apply
Now we will repeat steps 4.3- 4.6 for the Calendars Locale
- 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
- 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
