Azure AD B2C Custom Policy – Page Layout upgrade

Introduction:

This document will help you to understand how to update the Page layout version in Azure B2C Custom policy. Page layout versioning is always important to make sure you’re getting all latest features and bug fixes on Azure B2C user flows.

Updating Page Layout:

Whenever you download the Azure B2C custom policy starter pack it will come with the base version of the page layout.

For a demo I’m going to use the same extension file which was used in my last article about Azure AD B2C custom policy to customize the UI template.

It’s highly recommended to upgrade the page layout whenever these is a stable release from the Microsoft Azure. Learn more about page layout versioning here.

Look below sign-up page layout image from the base page layout version.

From the above image you can observe there is no asterisk (*) for the required fields in the sign-up page. We can overcome this issue by upgrading the page layout to latest stable version.

To upgrade the page layout, we just need to update the version number of the page datauri

example <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.26</DataUri>

As of 11 Dec 2023 The recent release of selfasserted pages -2.1.26(urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.26)

Unified SSP pages – 2.1.14 (urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.14)

Providerselection – 1.2.4(urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.4)

Globalexception pages – 1.2.5 (urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.5)  

Complete code

	  <ContentDefinitions>



		  <!-- This content definition is to render an error page that displays unhandled errors. -->

		  <ContentDefinition Id="api.error">

			  <LoadUri>~/tenant/default/exception.cshtml</LoadUri>

			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>

			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.5</DataUri>

			  <Metadata>

				  <Item Key="DisplayName">Error page</Item>

			  </Metadata>

		  </ContentDefinition>



		  <ContentDefinition Id="api.idpselections">

			  <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>

			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>

			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.4</DataUri>

			  <Metadata>

				  <Item Key="DisplayName">Idp selection page</Item>

				  <Item Key="language.intro">Sign in</Item>

			  </Metadata>

		  </ContentDefinition>



		  <ContentDefinition Id="api.idpselections.signup">

			  <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>

			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>

			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.4</DataUri>

			  <Metadata>

				  <Item Key="DisplayName">Idp selection page</Item>

				  <Item Key="language.intro">Sign up</Item>

			  </Metadata>

		  </ContentDefinition>



		  <ContentDefinition Id="api.signuporsignin">

			  <LoadUri>~/tenant/default/unified.cshtml</LoadUri>

			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>

			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.14</DataUri>

			  <Metadata>

				  <Item Key="DisplayName">Signin and Signup</Item>

			  </Metadata>

		  </ContentDefinition>



		  <ContentDefinition Id="api.selfasserted">

			  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>

			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>

			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.26</DataUri>

			  <Metadata>

				  <Item Key="DisplayName">Collect information from user page</Item>

			  </Metadata>

		  </ContentDefinition>



		  <ContentDefinition Id="api.selfasserted.profileupdate">

			  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>

			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>

			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.26</DataUri>

			  <Metadata>

				  <Item Key="DisplayName">Collect information from user page</Item>

			  </Metadata>

		  </ContentDefinition>



		  <ContentDefinition Id="api.localaccountsignup">

			  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>

			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>

			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.26</DataUri>

			  <Metadata>

				  <Item Key="DisplayName">Local account sign up page</Item>

			  </Metadata>

		  </ContentDefinition>



		  <ContentDefinition Id="api.localaccountpasswordreset">

			  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>

			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>

			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.26</DataUri>

			  <Metadata>

				  <Item Key="DisplayName">Local account change password page</Item>

			  </Metadata>

		  </ContentDefinition>



		  <ContentDefinition Id="api.localaccountsignin">

			  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>

			  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>

			  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.26</DataUri>

			  <Metadata>

				  <Item Key="DisplayName">Collect information from user page</Item>

			  </Metadata>

		  </ContentDefinition>



	  </ContentDefinitions>

Sign up page with asterik(*) for the required field.

Summary:

We have seen how to upgrade the page layout version for the user flow pages with Azure AD custom policy and we also seen the importance of upgrading the page layout whenever there is a stable release.

Download code