Presets

presets are reusable component templates that you define once and reference across multiple views they work like a view in structure built from the same components and configuration but instead of being tied to a specific url path, they are standalone building blocks you can embed wherever you need them the main benefit is avoiding duplication if the same component structure appears in several views a teaser card, a menu entry, a content list you can extract it into a preset and reference it from each view instead of maintaining identical configurations in multiple places presets support props named placeholders that the referencing view fills with concrete values inside the preset, you reference a prop value with `$props {key}` this makes presets flexible one template can serve many contexts by receiving different values each time it is used presets replace the older embeddedviews feature and are available from pxp 4 0 / purple builder 0 18 as part of the split `views json` system create presets to use presets, you'll need to migrate to the split views json (see view configuration docid\ kxmx0xdffeldjq7z4lqlx ) preset files live in `default/storefront/assets/presets/` this folder is created automatically during migration inside the `presets` folder, create json files with descriptive names for example `teaser card json` or `menu entry json` there are no naming restrictions beyond using valid file names a preset file uses the same component and configuration structure as a view the key difference is the props definition you declare the keys that the referencing view is expected to provide to define a prop, add it to the props configuration of the preset root inside the preset, reference the value anywhere using `$props {key}` add a preset to a view once a preset file exists in the `presets` folder, the node type preset reference becomes available in the view editor to add a preset to a view open the view you want to edit add a preset reference node at the desired position in the component tree select the preset to use from the dropdown fill in the preset props attribute with the values the preset expects changes to a preset's structure can affect the schema of any view that references it review referencing views after editing a preset also note that excluding any of the files of the view structure through master/brand deployment can cause invalid configurations the preset is rendered inline at the position of the preset reference node no wrapper element is added, which keeps the dom lean you may review the final structure of the view in views json passing data with props props are the mechanism for making a preset context aware each prop is a key that the referencing view fills with a value either a static string or a dynamic data binding where syntax define a prop key in the preset add key to props object reference a prop value inside the preset $props {key} pass a value from the view set value in the preset props attribute of the preset reference node props currently support flat key value pairs passing complex nested objects as a single prop is not supported if you need to access deeply nested data, extract the required values individually using separate props or a helper function in custom server js conditional use presets do not support a condition setting at the reference level if you need to show or hide a preset based on a condition, either place the condition inside the preset on the top level component, or wrap the preset reference node in a conditional section in the view the second approach adds an extra wrapper element to the dom where possible, prefer moving the condition into the preset itself limitations limitation detail no recursion a preset cannot reference itself or another preset that references it multi level structures (e g nested menus) must be handled by creating separate presets for each level no conditionals at reference level conditions must be placed inside the preset or the preset reference node must be wrapped in a conditional section in the view flat props only $props object key does not resolve pass individual scalar values as separate props, or use a custom server js helper to extract deeply nested values before passing them faq can i use a preset inside another preset? no preset references inside presets are not supported if you need to compose reusable structures, build them as self contained presets and reference each one independently from the view what happens if a preset is excluded from a master or brand deployment? excluding preset files from a deployment can result in invalid configurations in the views that reference them make sure preset files are included in any deployment that also includes views that reference them do presets work on the web experience? yes, presets are part of the view configuration system and apply to both app and web experiences are presets the same as embeddedviews? presets are the replacement for embeddedviews, which are deprecated if your experience still uses embeddedviews, migrate to the split views json system and recreate those components as presets what is the future of presets? presets are an intermediate solution the upcoming component library feature will provide a more capable, composable alternative no new capabilities (recursion, reference level conditionals) are planned for presets before that transition