Add new custom fields to account_settings page

hello there
how can I add new custom fields (added through custom_reg_form plugin) to account_settings page??
make them appear there to edit them as default fields like: full name, gender …).

2 Likes

Hi @111,
it’s possible to add extra fields to the account_settings page via the extended_profile_fields site configuration. To do this, you can do the following.

  1. Go to the Django admin → Site configurations to configure your site.
  2. Update your existing site configuration (or create one, if it doesn’t exist) with the following:
     "extended_profile_fields": [
         // Fields you'd like to include on that page.
         "first_name",
         "last_name",
         "mailing_address",
         "city",
         "state",
         "country",
         "ZIP/Postal Code"
     ],
    

If you’d like to make more changes to this page (e.g. hide existing fields), you might want to consider creating a theme, which will override the default account_settings_factory. Then you will need to add it below this line in your theme and override this line to import the custom factory from your theme.

3 Likes

please can you explain this point in more details.

@111, sure, but please let me know what exactly you would like to know, as numerous areas could be covered by the theming. Are you looking for a way to reorder fields, hide some sections, etc.?

ok, I have added new custom fields to the registration page by following:

the new fields are phone number, how to know us and others fields. everything work fine and I can access and edit these new fields from Django admin site, what I want to do is to allow students edit these new custom values through account_settings page like defaults values in registration page (as ex. full name). to do that I have create new theme to override the default account_settings_factory and then add it below this line in my theme and override this line to import the custom factory from my theme, but when I have copied the student_account folder and pasted it to my theme in (mytheme/lms/static/js/student_account) and compiled the platform account_settings page show nothing (white page). this is log:

Blockquotelms_1 lms_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] “GET /login?next=/account/settings HTTP/1.0” 200 63582 “http://localhost/dashboard” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] http://localhost “GET /static/indigo/js/i18n/ar/djangojs.cb65a2c7b785.js HTTP/1.1” 200 384022 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] http://localhost “GET /static/indigo/js/ie11_find_array.bd1c6dc7a133.js HTTP/1.1” 200 1685 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] http://localhost “GET /static/js/lms-base-application.2062f84b79fa.js HTTP/1.1” 200 13655 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] http://localhost “GET /static/bundles/commons.004f5b2a86f4b4464ea3.e18c22953351.js HTTP/1.1” 200 1881977 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] http://localhost “GET /static/js/lms-base-vendor.cb449c35a4fc.js HTTP/1.1” 200 324795 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] http://localhost “GET /static/indigo/lms/js/require-config.38226099c6ad.js HTTP/1.1” 200 9017 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] http://localhost “GET /static/indigo/js/student_account/logistration_factory.75b59f8d1a17.js?raw HTTP/1.1” 200 433 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] http://localhost “GET /static/js/vendor/noreferrer.aa62a3e70ffa.js HTTP/1.1” 200 1236 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] http://localhost “GET /static/indigo/js/utils/navigation.08930e16ab3d.js HTTP/1.1” 200 4438 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:09 +0000] http://localhost “GET /static/indigo/js/header/header.309a1243e175.js HTTP/1.1” 200 7848 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”
nginx_1 | 172.18.0.1 - - [03/May/2021:11:16:10 +0000] http://localhost “GET /static/indigo/images/logo.b866e99e5b18.png HTTP/1.1” 200 122010 “http://localhost/login?next=/account/settings” “Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0” “-”

@111, you don’t need to copy the whole student_account directory to your theme - it’s sufficient to add only student_account/views/account_settings_factory.js and put all necessary overrides there.

These JS errors won’t likely be visible in the LMS logs - you should see them in your browser’s console, though. Also, please provide specific parts of code that have been overridden - they’re invaluable for getting the context about your changes.

Hi, how can I find extended_profile_fields in existing site configuration

@luan.tm, if you don’t have extended_profile_fields in your existing site configuration, you should add it there. Please see my previous comment for detailed instructions.

If you want to see which fields are already displayed, you can find them under fields_already_showing.

Hi, thanks for your answer
I have a custom field select like this


I try your example custom, It’s worked but display as text not select

image

After that, can I add my custom field to another block same as extended_profile_fields or my define block

Hope you can answer this, many thanks

@luan.tm, you can specify the dropdown options by adding the following items to your SiteConfiguration:

{
    "extended_profile_fields": [
        "google_calendar"
    ],
    "EXTRA_FIELD_OPTIONS": {
        "google_calendar": [
            "Accept",
            "Never"
        ]
    }
}

After a user updates this field, this information will be available in the UserProfile → Meta (you can see it on the Django admin page /admin/auth/user/).

Side note: the user will see the options just like provided in the EXTRA_FIELD_OPTIONS, but the result (in the UserProfile) will be in lowercase (i.e., “accept” or “never”).

Many thanks for your answer , how about add a button and handle event in that button in account settings

It is possible but may need more changes. Given that this page should be removed in the Olive release, it would be a throwaway effort.

Do you have any project or example to describe this for override account_settings_factory.js file

Unfortunately EXTRA_FIELD_OPTIONS is not show verbose_name and help_text in account_settings , so I have to custom in account_settings_factory.js