UI Builder Calendar Component Problem

Velma · ‎04-14-2022

UI Builder Calendar Component. Rome, Patch 5 on PDI. Rome, I do not have access to determine in my actual environment. The following behavior is the same and absolutely consistent (multiple repeats) in both:

I add Calendar component to a page—to keep it simple, an entirely vanilla page. To keep it simple, all I do is add an instance of the Calendar component, vanilla configuration, and I save. I Open the page, it looks good and appears to work fine. Back in development, I try to switch to another page, and it says “This page has unsaved changes.” Cancel returns me to the page, but the Save button is not enabled. Save and Continue goes nowhere. Discard will change to a different page—but when I return to the Calendar page, it is a fully corrupted page, no components showing, nothing accessible, just a single diamond where there should be a tree. If it was previously saved, I can restore it going to sys_ux_macroponent (I don’t have access to Revert, but I can edit out the Composition JSON from the history Payload XML, and paste it in, which works)—that gets me back to a working page, but not one with a Calendar component. (I have not tried reverting in PDI, where presumably I could just click the button.)

I can tell from the extensive documentation in the forum that people are able to use this component. If my problem was a permissions issue, it would not occur exactly the same on the PDI. Am I in both places on the same version that wasn’t adequately regression tested, or something about an upgrade glitch? These are the only explanations I can think of. Does this occur for others in Rome Patch 5? Does anyone have a workaround? (I tried clearing the PDI cache after reading about that and that did not help.) Will it get fixed in Rome?—we are unlikely to go to San Diego any time soon. I do not have access to put in a ticket, but I can try to pursue that through my channels. Any suggestions or information would be very welcome.

Velma · ‎04-27-2022

UPDATE on solution. It is just the "Timeline section" property. You can use the replacement sample I posted above, OR, you can just edit the provided sample (in Rome), either editing all the "content" attributes to an empty string or removing them (and the comma before each of them) entirely. You have to do this before you save the page. Note: I haven't actually tried to do anything with the calendar yet, just gotten to a working sample. I will see if someone has written a great tutorial. 🙂

View solution in original post

Brad Tilton · ‎04-14-2022

Hi Velma, I think you may be running into the issue where UI Builder doesn't support emojis in any of the component properties, but the calendar component has emoji in its demo data in the properties. I don't remember exactly where it is, but if you clear out the demo data from the properties when you add it to the canvas I think that will fix your issue.

Velma · ‎04-18-2022

Thank you, @Brad Tilton. It feels like the whole UI Builder thing would crumble without your videos and posts and responses. I will try figuring this out when I can find a day to do it methodically. My first try I must have done it too ruthlessly--it broke in an entirely different way.

Barrilito van D · ‎04-21-2022

Hi Velma,

I agree, I love Brad's input of many things around the ui builder and expressed my thanks personally as it got my lots further 🙂

And also in this case Brad is spot on. It are the emojis which are on the demo data. Weird enough servicenow knows this (as confirmed on a ticket I raised), so that is not nice to see it in several releases not working.

I can let you know that I gave up working with it, even touching the input with that emoj data screws up the entire page, and like you said the button to save even does not come up anymore.

If anyone has other experiences let us know, but as far as I tested it, it keeps on crashing. and as stated it is disappointing to not see it fixed after it is already found in several releases.

Velma · ‎04-26-2022

So, based on the information provided by Brad and with a string of further destroyed pages, I seem to have a functional sample calendar component in a still alive UI Builder page. I made the following three changes in the one that did not murder anything. It's very possible that I do not need to make all three of them, but I don't feel like narrowing it down further at the moment. Hopefully this will give someone else an less painful start.

----------------------------
Unkilling the calendar.

(1)

Contextual panel items:

Replaced sample data with:

[]

(2)

Timeline sections:

Replaced sample data with:

[

{

"id": "ITSM_IDC",

"title": "Calendar Component",

"isCollapsed": false,

"showHeader": true,

"textColor": "",

"children": [

{

"id": "Software",

"title": "Appointment Booking",

"markspans": [

{

"from": 9,

"spans": 4,

"color": "#94baf7",

"content": ""

},

{

"from": 13,

"spans": 1,

"color": "#e6f7c7",

"content": ""

},

{

"from": 14,

"spans": 4,

"color": "#ecdf93",

"content": ""

}

]

},

{

"id": "HardwareSection",

"title": "Calendar view",

"isCollapsed": false,

"showHeader": true,

"children": [

{

"id": "Hardware",

"title": "Readonly Calendar"

},

{

"id": "HardDisk",

"title": "Editable Calendar",

"markspans": [

{

"from": 2,

"spans": 8,

"color": "#ffbdc5"

},

{

"from": 8,

"spans": 2,

"color": "#e6f7c7"

}

]

},

{

"id": "NetworkGroup",

"title": "Drag and Drop support",

"isCollapsed": false,

"showHeader": true,

"children": [

{

"id": "Network",

"title": "Reschedule Events",

"markspans": [

{

"from": 8,

"spans": 8,

"color": "#ccc",

"style": {

"backgroundImage": "repeating-linear-gradient(-25deg, #fff, #fff 20px, #df5646 20px, #df5646 40px, #fff 40px, #fff 60px, #1c78a4 60px, #1c78a4 80px)"

}

},

{

"from": 8,

"spans": 2,

"color": "#ffbdc5"

}

]

},

{

"id": "Network1",

"title": "Extend/Shrink Events"

}

]

}

]

},

{

"id": "ServiceDesk",

"title": "Timeline View"

}

]

},

{

"id": "ITBM_IDC",

"title": "Mobile Applications",

"isCollapsed": false,

"showHeader": true,

"textColor": "",

"children": [

{

"id": "MIM",

"title": "MIM"

},

{

"id": "TechnicalPlan",

"title": "On Call Application",

"isCollapsed": false,

"showHeader": true,

"children": [

{

"id": "CommunicationTask",

"title": "View My Shifts"

},

{

"id": "ConferenceTask",

"title": "Create Rotas",

"isCollapsed": false,

"showHeader": true,

"children": [

{

"id": "SMSTask",

"title": "View overlapping rotas"

},

{

"id": "CommunicationPlan",

"title": "8-5 Shifts",

"isCollapsed": false,

"showHeader": true,

"children": [

{

"id": "MailTask",

"title": "Gaps"

}

]

}

]

}

]

}

]

}

]

(3)

Timeline Vertical Lines:

Replaced sample data with:

[

{

"meta": {},

"inlineStyle": {

"width": "2px",

"height": "100%",

"margin": "0 auto",

"backgroundColor": "#fff",

"backgroundRepeat": "repeat-y",

"backgroundSize": "100% 88px",

"backgroundPosition": "0% 0%"

},

"utcMS": 1596006089149

},

{

"meta": {

"id": 1

},

"inlineStyle": {

"width": "2px",

"height": "100%",

"margin": "0 auto"

},

"utcMS": 1595991689149

}

]