Trying to introduce additional custom registration fields

[sukanya]

I am currently working on the Open edX platform to build a Learning Management System. We are trying to introduce additional custom registration fields—such as phone number, education, and occupation—which are not available in the default registration form.

To achieve this, we created a plugin named custom-registration-field. The necessary files, including init.py and setup.py, were created and configured properly. We also added these custom fields in tutor-config.yml.

Additionally, we enabled Micro Frontend (MFE) and tried to integrate two fields directly through the RegistrationPage.jsx file in the MFE app. After making the changes, we ran the necessary build commands to reflect the updates on the platform.

However, the new registration fields are still not appearing on the registration page. We would like to understand:

What key steps or configurations might we be missing?

Are there any additional settings or commands required to ensure these fields are displayed correctly?

Is there a specific way these changes should be synchronized with MFE or the backend?

Any guidance on troubleshooting this issue and confirming whether we’ve correctly followed all necessary steps would be greatly appreciated.

[sarina (Sarina Canelake)]

Hi @sukanya and welcome to the community!

Could you please detail:

• The version of Tutor you’re running
• What the “necessary build commands” you ran?
• If possible, share your configuration.

[abylaikhan.suev.02 (Abylaikhan)]

Hi @sukanya
In my case, I installed the tutor-contrib-enable-feature-flag( pomegranited/tutor-contrib-enable-feature-flag: Demonstrates how to add a feature flag to Tutor) plugin
and added the following lines to the plugin.py file:

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-lms-production-settings",
        """
ENABLE_DYNAMIC_REGISTRATION_FIELDS = "true"

MFE_CONFIG["ENABLE_DYNAMIC_REGISTRATION_FIELDS"] = "true"

REGISTRATION_EXTRA_FIELDS["gender"] = "required"

REGISTRATION_EXTRA_FIELDS["year_of_birth"] = "required"

REGISTRATION_EXTRA_FIELDS["city"] = "required"

REGISTRATION_EXTRA_FIELDS["state"] = "required"

REGISTRATION_EXTRA_FIELDS["country"] = "required"

REGISTRATION_EXTRA_FIELDS["level_of_education"] = "required"
        """
    )
)

Next, you need to rebuild tutor-mfe using the following command:
tutor images build mfe --no-cache

[sukanya]

Hey hi please go through this document attached here .
Detailed steps :
Custom Registration Fields in Open edX (Tutor Plugin Documentation)
Plugin Structure
Location: ~/.local/share/tutor-plugins/custom-registration-fields

custom_registration_fields/
├── init.py
├── plugin.py
├── overrides/
├── templates/
setup.py
tutor_custom_registration_fields.egg-info/

setup.py
Defines the plugin’s entry point for Tutor.

from setuptools import setup

setup(
name=“tutor-custom-registration-fields”,
version=“0.1”,
packages=[“custom_registration_fields”],
include_package_data=True,
entry_points={
“tutor.plugin.v1”: [
“custom-registration-fields = custom_registration_fields.plugin”
]
},
classifiers=[
“Programming Language :: Python :: 3”,
“Framework :: Tutor”,
],
)

plugin.py
Adds extra fields to LMS and CMS environments.

from tutor import hooks

LMS patch

hooks.Filters.ENV_PATCHES.add_item((
“lms-env”,
“”"
REGISTRATION_EXTRA_FIELDS:
phone_number:
default: “”
label: “Phone Number”
required: true
skills:
default: “”
label: “Skills”
required: false
“”"
))

CMS patch

hooks.Filters.ENV_PATCHES.add_item((
“cms-env”,
“”"
REGISTRATION_EXTRA_FIELDS:
phone_number:
default: “”
label: “Phone Number”
required: true
skills:
default: “”
label: “Skills”
required: false
“”"
))

init.py
Defines default field config and environment template variables.

from tutor import hooks

def config_defaults():
return {
“CUSTOM_REGISTRATION_FIELDS”: [
{“name”: “phone_number”, “label”: “Phone Number”, “required”: True},
{“name”: “skills”, “label”: “Skills”, “required”: False},
]
}

hooks.Filters.CONFIG_DEFAULTS.add(config_defaults)

def env_template_vars():
return {
“CUSTOM_REGISTRATION_FIELDS”: [
{“name”: “phone_number”, “label”: “Phone Number”, “required”: True},
{“name”: “skills”, “label”: “Skills”, “required”: False},
]
}

hooks.Filters.ENV_TEMPLATE_VARIABLES.add(env_template_vars)

Frontend Code: RegistrationPage.jsx
Located at: /frontend-app-authn/src/register
Added two form fields (Phone Number and Skills) with validation using React/Paragon.

azureuser@RP2lmsVM:~/.local/share/tutor-plugins/custom-registration-fields$ ls
custom_registration_fields setup.py tutor_custom_registration_fields.egg-info

nano RegistrationPages.jsx

=========================================================================================================

Main steps which i followed

1. tutor local restart
2. npm install
3. npm run build
4. tutor build image openedx
5. tutor config save
6. pip install -e .
7. tutor plugins list
   azureuser@RP2lmsVM:~/.local/share/tutor-plugins$ tutor plugins list

NAME STATUS VERSION
android installed 18.0.0
cairn installed 18.0.0
credentials installed 18.0.0
custom-registration-fields enabled 0.1
discovery installed 18.0.0
ecommerce installed 18.0.0
forum enabled 18.1.1
indigo enabled 18.2.2
jupyter installed 18.1.0
mfe enabled 18.0.2
minio installed 18.0.1
notes installed 18.0.0
webui installed 18.0.0
xqueue installed 18.0.0

8. tutor config save --set REGISTRATION_EXTRA_FIELDS=‘{“phone_number”: “required”, “skills”: “optional”}’
9. tutor images build mfe

Commands Executed

1. tutor local restart
2. npm install
3. npm run build
4. tutor build image openedx
5. tutor config save
6. pip install -e .
7. tutor plugins list
8. tutor config save --set REGISTRATION_EXTRA_FIELDS=‘{“phone_number”: “required”, “skills”: “optional”}’
9. tutor images build mfe

Verification
Run tutor plugins list and ensure the plugin is enabled:
custom-registration-fields enabled 0.1
Visit the registration page in MFE to confirm new fields appear.