0

We have created a custom field for Sitecore Forms using JSS react. In the JSS file, we are using CustomFormFactory to render the input on the front-end side -

const myCustomFormFactory = createDefaultFieldFactory();    
myCustomFormFactory.setComponent('{287FA40A-C552-4B51-A59F-3EC0CE4906DB}', (props) => {
//Some other code
return (
<fieldset ref={formFieldRef}>
  <label for={`${props.field.valueField.id}`} class=""></label>
  <textarea id={`${props.field.valueField.id}`} name={`${props.field.valueField.name}`}/>
</fieldset>
 );
});

The above code is working fine and showing the correct DOM on the FED side - enter image description here

enter image description here

But when we are clicking on submit button after adding some text value in the custom field it is not adding this value in our payload of Post Method and BED side we are not able to see the value for the custom field and because of this validation always fails. so in the payload of the post method, we can see the field but its value is empty -

enter image description here

Did anyone create a custom field with Sitecore JSS using react?

Sitecore version - Sitecore.NET 10.3.0 (rev. 008463)

No error on logs and console.

4
  • Is there a Sitecore item associated with this field? If so, can we get some info about it? What does {287FA40A-C552-4B51-A59F-3EC0CE4906DB} refer to? Commented Mar 2, 2023 at 15:46
  • {287FA40A-C552-4B51-A59F-3EC0CE4906DB} is the custom field id, which we have created under /sitecore/system/Settings/Forms/Field Types node. Commented Mar 2, 2023 at 15:55
  • What template is it based on? Commented Mar 2, 2023 at 16:22
  • based on - /sitecore/templates/System/Forms/Field Type Commented Mar 2, 2023 at 18:17

1 Answer 1

1

JSS forms use form state to send data back to the server. This data is not updated automatically from all fields on your form.

In order to update the form state, you need to add onChange handler to your custom field implementation. For example, you can look at any field template.

# Callback for when the value of the form field changes. Will cause the parent form state and value prop to be updated.
onChange={(e) => handleOnChange(field, e.target.value, onChange)}

Your code should look like:

import { handleOnChange } from './helpers/commonChangeHandler';

const myCustomFormFactory = createDefaultFieldFactory();    
myCustomFormFactory.setComponent('{287FA40A-C552-4B51-A59F-3EC0CE4906DB}', (props) => {
//Some other code
return (
<fieldset ref={formFieldRef}>
  <label for={`${props.field.valueField.id}`} class=""></label>
  <textarea id={`${props.field.valueField.id}`} name={`${props.field.valueField.name}`} onChange={(e) => handleOnChange(props.field, e.target.value, props.onChange)}/>
</fieldset>
 );
});
3
  • What is custom field is hidden type and we are setting value programmatically, will it work? I tried it but it is only sending value if we manually add or update the value. thanks Commented Mar 2, 2023 at 17:04
  • I have added an example, of how your code should look like. It is saved on the form component state level. (sorry if my v1 answer makes you think about hidden fields). I think you should be able to debug it using React Developer Tools.
    – Anton
    Commented Mar 2, 2023 at 17:15
  • Thank you, I will give it a try and will update you here. Commented Mar 2, 2023 at 18:18

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.