Custom fields

Custom fields are fields other than the default User profile fields. Typically, these fields contain user information specific to your business needs such as a loyalty card number. You can add these custom fields to ReachFive widgets in order to gather even more information regarding users.

You can create custom fields for the User Profile object as well as the Addresses object (which is part of the User Profile model).

Here, we show you how to create a custom field via the ReachFive Console, explain the different custom field data types, and show you how to implement the custom fields using the UI SDK and through Hosted pages.

Create custom fields

You can create custom fields from the ReachFive Console.

Prerequisites

  • You must have access to the ReachFive Console.

  • You must have a Developer, Manager, or Administrator role.

Instructions

  1. Go to Settings  Custom fields  Profile fields.

  2. Select + New field.

  3. Provide a name for the field.

  4. Give the field a key for the key:value pair.

  5. Specify the type for the key. The dropdown menu contains all possible types. See Custom field data types for examples.

  6. Add your desired scopes to the field.

    • Read-Write scopes allow you to both read and write the custom field value.

    • Read-only scopes only allow you to read the custom field value.
There is an implicit OR between Read-Write scopes. When multiple scopes are associated with a custom field, an access token having only one of the scopes is able to read and write the custom field value.

Add a translation

Use Add translation to localize custom fields.

Create custom address fields

You can create custom fields for addresses from the ReachFive Console.

Prerequisites

  • You must have access to the ReachFive Console.

  • You must have a Developer, Manager, or Administrator role.

Instructions

  1. Go to Settings  Custom fields  Address fields.

  2. Select + New field.

  3. Provide a name for the field.

  4. Give the field a key for the key:value pair.

  5. Specify the type for the key. The dropdown menu contains all possible types. See Custom field data types for examples.

  6. Add your desired scopes to the field.

    • Read-Write scopes allow you to both read and write the custom field value.

    • Read-only scopes only allow you to read the custom field value.
There is an implicit OR between Read-Write scopes. When multiple scopes are associated with a custom field, an access token having only one of the scopes is able to read and write the custom field value.

Add a translation

Use Add translation to localize custom fields.

Manage custom field schemas with API

You can manage profile custom field schemas via the Management API with the following operations:

Method Operation

POST

Create custom field schema

GET

Get custom field schema

PUT

Update custom field schema

DELETE

Delete custom field schema

Custom field data types

The table below shows examples of the data types used when creating custom fields.

Type Display

String

custom field string

Integer

custom field integer

Custom field integers with a decimal are truncated without rounding.

Example:

  • 60.0 becomes 60

  • 60.1 becomes 60

  • 60.9 becomes 60

Decimal

custom field decimal

Date

custom field date

Currently, only the YYYY-MM-DD format is accepted.

Select

custom field select

Checkbox

custom field checkbox

Tags

An array of strings (tags).

Tags are not currently supported in the SDK UI and hence not available in forms. 
[
    "web",
    "weekly"
]

Phone

custom field phone

At ReachFive, we use a dedicated library to validate a user’s phone number.

Since January 2022, all newly-created accounts where no country code is provided at creation have their default country code set to FR france (France).
For more details, check out Validating phone numbers.

Email

custom field email

Use custom fields

To implement the custom fields that you create from the ReachFive Console, you can use the UI SDK and add the custom fields as part of the showAuth method or you can configure Hosted pages to use custom fields.

UI SDK

The example below shows the implementation of the custom field loyalty_card_number.

See the showAuth page for more information. 
client.showAuth({
    container: 'auth-widget',
    auth: {
      redirectUri: 'https://example.com/auth-callback'
    },
    allowForgotPassword: false,
    initialScreen: 'login',
    signupFields: [
      'email',
      'password',
      'passwordConfirmation',
      'custom_fields.loyalty_card_number' // Ask customer to supply number
    ],
    socialProviders: ['facebook', 'google'],
    showLabels: true,
    theme: {
      primaryColor: "#00bf48",
      borderRadius: "5",
      socialButton: {
        inline: true,
      }
    }
})

Hosted Pages

The example below implements custom_fields as a value under the signupFields parameter, calling the loyalty_card_number custom field. This is the JSON format you would use in the JSON config for widget at Settings  Hosted Pages page on the ReachFive Console.

To call a specific custom field, use the format custom_fields.customField.

For more information, see how to configure the display of hosted pages.

 
{
  "showSocialLogins": true,
  "socialProviders": ["facebook", "google"],
  "theme" : {
    "primaryColor" : "#229955",
    "borderRadius" : "3",
    "socialButton" : {
      "inline" : true
    }
  },
  "initialScreen": "signup",
  "allowLogin": true,
  "allowForgotPassword": true,
  "allowSignup": true,
  "signupFields" : ["birthdate", "email", "password", "custom_fields.loyalty_card_number"]
}