As mentioned in the Introduction to the Web Builder, content is rendered in the browser by React components. In this short guide, we are going to explain what such components should be like.
As mentioned in the Introduction to the Web Builder, content is rendered in the browser by React components. In this short guide, we are going to explain what such components should be like.
When rendering a content object or widget, the Web Builder SDK uses the component of the model class to which the object or widget belongs. For assigning a component to an object or widget class, Scrivito.provideComponent is available. For example, assuming that there is a HeadlineWidget class that has a title attribute, you can have the SDK render instances of this widget class by providing a suitable functional component:
The provided component is connected to the Web Builder, meaning that it automatically loads the required data from the Web Builder backend and automatically updates as new data becomes available.
There are components that are independent of a specific model class and thus cannot be assigned to any of them. Such components render layout elements like navigations or the search box but should be integrated with the Web Builder as well, so that their data is automatically loaded and updated. In order to achieve this, you can connect such a component to the Web Builder using Scrivito.connect:
Content object and widget data is loaded asynchronously from the Web Builder’s backend. Scrivito.connect frees you from having to handle pending data. It also ensures that a component is rerendered after the data has been loaded or changed.
However, when accessing content outside of rendering, for example inside an event handler like onClick, you require Scrivito.load: It allows you to work consistently with the data loaded in the background.
When writing a component for a model class (representing a page, resource, or widget type) use Scrivito.provideComponent and pass a functional component to it.
With components not intended for a model class, connect your component to the Web Builder using Scrivito.connect.