I'm trying to replace a form input with one that is managed by React. It seems that Backdrop uses the input "name" attribute to target and pull the data to be saved into the database.
Drupal documentation says to use the passed in $element variable to build the field name, however I am unsure exactly which values are used to create the name.
So far it seems like
$element['#field_name'] . '[' . $element['#language'] .']['. {What goes here?} .']['.{value?}.']'
Hi @jsitter. I'm not exactly sure what you want to accomplish (change the value of a form input element in the DOM/browser with React/JS before it's submitted by the user?).
I think I can answer the second part of your question. A disclaimer: while I have a few years of experience with Drupal and now Backdrop, I don't claim to know all the nooks and crannies of Field API, so this info may be somewhat incomplete.
Yes, as you said, Backdrop and Drupal use the "name" attribute of the form input elements to pull and process the user's form submission. For SOME Field API fields, Backdrop generally uses the pattern you pointed out to create form input elements for Field API fields (but not always - it really depends on the field type. This pattern is typical of Field API text fields):
name="field_name[LANGCODE][DELTA][value]"
(The above would be the name attribute of the form input element). Often, LANGCODE is 'und', which means that the language has not explicitly been defined. DELTA is used to indicate the delta for multi-value fields (Field API fields can store a specific number of values, or can be defined as "unlimited", in which case a button "Add another" is shown in the form to add another input element). In those cases DELTA identifies the field's delta, for example [0] indicates that the form input element will be parsed as the first value of that multi-value field, etc. For fields that have only one value, the delta will always be 0. And 'value' indicates that the value submitted by the user will be stored as the value for that field in the database. If you look at the database, each Field API field has a specific table where its values are stored. For example, the values for text field called "field_text" will be stored in a table called "field_data_field_text", and the value submitted by the user will be stored in a column named "field_text_value". You'll also see other columns in that table, including delta and language.
If you are trying to modify the form on the server side, before it's sent to the browser, the best way to do it is to create a module that implements hook_form_alter. You then will have access to an array structure that you can modify as needed to change what's shown in the form. Typically people use this hook to modify the description of the field, to hide a field, to rearrange the orders in which the fields are shown, to change its default value, attaching js or css, etc.
I hope this helps!
EDIT: you can also use hook_field_attach_form, which allows you to modify the form array right after Field Attach API "attaches" the field to the form structure
Thanks for your illuminating reply argiepiano, it gives me a better understanding of how field names are created and stored. I had an idea as to how to implement a React app to create a different WYSIWYG editor than the built-in ckeditor while not requiring a totally new custom field like the paragraphs module. I've been able to create a field widget that can be applied to long text and text with summary fields that allows React to manage the user input but I needed to be sure that I was building the field name correctly because I hope to submit the module to backdrop-contrib if it turns out okay.
That's great, jsitter.
A couple of thoughts as you develop this. Form API provides a key called #value_callback where you can specify a callback function "that implements how user input is mapped to an element's #value property." This callback may come handy as you build your widget. You can either add it to the element through hook_form_alter, or other hooks like hook_field_widget_form or hook_field_widget_form_alter. Or this callback can also be specified as a default for a custom element that extends the long text field type in hook_field_element_info.
I'd suggest looking at the module https://backdropcms.org/project/examples for tons of examples, including how to create a custom field type, widget, etc. Also looking at how core implements those (e.g. link fields) or some contrib modules like https://backdropcms.org/project/hms_field
Hi @jsitter. I'm not exactly sure what you want to accomplish (change the value of a form input element in the DOM/browser with React/JS before it's submitted by the user?).
I think I can answer the second part of your question. A disclaimer: while I have a few years of experience with Drupal and now Backdrop, I don't claim to know all the nooks and crannies of Field API, so this info may be somewhat incomplete.
Yes, as you said, Backdrop and Drupal use the "name" attribute of the form input elements to pull and process the user's form submission. For SOME Field API fields, Backdrop generally uses the pattern you pointed out to create form input elements for Field API fields (but not always - it really depends on the field type. This pattern is typical of Field API text fields):
name="field_name[LANGCODE][DELTA][value]"
(The above would be the name attribute of the form input element). Often, LANGCODE is 'und', which means that the language has not explicitly been defined. DELTA is used to indicate the delta for multi-value fields (Field API fields can store a specific number of values, or can be defined as "unlimited", in which case a button "Add another" is shown in the form to add another input element). In those cases DELTA identifies the field's delta, for example [0] indicates that the form input element will be parsed as the first value of that multi-value field, etc. For fields that have only one value, the delta will always be 0. And 'value' indicates that the value submitted by the user will be stored as the value for that field in the database. If you look at the database, each Field API field has a specific table where its values are stored. For example, the values for text field called "field_text" will be stored in a table called "field_data_field_text", and the value submitted by the user will be stored in a column named "field_text_value". You'll also see other columns in that table, including delta and language.
If you are trying to modify the form on the server side, before it's sent to the browser, the best way to do it is to create a module that implements hook_form_alter. You then will have access to an array structure that you can modify as needed to change what's shown in the form. Typically people use this hook to modify the description of the field, to hide a field, to rearrange the orders in which the fields are shown, to change its default value, attaching js or css, etc.
I hope this helps!
EDIT: you can also use hook_field_attach_form, which allows you to modify the form array right after Field Attach API "attaches" the field to the form structure