Set up a project
...
Using the Purple Experience Bu...
Editing dynamic resources
8 min
the purple experience builder is crafted for configuring the behavior and design of apps and websites to achieve that, you will define views and use various components and data sources to build the behavior you want to have for styling, you will use scss, and for custom functionality, pxp offers multiple ways to integrate and use custom built scripts from different sources to ensure data security and to not be dependent on third parties, we recommend only sideloading any data when it's inevitable note that any resources being sideloaded will not be available in offline cases layout and main functionality the builder consists of three main panes a file explorer to the left, the editing window in the center, and the preview pane to the right an app bar at the top shows the currently selected app's name, holds a burger menu, and allows you to switch preview functionality the file explorer pane may be collapsed to the left the search provided here is only scoped for the current folder it will neither look for all dynamic resources nor search recursively in folders below for details on the folder structure, see docid\ okscitbqbkoqv 8jeow 5 while no editor is opened, the main editing pane provides configurable quick links to allow fast access to any files frequently used the right hand side preview pane may be collapsed to the right it provides some action buttons too, from left to right open the classic preview in a new browser window this simulates an android device and only provides a rule of thumb review we are aiming to deprecate it review the schema currently used in the set pxp version a toggle to switch the editing mode in the main window you may either use our json editor with some interface or directly edit the json files a button to toggle the legacy preview its main area provides links to preview your uncommitted changes on default domains or custom domains if configured (image depicts default domain only ) using the tabs, you may navigate to retrieve qr codes for previewing the changes in app see docid\ kei5umkhuo3w07psoxdqu for details a bottom pane provides insights on the pipelines configured on this builder instance you may retrieve any error messages or manually run them from here, too see docid\ eiuuvj e1ci9x9ddw2zd for further information editing pxp builder provides a json editor utilizing the available schema of the set pxp version while using the editor, some erroneous configurations are prevented, as the schema gets validated you may switch to a text editing mode to use search and replace functionality editing views for details on the creation of views, see docid\ kxmx0xdffeldjq7z4lqlx the editor typically structures configurations in components of different types to create structures that may be maintained easily, one may use the section component depending on the component, a corresponding data source may be set up data sources can also be scoped for the view and accessed through the context this allows a efficient retrieval of data on a per view basis components usually are configured with a class to ensure proper styling and are equipped with content, that will displayed this can also be additional sections also, the dropdown menu on the top right allows the setup of further attributes and settings per component the eptions available may vary, depending on the chosen component you may also retrieve and edit the json of a component directly from this view, for this, you can utilize the pen icon at the component level the editing of data sources utilizes the same procedures you may add filters here, too, to get exactly the content you need editing js the builder provides a editor interface for crafting scripts to create custom functionality we utilize the monaco editor for this purpose merging or pushing changes after you have reviewed your changes on the preview, you can merge or push them they will then appear in preview apps and websites utilizing the preview=true query parameter merge when you merge your changes, any file that you have changed will be completely overwritten merging does not remove any files, so if you want to delete something, you need to push push when pushing, all files are completely overwritten also, deletions are respected to merge your changes, navigate to the top right burger menu click on 'update dynamic resources' in the text field, name your changes, e g 'changed logo 23 08 23' 10\ click on 'merge all files to preview' after the merging is done, you can open your preview app on your mobile device to verify your changes on the device we recommend to always do a quick check on a real device finally, you can now deploy your changes to the production environment