Configuring User Settings

User settings are global user attributes which the end user has access to edit. These settings are stored with the user in Auth0 and they are available as dynamic attributes for use within queries.

In order to configure user settings:

  1. Add user_settings and user_settings_src configurations to appconfig.json.
  2. Place the UI for user settings on a pre-defined user settings page in the /pages folder.

Adding user_settings and user_settings_src to appconfig.json

User settings can be configured in the appconfig.json file at the root of your Git repository. You will need to modify this file with following to add user settings:

"user_settings": [
        {
            "label": "Custom Attribute",
            "id" : "custom_attr",
            "input_type": "text",
            "max_length" : 10,
            "default_value" : "defaul_attr_123",
            "validation_regex" : "^[a-zA-Z ]*$",
            "validation_error_message" : "Invalid attribute"
        }
    ],
"user_settings_src" : "user-setting.html"

user_settings:

Option Req’d Example Description
label N “Custom Attribute” Name of your attribute displayed to the user.
id Y "custom_attr" The ID of the attribute which will be the field name made available within queries.
input_type Y "text" Text is currently the only supported input type.
max_length N "10" The maximum length of the attribute.
default_value N "defaul_attr_123" The default value of the attribute.
validation_regex N "^[a-zA-Z ]*$" A regex to validate the user’s entry.
validation_error_message N "Invalid attribute" An error message to display if validation fails.

user_settings_src:

Option Req’d Example Description
user_settings_src Y “user-setting.html” The file where user settings will live. This creates a setting page in your app.

Placing the UI for user settings on a user settings page

The app config above specifies a user-setting.html page which will add a settings page to the main part of the app. In this settings page (located in the pages folder), the following can be added to create the user controls for modifying the user attribute.

{% load widget_tweaks %}

<div class=usersettings>
	<h4>User Settings</h4>
        <br>
	<p><font color=red>{{ error_message }}</font><font color=green>{{ success_message }}</font></p>
	<div style="width:500px;">
	<form action="/settings" method="post">
	    {% csrf_token %}
	    <div class="position-relative form-group">
		{{ form.custom_attr.label_tag }}
	        <font color=red>{{ form.custom_attr.errors }}</font>
		{{ form.custom_attr|add_class:'form-control percentage_width' }}
	    </div>
            <br>
	    <input type="submit" value="Submit" formmethod="post" class="mt-2 btn btn-primary">
	</form>
	</div>
</div>