UI Builder Calendar Component - Popover

bdshan
Tera Expert

‎07-30-2023 08:11 AM

Copied from SNDevs: https://sndevs.slack.com/archives/C01QPGCA82K/p1690471135206409

 

I am working with the Calendar component. Thanks @btilton & @MGOPW for the You & I Builder session on this component. Does anyone have an example of how to get the event popover to display with content? I put a stylized text component in the event-popover component. I have the popover enabled, and when I click on an event I got a small white box with a spinning circle. I added the Event Clicked event to update the Popover Context State to {"value":"ready"}. I was expecting the popover to displayed with the text from the stylized text component. Additionally, when I click on an event in the calendar the POPOVER_OPENED event does not fire. However, when I click on an event in the agenda view, the event does get fired. Still, no content displayed in the popover, but at least I can see that the event fired.

 

Addtionally, thinking it threw if I have both event clicked and the popover enabled which event takes precedence? The answer may become clear if I could get the popover to function like I think it does. Which is, when an event is clicked the popover is open to display whatever data populates the components in the event-popover, after the Popover Context State is set to {"value":"ready"}. Which lead to my question above. I think there would be a conflict load and display the popover or do whatever is defined in the event clicked event.

0 Helpfuls
  • 682 Views
2 REPLIES 2

DJ Wolfson
Kilo Sage

‎06-25-2024 02:24 PM

Any luck getting this popover to work? I'm in the same spot as you. I'm considering just overriding the popover that it offers and building my own with an event to open it.

0 Helpfuls

DJ Wolfson
Kilo Sage
In response to DJ Wolfson

‎07-23-2024 05:41 PM

Ok, I'm not sure if you've already solved this issue but after getting help from the snDevs Slack channel, I've gotten a working solution. Link to my original post: https://www.servicenow.com/community/next-experience-forum/ui-builder-calendar-component-how-to-use-...

  • 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'.

 

Feel free to mark it as a solution if this works for you.

0 Helpfuls