Auto Populate Logged In User Profile in Copilot Studio Adaptive Card

Auto Populate Logged In User Profile in Copilot Studio Adaptive Card: Step-by-Step Guide

No comments

Loading

In this “Auto Populate Logged In User Profile in Copilot Studio” article, we will learn how to auto-populate a logged-in user profile in the studio step by step and display it in an adaptive card. Here, I will auto-populate user details like User ID, User Principal, User First Name, User Last Name, User Display Name, User Email, User.IsLoggedIn, and User Language.

In today’s digital world, personalization and automation are key aspects of user experience design. With Microsoft Copilot Studio, you can build intelligent applications that utilize Adaptive Cards to enhance interactivity. One of the most common use cases is to display logged-in user profile details dynamically within an Adaptive Card. This article explains step-by-step how to auto-populate user profile details in an Adaptive Card using Copilot Studio, leveraging trending keywords to ensure maximum reach.

What is Copilot Studio?

Microsoft Copilot Studio is a powerful tool that enables developers and business users to build and customize AI-driven experiences seamlessly. It integrates with Microsoft services like SharePoint Online, Teams, and Azure Active Directory to fetch and process user data. By combining the adaptive nature of Adaptive Cards with Copilot Studio’s capabilities, you can design engaging user interfaces with dynamic content.

What Are Adaptive Cards?

Adaptive Cards are a platform-agnostic way of creating interactive content. These cards adjust to the look and feel of the host application (such as Microsoft Teams, Outlook, or a custom app). They support:

  • Text
  • Buttons
  • Images
  • Dynamic content

In this guide, we’ll focus on how Adaptive Cards can dynamically display logged-in user details, such as User ID, Email, and Display Name, in Copilot Studio.

Why Auto-Populate Logged-In User Details?

Displaying logged-in user details dynamically has several benefits:

  1. Personalized Experience: Helps users feel more connected.
  2. Efficiency: Automates manual data input.
  3. Accuracy: Reduces the risk of errors by pulling data directly from user profiles.
  4. Engagement: Encourages users to interact more with your application.

Key Steps to Auto-Populate Logged-In User Profile Details

Below are the steps to design and deploy an Adaptive Card that auto-populates logged-in user details.

Step 1: Setup Copilot Studio

  1. Log in to Copilot Studio:
    • Open Copilot Studio using your organizational account.
    • Navigate to your workspace.
  2. Create a New Agent:
    • Click on Create new agent (formerly known as Copilot) and select a template that aligns with your use case (e.g., a custom chatbot or workflow automation).
  3. Enable Authentication:
    • Go to the Authentication section in the settings.
    • Configure Single Sign-On (SSO) or connect to Azure Active Directory (AAD). This will allow you to access logged-in user data. This step is optional, but to get more details about the logged-in user, you can set this up.

Step 2: Fetch Logged-In User Details

To fetch logged-in user details, you can utilize the following properties from Microsoft Graph API or Azure AD:

  • ID: Unique identifier for the user.
  • Principal Name: Username or email used for login.
  • First Name: User’s given name.
  • Last Name: User’s family name.
  • Display Name: Full name displayed in organizational directories.
  • Email: User’s primary email address.
  • IsLoggedIn: Boolean indicating if the user is authenticated.
  • Language: Preferred language of the user.

Integrate these attributes into your Copilot Studio project by setting up a Graph API call.

Note: The good thing is you don’t need to connect to Graph API or Azure AD explicitly; you can use the logged-in user details directly in Copilot Studio.

Click on the “Insert a variable” from the message node, then go to the “System” tab, filter with “User” text, and you will get to see all system-generated variables related to the logged-in user, as shown below:

User profile system variable in Copilot Studio
User profile system variable in Copilot Studio

Step 3: Create an Adaptive Card

This is the sample adaptive card I have designed for this demo. You can use the adaptive card designer tool to design your specific adaptive card or even you can use ChatGPT to designer your form.

Adaptive Card JSON Example

{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Topic.WelcomeUserVariable",
"size": "Large",
"weight": "Bolder",
"color": "Accent",
"horizontalAlignment": "Center",
"spacing": "Medium"
},
{
"type": "Container",
"style": "default",
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Here is your Details:",
"weight": "Bolder",
"size": "Medium",
"color": "Attention",
"spacing": "Medium"
}
]
},
{
"type": "FactSet",
"facts": [
{
"title": "User ID:",
"value": "${System.User.Id}"
},
{
"title": "User Principal Name:",
"value": "${System.User.PrincipalName}"
},
{
"title": "First Name:",
"value": "${System.User.FirstName}"
},
{
"title": "Last Name:",
"value": "${System.User.LastName}"
},
{
"title": "Email:",
"value": "${System.User.Email}"
},
{
"title": "Is Logged In?",
"value": "${System.User.IsLoggedIn}"
},
{
"title": "Language:",
"value": "${System.User.Language}"
}
],
"spacing": "Medium",
"separator": true
}
],
"bleed": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Refresh",
"style": "positive"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.4"
}

Then, add an “Ask with adaptive card” node to your topic.

Ask with adaptive card in Copilot Studio
Ask with adaptive card in Copilot Studio

After adding the “Ask with adaptive card,” replace the default JSON with the above custom adaptive card JSON.

Step 4: Bind Data to Adaptive Card: Pass Dynamic Parameter to Adaptive Card

Open the JSON in formula mode and replace the “Value” or “Text” attributes for each field with a dynamic variable; it could be with a custom local variable, a global variable, or a system-generated variable, then your adaptive card will look like below:

