APIs - Enhancing component forms

In Props, we explored how Canvas automatically generates forms for each SDC based on prop settings like type, format, and $ref. If you need more control, you can customize these forms using the hook__form_component_instance_form_alter hook. This hook allows you to enhance the user experience in advanced use cases.

For example, you can:

• Organize your props by grouping them within <details> or <fieldset> elements, making complex forms easier to navigate.
• Add autocomplete functionality to string type props, as demonstrated in the canvas_test_autocomplete submodule.
• Implement conditional fields to show, hide, or prefill other props based on user input, which you can see in action in the canvas_test_state_api submodule.

The canvas_test_autocomplete test module provides a practical example of these capabilities.

function canvas_test_autocomplete_form_component_instance_form_alter(array &$form, FormStateInterface $form_state): void {
  $form['test_autocomplete'] = [
    '#type' => 'textfield',
    '#title' => 'Autocomplete Field',
    '#autocomplete_route_name' => 'some.autocomplete.results',
  ];
}