\n `;\n screenDropDownHtml.addEventListener('change', (event) => {\n let newlySelectedScreen = selectedModule['screens'].find((screen) => { return screen.id === Number(event.target.value)});\n selectedScreen = newlySelectedScreen;\n })\n\n // Build Swap Screen button\n const changeEditorComponentsButton = document.createElement('span');\n changeEditorComponentsButton.id = 'change-components';\n changeEditorComponentsButton.innerHTML = `\n \n `;\n changeEditorComponentsButton.addEventListener('click', (event) => {\n changeComponentsForSelectedScreen(editor);\n })\n\n // Build Loading Icon\n const loadingEditorComponentsSpinner = document.createElement('span');\n loadingEditorComponentsSpinner.innerHTML = `\n \n `;\n\n //Create helper text element\n const helperTextEl = document.createElement('span');\n helperTextEl.id = 'helper-text';\n helperTextEl.style.marginRight = '150px';\n helperTextEl.innerHTML = 'Select a screen to edit, and click the Change Screen button ().';\n\n // Add the elements created above to the commands panel\n let cmdButtonDiv = document.querySelector('.gjs-pn-commands .gjs-pn-buttons');\n if(cmdButtonDiv){\n cmdButtonDiv.prepend(changeEditorComponentsButton);\n cmdButtonDiv.prepend(loadingEditorComponentsSpinner);\n cmdButtonDiv.prepend(screenDropDownHtml);\n cmdButtonDiv.prepend(moduleDropDownHtml);\n cmdButtonDiv.append(helperTextEl);\n moduleScreenSelector = moduleDropDownHtml;\n }\n }\n // END Add Module and Screen Selector Dropdowns\n\n }\n\n /**\n * Changes the screen options in the Screen Selector Dropdown when a Module is changed in the Module Selector Dropdown.\n *\n * This function is only used when building the Module and Screen Selector Dropdown\n *\n * @param module\n */\n const changeScreenOptions = (module) => {\n let selectEl = document.getElementById('selected-screen-options');\n let screenDropdownOptions = ``;\n module.screens.map((module) => {\n screenDropdownOptions+= `\n \n `;\n })\n selectEl.innerHTML = screenDropdownOptions;\n selectedScreen = module.screens[0];\n }\n\n /**\n * Changes components of the editor after the 'Change screen' button is pressed.\n *\n * @param editor\n */\n const changeComponentsForSelectedScreen = (editor) => {\n\n // Hide swap button and show spinner\n let spinner = document.getElementById('loading-components-spinner');\n spinner.classList.remove('d-none');\n let screenChanger = document.getElementById('screen-changer');\n screenChanger.classList.add('d-none');\n\n // Use the selected screen id to get the components from the server\n getData(\n '/data/screen/'+selectedScreen.id,\n powerforce.authToken,\n ).then(response => {\n\n // Show swap button and hide spinner\n spinner.classList.add('d-none');\n screenChanger.classList.remove('d-none');\n\n if(response.status > 400){\n alert('Something went wrong. Please select a different page to edit, or try refreshing the web page.');\n }else{\n // Change currentEditScreen, helper text, and editor components\n currentEditScreen = response.screen;\n document.getElementById('helper-text').innerText = 'Editing ' + response.screen.title + ' (Module: '+ response.module.title + ')';\n editor.setComponents(response.components);\n\n let sideNavContainer = document.getElementById('menu-appearance-settings');\n if(sideNavContainer){\n sideNavContainer.remove()\n }\n document.getElementsByClassName('gjs-pn-btn fa fa-cog')[0].click();\n\n //Remove and add back the Edit Side Nav panel\n const panelManager = editor.Panels;\n panelManager.removeButton('views', 'editScreenSettings');\n let panelOptions = editSideNavItemsButtonOptions();\n let newPanel = panelManager.addButton('views', panelOptions);\n }\n\n\n\n })\n }\n\n return <>\n