UI Builder Calendar Component, how to use popover

[DJ Wolfson]

I'm currently working on using the Calendar component and can't seem to get the popover to work. I've enabled the Component's property, 'Popover enabled' and created a state to store the property, 'Popover content state' but anytime I click on the event I only get a loading popover. I've tried adding content to the sub-component of the calendar, 'event-popover' but this hasn't helped either. I've seen in other posts that people have used the event, Popover opened to update the state I'm storing for, 'Popover content state' but I'm unsure what the 'id' field represents. Setting the states, 'value' to 'ready' only results in no popover appearing.

Has anyone managed to get this to work?

Link to Calendar Components Documentation: https://developer.servicenow.com/dev.do#!/reference/next-experience/washingtondc/now-components/now-...

[DJ Wolfson · Accepted solution]

Ok, after getting help from the snDevs Slack channel, I've gotten a working solution.

• It's recommended to have 'Popover enabled' set to True. Data-binding this leads to inconsistnecies.
• Data bind the property, 'Popover state' to a state with the following format:
  

{
    "id" : null,
    "value": null
}

• Add an event handler to the 'Popover opened' that updates the states above with the following data:

api.setState("popoverReady", {
    "id": event.payload.event.id,
    "value": "ready" 
});​

• Add an event handler to the event, 'Popover closed' that updates the states above with the following data:

api.setState("popoverReady", {
    "id": ""
    "value": "destroyed" 
});​​

• Add the components you wish to expose within the Calendar's subtree, 'event-popover'.

[Andrew Bettcher]

Hi - I have a calendar component bringing in change records based on their planned start date. My idea was to have a simple popover using the Display Form Only component. 

I am definitely getting the event sys_id when an event is clicked (confirmed by outputting the content of the value of the parameter that I'm populating), and my component has a static table set (change_request) and is bound to the parameter that contains the confirmed sys_id.

However, when I click an event I get a little white square pop-up with a "searching" animation in it or, simply nothing. I've added console logs to the binding script that also confirm that the sys_id is making it there unchanged. I've tried static sys_ids in my client state parameter and even used static sys_id's in the Display Only Form component and....nothing.

I've tried different components and different tables and I've obviously been clearing the cache down rigorously (including browser cache and logging out, closing browser etc.)

Despite the convoluted set up, this should be a relatively easy thing to do once I've got data coming in but it seems that nothing I do will make it work.

Any ideas?