5

We are trying to include Sitecore Forms in our React Application using JSS. We're able to include regular forms, but when trying to use custom form elements using the design of the customer, we get an error: No renderer for form element type

The custom form elements have been implemented without JSS in mind, by another team. I believe the current implementation depends on MVC-Forms. We're trying to understand:

  1. Are custom Form Elements even supported by JSS (we're using Sitecore 10.2)?
  2. What needs to be done to make them work? Do we need to re-implement them for use with JSS?
  3. Are there any tutorials or documentation for this particular use case?
2
  • Did you check this link: doc.sitecore.com/xp/en/developers/hd/190/… Commented May 13, 2022 at 11:33
  • Hey @SumitUpadhyay, thanks for the hint, yes, that's the documentation we followed to get regular forms working in the first place. However, there is nothing in these docs (that I could find) about custom form elements.
    – Immo
    Commented May 13, 2022 at 11:56

1 Answer 1

3

After talking to Sitecore support, we figured out. Posting here in case someone has the same problem.

  1. Yes, they are supported.
  2. The html-templating has to be reimplemented. Custom form elements have a "razor view" .cshtml file that defines how they are rendered. This essentially has to be "translated" into JSX (in our case where we're using react), or whatever HTML templating your frontend framework uses. Sitecore will not return any HTML structure, only configuration, so the .cshtml file can't be reused for the JSS approach. To associate your form element with your JSX, you use a defaultFieldFactory. It looks something like this:
import {
  Form,
  createDefaultFieldFactory,
} from "@sitecore-jss/sitecore-jss-react-forms";
import React from "react";

const myCustomFormFactory = createDefaultFieldFactory();
defaultFieldFactory.setComponent(
  "<Your-Custom-Form-Component-ID-As-Per-Error-Message>",
  (props) => {
    return (
     // The following reproduces whatever code was in your .cshtml
     <div>
      <label className={props.field.model.cssClass}>{props.field.name</label>
      <input className={props.field.model.cssClass}>{props.value}</input>
     </div>
    );
  }
);

export const SitecoreForm = (props: Props) => (
    <Form
      form={props.fields}
      sitecoreApiHost={<API_HOST>}
      sitecoreApiKey={<API_KEY>}
      fieldFactory={myCustomFormFactory}
    />
  );

  1. This documentation is somewhat helpful: https://github.com/Sitecore/jss/blob/release/19.0.0/docs/data/routes/docs/techniques/forms/en.md

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.