CSM/FSM workspace - moving sub-pages between parent pages in the UI Builder

GlideFather
Tera Patron

Ahoy SN ninjas!

 

Do you know if it is possible to move existing components (particularly sidebar panel items) from one page to another?

 

There was a page that has been deprecated by ServiceNow and I need to take the existing customisations from the deprecated one and move it to the new one. From "Record default" to "CSM Default record page".

 

Is there any chance to do so by a script or insert/stay or updating the parent?

 

What is needed, to move from deprecated (red) to the new one (green)

GlideFather_0-1780656923928.png

GlideFather_1-1780656931193.png

 

Before replacing the page and after, goal is to get from red to green

GlideFather_2-1780657094175.png

 

Do I need to create duplicate variants and then somewhere change the parent? or is it possible just to update it in some backend table?

 

And then eventually bring the same experience with buttons, related lists and everything to be as 1:1 as possible.

 

So many questions... Thank you in advance!

 

---
Where the rules are real, you'll find me
1 ACCEPTED SOLUTION

GlideFather
Tera Patron

It is quite a lot of manual copy pasting of sys IDs but I managed to move the variants as needed.

 

First of all, I want to explain the difference between the deprecated and the new page.

You can locate the sections in the UI Builder > CSM Experience > CSM Default record (eventuall Default record) > right > Tab sidebar Legacy or Contextual sidebar

 

GlideFather_0-1782142666153.png 

 

The difference between the 2 in backend:

GlideFather_1-1782142770400.png

 

Difference between the new variant and page collections, the legacy page goes with "viewport"

GlideFather_2-1782142835356.png

 

The CSM default record page was read-only so I created a duplicate of that page called "CSM default record page [new]", navigated to the path in the UI Builder editor mode and created the Viewports clicking the button below:

GlideFather_3-1782142885185.png

 

It converts the existing variants.

 

Then to move the variants from legacy/deprecated page, go to that page, settings mode and not editor:

GlideFather_4-1782142993376.png

 

Create a duplicate in the legacy page:

GlideFather_5-1782143009418.png

GlideFather_6-1782143015693.png

 

Go to the [sys_ux_screen] and locate that record to update its Parent macrocomponent and Screen Collection

 

https://yourinstance.service-now.com/sys_ux_screen_list.do

 

GlideFather_7-1782143025661.png

 

  • Parent macro is the newly created CSM page >>> CSM default record page [new], that can be easily identified by its name.
  • Screen collection is difficult to find as it holds the same name, so it is better to change it by sys_id.

 

To get sys ID of "Virtual agent" screen collection, locate that record in the UIB Settings, click the triple dots on the right (you might need to hover over, not always visible), select View settings:

GlideFather_8-1782143168679.png

 

Open records > Variant collection

GlideFather_9-1782143207112.png

New page is opened and it is a record that its sys ID you will be copying to the screen collection:

GlideFather_10-1782143241147.png

GlideFather_11-1782143247997.png

 

And after that, it is moved as needed:

GlideFather_12-1782143260201.png

 

sys_ux_screen

sys_ux_screen_type

 

If you want to know more details, let me know. Perhaps it could have been done in some automated way, I was doing it one by one to be sure that I have not missed any of the sections. You can also move the variant between pages directly as the legacy page will be deactivated afterwards but I decided to duplicate and move it instead.

 

Moving the variants worked good, some of them just missed the icon and changed the order.

 

To change the icons and/or order of the variants you can update it in [sys_ux_app_route] table, you might need to add the columns to the list vew.

GlideFather_13-1782143601066.png

 

---
Where the rules are real, you'll find me

View solution in original post

2 REPLIES 2

GlideFather
Tera Patron

It is quite a lot of manual copy pasting of sys IDs but I managed to move the variants as needed.

 

First of all, I want to explain the difference between the deprecated and the new page.

You can locate the sections in the UI Builder > CSM Experience > CSM Default record (eventuall Default record) > right > Tab sidebar Legacy or Contextual sidebar

 

GlideFather_0-1782142666153.png 

 

The difference between the 2 in backend:

GlideFather_1-1782142770400.png

 

Difference between the new variant and page collections, the legacy page goes with "viewport"

GlideFather_2-1782142835356.png

 

The CSM default record page was read-only so I created a duplicate of that page called "CSM default record page [new]", navigated to the path in the UI Builder editor mode and created the Viewports clicking the button below:

GlideFather_3-1782142885185.png

 

It converts the existing variants.

 

Then to move the variants from legacy/deprecated page, go to that page, settings mode and not editor:

GlideFather_4-1782142993376.png

 

Create a duplicate in the legacy page:

GlideFather_5-1782143009418.png

GlideFather_6-1782143015693.png

 

Go to the [sys_ux_screen] and locate that record to update its Parent macrocomponent and Screen Collection

 

https://yourinstance.service-now.com/sys_ux_screen_list.do

 

GlideFather_7-1782143025661.png

 

  • Parent macro is the newly created CSM page >>> CSM default record page [new], that can be easily identified by its name.
  • Screen collection is difficult to find as it holds the same name, so it is better to change it by sys_id.

 

To get sys ID of "Virtual agent" screen collection, locate that record in the UIB Settings, click the triple dots on the right (you might need to hover over, not always visible), select View settings:

GlideFather_8-1782143168679.png

 

Open records > Variant collection

GlideFather_9-1782143207112.png

New page is opened and it is a record that its sys ID you will be copying to the screen collection:

GlideFather_10-1782143241147.png

GlideFather_11-1782143247997.png

 

And after that, it is moved as needed:

GlideFather_12-1782143260201.png

 

sys_ux_screen

sys_ux_screen_type

 

If you want to know more details, let me know. Perhaps it could have been done in some automated way, I was doing it one by one to be sure that I have not missed any of the sections. You can also move the variant between pages directly as the legacy page will be deactivated afterwards but I decided to duplicate and move it instead.

 

Moving the variants worked good, some of them just missed the icon and changed the order.

 

To change the icons and/or order of the variants you can update it in [sys_ux_app_route] table, you might need to add the columns to the list vew.

GlideFather_13-1782143601066.png

 

---
Where the rules are real, you'll find me