Migrating viewport sub-page to top-level page in UI BuilderSummary<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } This article describes how to migrate a viewport sub-page to a top-level page in UI Builder. The process involves analysing the existing sub-page configuration, evaluating the required app logic changes, updating platform records, and cleaning up legacy entries. Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } All release Instructions<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } CautionAlways create migration changes in an update set. STEP 1. Analyse the viewport subpage Navigate to the viewport subpage in UI Builder. 1. Open records using the hamburger menu (☰) on the left top & note down sys_id's; - Page Defn (sys_ux_macroponent) - Variant Collection (sys_ux_screen_type) - Open App Route (sys_ux_app_route) from Related Lists - Variant Record (sys_ux_screen) 2. Check the existing configuration of the sub-page 2a. Inherited Data resources: In Data Navigator, check for Data Resources > Inherited data resources If Present;- check if the subpage or any of its composition elements have event mappings against the inherited data resources- Switch to scripts to see if any of the scripts invoke an action against inherited data resources → Note down the data resources and the event mappings being triggered. 2b. Sub-page properties: In the content tree, click on Body & Check the properties pane (right pane > ⚙ Configure tab)- Check if we have any props bound to inherited parent client state → Note down the bindings. 2c. Dispatched events: In the content tree, click on Body & Check the Events pane (right pane > ⚡Events tab)Scroll down & find dispatched events If dispatched events are present;Find the event mapping(s)/script(s) that emit the dispatched events. → Note down the mappings. STEP 2: Strategy Check the change list we noted down in STEP 1. Evaluate the captured configuration. → Sub-page to Page Data Flow: Captured under 2a & 2c• As we won't have a parent page once migrated, we will need to update the app logic to handle the use cases these events were fulfilling. → Page to Sub-page Data Flow: Captured in 2b.• These props now need to be mapped either through route params or via data resources. If you are clear about the changes required. Proceed to STEP 3. STEP 3: Open the platform records captured in STEP 1 > 1; 1. App Route: 1a. Open the sys_ux_app_route record1b. Set the Parent Macroponent Composition Element ID field to empty1c. Set the Parent Macroponent field with the App Shell of the current experience 2. Screen Record 2a. Open sys_ux_screen record2b. Set the Parent Macroponent field with the App Shell of the current experience STEP 4: 1. Clear UIB and system cache.2. Open the experience → You should be able to see the sub-page as a top-level page now. STEP 5: • Rewrite the app logic and clean up the entries captured under 2a, 2c and 2b.• In the "previous" parent page, if there are no other subpages using the view, remove the viewport and VIEWPORT_LOAD_REQUESTED event mappings. Related Links<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } KB1224040 - Work Instruction | How to Migrate existing Record Pages to Standard Record Pageshttps://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1224040