Scrivito.ContentTag

Renders a CMS object’s attribute value and makes it editable.

Copy
<Scrivito.ContentTag tag="h1" content={page} attribute="title" />

Renders a CMS object’s attribute value to a DOM element. The content can be edited by a logged-in Scrivito user.

Props

  • attribute (String) – the name of the attribute to be rendered.
  • content (Obj, Widget) – the page or widget holding the attribute.
  • tag (String) (optional) – tag name of the DOM element. Default: div

Other props are rendered as HTML attributes of the resulting tag.

Props for widgetlist attributes

  • widgetProps (Object) (optional) – props to be passed individually to every widget contained in the widgetlist attribute. A property named widget will be ignored and cause an error to be logged. For further details, please see Passing additional props to widgets below.


Example: Basic usage

Copy
<h2>
  <Scrivito.ContentTag tag="cite" content={page} attribute="title" />
  by
  <Scrivito.ContentTag tag="span" content={page} attribute="author" />
</h2>

Example: Specifying a CSS class name

Copy
<Scrivito.ContentTag
  content={page}
  attribute="content"
  className="blog-content"
/>

Example: Making a date attribute editable using a placeholder

Copy
<Scrivito.ContentTag tag="span" content={page} attribute="datePosted">
  {formatDate(datePosted, "mm/dd/yyyy") || (
    <InPlaceEditingPlaceholder>Select a date</InPlaceEditingPlaceholder>
  )}
</Scrivito.ContentTag>

Passing additional props to widgets

Usually, a widgetlist attribute contains several widgets of different types, each based on an individual class with its set of attributes, rendered by an individual component. In general, widgets are independent of the container widget they live in (the widgetlist attribute) and vice versa. This reduces coupling, which is good.

However, sometimes there’s business logic requiring a container widget and the widgets it contains to be coupled more tightly, making it necessary to pass props from the container down to the widgets inside. If, for example, an EmployeeListWidget allowed to contain only instances of the EmployeeListItemWidget type acts as the data source of the latter widgets, it can communicate this piece of information to them via the widgetProps property. The props included in widgetProps are passed individually to the contained widgets, along with the widget prop provided by Scrivito. Here’s an example of how the “employee list” use case could be implemented:

Copy
Scrivito.provideWidgetClass("EmployeeListWidget", {
  attributes: {
    items: ["widgetlist", { only: "EmployeeItemWidget" }]
  }
});

Scrivito.provideComponent("EmployeeListWidget", ({ widget }) => (
  <Scrivito.ContentTag
    content={widget}
    attribute="items"
    widgetProps={{
      getData: employeeId => {
        // Return the employee data for the given ID
      }
    }}
  />
));
Copy
Scrivito.provideWidgetClass("EmployeeItemWidget", {
  onlyInside: "EmployeeListWidget",

  attributes: {
    employeeId: "string"
  }
});

Scrivito.provideComponent("EmployeeItemWidget", ({ widget, getData }) => {
  const data = getData(widget.get("employeeId"));

  return (
    <>
      <b>Full Name</b>: {data.fullName}
      <b>Job Title</b>: {data.jobTitle}
    </>
  );
});