how do you rearrange the user attribute fields on the azure ad b2c user flow login dialog

Question

when using the azure ad b2c user flows experience created via the portal, how do you customize the layout of the fields the user fills out in the signup profile? i've looked here https://learn.microsoft.com/en-us/azure/active-directory-b2c/tutorial-customize-ui but i don't see an obvious answer

the issue is i'm collecting about 10 attributes during signup, and the default field layout is random and not lexicographically correct (the fields aren't in the right order for a standard form) - please advise

Answer 1

Hello @ataxlab canary · Welcome to QnA platform and thanks for your query.

In order to rearrange the user attributes, you would need to use your custom HTML and CSS file. Once you have your HTML and CSS ready, you can navigate to your User Flow, click on page layout and paste the URL of your HTML page as shown below:

You can refer to my HTML and CSS files:

• https://moviesdiag132.blob.core.windows.net/b2c/unified.html
• https://moviesdiag132.blob.core.windows.net/b2c/global.css

To see how the UI look, you can run the policy using this link and click on Sign up now link. I have arranged Given Name and Surname in the same row. Using your own CSS provides you with the flexibility to customize the page and rearrange any field as per your need.

-----------------------------------------------------------------------------------------------------------

Please "Accept the answer" if the information helped you. This will help us and others in the community as well.

Answer 2

A simpler way to to re-order the fields on the sign-up page for local accounts form you can:

1. open the sign-up user flow
2. select Page layouts
3. select the row Local account sign up page in the table
4. under user attributes you may drag and drop or use the Move Up or Move down to select the field order

Answer 3

thanks Amanpreet - i looked at the css and i can see selectors for a large set of fields. if true, is that the entire set?