Okta User Self-Registration Question Continued

Questions
1

This is a follow up question to an earlier post titled “Okta User Self-Registration Question”.

I was able to figure out how to populate a user attribute dropdown field by adding code to the “parseSchema” function of the Registration section of the OktaSignIn widget. I am now able to dynamically populate the field by making a REST/AJAX call to my backend server.

I have just one issue. I need to make the field wider to display more of the selection options. Is there
a way via the OKTA organization platform to configure the width of a particular User Registration attribute?

image
image408×622 42.9 KB

2

Registration form is part of the sign in widget. You can change style using CSS:

3

Hi eminor, How did you managed to display the select list using “parseSchema”, any documentation link or code snippet.

4

Hello Naresh,

Typically if you want to add a list for self service registration you would create a new attribute in your Okta user schema as a String attribute that enumerates allowed values and is read/write.

user_attr
user_attr1417×1476 48.9 KB

In the self service registration section in your Org add the attribute to the registration form.

ssr2
ssr21465×729 29.8 KB

This will make it show up in the registration form with all the drop down options. If you need to further modify the list for some reason, change language if the browser is set to another language then you could do that with parseSchema().

          'parseSchema': (schema, onSuccess, onFailure) => {
            var userLang = navigator.language || navigator.userLanguage;
            if (userLang === 'es') {
              schema.profileSchema.properties.country2.title = "país";
              schema.profileSchema.properties.country2.oneOf[0].title = "Seleccione uno";
              schema.profileSchema.properties.country2.oneOf[1].title = "NOS";
              schema.profileSchema.properties.country2.oneOf[2].title = "ES";
              schema.profileSchema.properties.country2.oneOf[3].title = "VIE";
            }
            onSuccess(schema);
          },

ssr3
ssr3768×1325 22.2 KB

2 Likes
5

Thank you Erik for the detailed explanation. Also is there an option to render a checkbox field in the widget. Below code renders a select list instead of checkbox.

parseSchema: function (schema, onSuccess) {
    schema.profileSchema.properties.age18Consent = {
      'type': 'boolean',
      'title': 'Im over the age of 18'
    };
},
6

Hi Erik, can I ask you about parseSchema() function? Is it added to configuration object? Can I use it with Okta hosted sign-in page? I’ve tried something like this but cannot get it working:
config.registration = {
    parseSchema: (schema, onSuccess) => {
      // handle parseSchema callback
      onSuccess(schema);
   }
};

Thank you in advance.

7

I’ve sorted it out- had an extra bracket in my javascript, and it works as a charm!)

8

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.