Rajeev Pentyala – Technical Blog on Power Platform, Azure and AI

I have a following simple Power Pages site with a default Home page. Note that the same Home page renders for Authenticated User and Anonymous User.

How about displaying different Home page content for Authenticated User and Anonymous User? In this article, let’s explore how to do that.

Steps to show conditional Home page:

The approach we’ll take involves creating two new web pages that will serve as Home pages for Authenticated User and Anonymous User. Let’s proceed with this approach.

• I’ve created two new pages Home Anonymous and Home Authenticated.

• Next, we will be creating two site markers for Home Anonymous and Home Authenticated pages.
  • If you are not familiar with site marker, don’t worry. Its just a simple record we create in Portal Management.
  • A site marker is a named value that points to a page that is accessed in code in place of a hard-coded URL.
  • A site marker can be accessed in the code using the following Liquid object:
    • {{ sitemarkers["<<marker name>>"].url }}

Configure ‘site marker’:

Create two new site markers for Home Anonymous and Home Authenticated pages as shown below.

• Using the Portal Management app, select Site markers under the Website section.
• To create a new site marker, select New.
• Specify values for the fields provided:
  • Name: A label use to retrieve the appropriate web page. The name should be unique for the associated website.
  • Website: The associated website.
  • Page: The webpage that the site marker will reference.
• Select Save & Close.

• Once created, the site markers will be displayed as shown below.

Now that we’ve created the site markers, all we need to do is add a condition to load the appropriate site marker based on the user’s login status.

We need to edit the Home.en-US.webpage.copy.html file (i.e., Default Home page) and add the condition.

Add condition in default ‘Home’ page:

• From Power Pages Maker portal, select the default Home page and click on Edit code, which will open a VSCode web extension.

• Once the above step is completed, the Home.en-US.webpage.copy.html page will be loaded in the VSCode web extension, as shown below.

• As we need to add the conditional display, we will be writing a Liquid script.
• Replace the line <p>This is a default home page text</p> with the following liquid script:

      {% if user %}
        {{ sitemarkers["Authenticated Home Page"].adx_copy | liquid }}
      {% else %}
        {{ sitemarkers["Anonymous Home Page"].adx_copy | liquid }}
      {% endif %} 

• Save and Sync the changes.
• Preview the website, and you will see that either the Home Anonymous or Home Authenticated page content loads based on whether the user is anonymous or authenticated..

Explanation of liquid script:

Lets understand the liquid script we have used.

• {% if user %} : If true, denotes use has been logged in.
• {{ sitemarkers[“Authenticated Home Page”].adx_copy | liquid }} : Syntax to load the ‘Authenticated Home Page‘ site marker we created earlier.
  • | liquid denotes to render if any liquid script mentioned in site markers web page.
• {% else %} : Denotes user is not logged in.
• {{ sitemarkers[“Anonymous Home Page”].adx_copy | liquid }} : Syntax to load the ‘Anonymous Home Page‘ site marker we created earlier.
  • | liquid denotes to render if any liquid script mentioned in site markers web page.

That’s it! I hope you learned how to load conditional home page content based on user authentication.

🙂