{

  type: "AdaptiveCard",

  body: [

    {

      type: "TextBlock",

      text: Topic.Var1WelcomeUser,

      size: "Large",

      weight: "Bolder",

      color: "Accent",

      horizontalAlignment: "Center",

      spacing: "Medium"

    },

    {

      type: "Container",

      style: "default",

      items: [

        {

          type: "Container",

          items: [

            {

              type: "TextBlock",

              text: "Here is your Details:",

              weight: "Bolder",

              size: "Medium",

              color: "Attention",

              spacing: "Medium"

            }

          ]

        },

        {

          type: "FactSet",

          facts: [

            {

              title: "User ID:",

              value: System.User.Id

            },

            {

              title: "User Principal Name:",

              value: System.User.PrincipalName

            },

            {

              title: "First Name:",

              value: System.User.FirstName

            },

            {

              title: "Last Name:",

              value: System.User.LastName

            },

            {

              title: "Email:",

              value: System.User.Email

            },

            {

              title: "Is Logged In?",

              value: System.User.IsLoggedIn

            },

            {

              title: "Language:",

              value: System.User.Language

            }

          ],

          spacing: "Medium",

          separator: true

        }

      ],

      bleed: true

    }

  ],

  actions: [

    {

      type: "Action.Submit",

      title: "Refresh",

      style: "positive"

    }

  ],

  '$schema': "http://adaptivecards.io/schemas/adaptive-card.json",

  version: "1.4"

}

Once you open the adaptive card in “Edit formula” mode, you cannot see your form in designed mode; it will automatically disappear. Don’t worry; this is by design. 🙂

If you pass the dynamic formula without errors, you can see your form in test or run mode.

 

Dynamically pass values to Copilot studio adaptive card
Dynamically pass values to Copilot studio adaptive card

Note:

  • If you want to pass a local variable name to the adaptive JSON dynamically, you need to do it this way: Topic.YourLocalVariableName.
  • If you want to pass a global variable name to the adaptive JSON dynamically, you need to do it this way: Global.YourGlobalVariableName
  • If you want to pass a system variable name to the adaptive JSON dynamically, you need to do it this way: System.SystemVariableName.
  • This is case sensitive, so you have to pass with the exact name how you created it or how it is defined if this system-generated variable; otherwise, you will get an error.

How to convert local variable to Global variable in Copilot Studio?

Open your local variable in edit mode, then change the usage mode from “Topic” to “Global (any topic can access).“.

Then, automatically, your topic-based local variable will be converted to a global type where any topic can access this variable.

How to convert local variable to Global variable in Copilot Studio Topic
How to convert local variable to Global variable in Copilot Studio Topic

Now, I will use the same variable in my adaptive card JSON; this time, the way of using this variable is different. In fact, the moment you change the variable type from local or topic to global, automatically that will be reflected in your formula if it was already in use in the formula wherever you have used it; this synchronisation is dynamic. Please see below the topic-based variable automatically changed to global.

Pass global variable in Copilot studio adaptive card formula
Pass global variable in Copilot studio adaptive card formula

Till now, I have shown you how to pass local or topic-based and global variables in the adaptive card formula; now I will show you how to pass a system-generated variable in the Copilot studio formula. Please see below how I have passed it; it is “System. YourSystemGeneratedVariable

Pass system variable in Copilot studio adaptive card formula
Pass system variable in Copilot studio adaptive card formula

Step 4: Test and Deploy – Auto Populate Logged In User Profile in Copilot Studio

Test your Copilot agent, and just say “Hi.” Your greeting topic will be triggered, and you can see all your details, I mean logged-in user details, in the adaptive card form, as shown below:

Auto Populate Logged In User Profile in Copilot Studio Demo
Auto Populate Logged In User Profile in Copilot Studio Demo

That’s it; we are done with the demo. If you notice, some of the fields are empty in the form; that means for this user those attributes are not configured in the Azure Active Directory user creation.

Best Practices for Creating Adaptive Cards

To ensure your Adaptive Card is widely adopted and appreciated, follow these tips:

  1. Professional Design:
    • Use color accents to highlight key information.
    • Ensure proper spacing and font sizes for readability.
  2. Interactive Features:
    • Add buttons like Refresh or Edit Profile to make the card actionable.
  3. Mobile-Friendly Layout:
    • Test your card on multiple devices to confirm responsiveness.
  4. Security Compliance:
    • Always fetch user details securely and comply with data privacy laws like GDPR.

Common Challenges and Solutions

  1. Data Not Loading:
    • Ensure the authentication setup is correct and that the Graph API permissions are granted.
  2. Incorrect User Data:
    • Validate the API response and map fields accurately in Copilot Studio.
  3. Layout Issues:
    • Use the Adaptive Card Designer tool to refine your design.

YouTube Video Demo: Dynamic User Profile in Copilot

Conclusion: Auto Populate User Name & More in Copilot Studio

Thus, in this article, we have learnt how to auto-populate the logged-in user profile in the studio step by step and display it in an adaptive card. Here, I have auto-populated user details like User ID, User Principal, User First Name, User Last Name, User Display Name, User Email, User.IsLoggedIn, and User Language.

Auto-populating logged-in user details in Adaptive Cards is a powerful way to enhance interactivity and personalization in applications built with Copilot Studio. By following the steps outlined in this article, you can create dynamic, professional-looking Adaptive Cards that integrate seamlessly with your applications. With trending keywords and actionable tips, this article equips you to create content that’s not only functional but also optimized for high visibility online.

Start building your Adaptive Card project today and unlock the potential of personalized user experiences!

 

About Post Author

Do you have a better solution or question on this topic? Please leave a comment