How to create additional fields programmatically in user account and displaying same in user registration page – Drupal 9 and Drupal 10

Here we are creating a new field in account settings while installing a custom module, also after installation of module,  usually field parked as hidden field in manage form display. So here we are discussing how to make that field visible in user form programmatically.

1. Create new field in user account
2. Export newly created configurations
3. Programmatically arrange fields in manage form display
4. Removing added fields while uninstalling module.

We are having a custom module –  dn_account

1- Create new field in user account

In our development environment, we are going to create  a new first name field. 

Got to Configuration -> Account settings   click on manage fields.

Here I have added first name field as below.

2- Export newly created configurations

Here we are going to export configurations of this newly created fields.

Got to  Configuration ->configuration synchronization  under development 

Select Export  and click on single item

Path – /admin/config/development/configuration/single/export

We have to export field and  then field storage. Select below options,

Configuration type is Field and configuration name is the field what we  created in account settings. This will load the configuration as below.

You can see above file name, create a file with same file name and copy the content of the field configuration there. Save the file in module path – -/config/install/field.field.user.user.field_first_name.yml

Next select field storage and select user.field_first_name

Get the file name and copy above content and save in path config/install as below

/config/install/field.storage.user.field_first_name.yml

3- Programmatically arrange fields in manage form display

With above steps if you install module, you can see the newly created first name field in Configuration -> Account settings ->manage fields. Problem here is, the newly created field will be under the hidden section in Manage display.

So here we have to make this field available to users. For this purpose  we have to create install hook, create the file  dn_account.install file in root of your module path.

Add below code in dn_account.install 

function dn_account_install(){


// Rebuild user entity form display for mobile number field.
$storage = \Drupal::entityTypeManager()->getStorage('entity_form_display');
/** @var \Drupal\Core\Entity\Display\EntityFormDisplayInterface $user_form_display */
$user_form_display = $storage->load('user.user.default');
if (!$user_form_display) {
$user_form_display = $storage->create([
'targetEntityType' => 'user',
'bundle' => 'user',
'mode' => 'default',
'status' => TRUE,
]);
}
$user_form_display
->setComponent('field_first_name', [
'type' => 'string_textfield',
'weight' => 4,
'settings' => ['display_label' => TRUE],
'hidden' => FALSE,
])
->save();


}

As shown above we are loading the form display of user object. In setComponent we are setting hidden as

FALSE. This will move first name field  from hidden section.

During installation of module this install hook will execute after executing configurations in path config/install

So you can move any configurations of entities using this configuration and synchronisation feature.

4 – Removing added fields while uninstalling module

So how we will remove fields added by this module if we are uninstalling this module?

this can be achieved by adding below lines in your both field and field storage configuration.

enforced:

module:

– dn_account

so our field configuration will look like below, you have to add same enforced block in filed storage configuration also.

uuid parameter and value we can remove from configuration file.

uuid: baddda0c-6953-403d-9052-eccb621f1a04
langcode: en
status: true
dependencies:
  module:
    - user
  enforced:
    module:
    - dn_account
id: user.field_first_name
field_name: field_first_name
entity_type: user
type: string
settings:
  max_length: 255
  case_sensitive: false
  is_ascii: false
module: core
locked: false
cardinality: 1
translatable: true
indexes: {  }
persist_with_no_fields: false
custom_storage: false

download the sample dn_account sample module here

Remove field you created manually before installing above sample module.