Wrapping code in a component
You can build a component using code and other components, such as:
- Another low code component.
- An external BYOC component (web or React component).
- A piece of HTML and/or JavaScript code.
- A Form component created in Forms.
You can also use registered external components and low code components directly in the canvas of Page builder. However, there are benefits to first wrapping a component in another low code component in the Component builder. It lets you:
- Build UI around the code component, for example, to add text, copy, and images around an existing component.
- Create responsive versions of the code component.
- Control the styling of the component from the Component builder.
Theme of the Sitecore component cascades down to override the styling of the external components that are being embedded, such as React and web components. This concerns paragraphs, links, headers, and buttons styling.
Use SXA Forms alongside BYOC Forms
You can wrap and use Form components created in Forms alongside Bring Your Own Component (BYOC) components.
When an SXA Form component is present in the front-end code, SXA Forms are used as the default form implementation. Existing BYOC Forms on the canvas continue to render, but new BYOC Forms cannot be added to the canvas.
There is no automatic migration path from BYOC Forms to SXA Forms. If you want to use SXA Forms instead of existing BYOC Forms, you must recreate or migrate the forms manually.
Existing BYOC Forms continue to function after SXA Forms are enabled unless they are manually replaced.