How to mask a field on an Adaptive Card for Input of passwords or sensitive data in Copilot Studio

Summary

The video provides a step-by-step guide on how to use Adaptive Cards in Co-Pilot Studio to create a secure input form that masks sensitive data such as Social Security numbers. It introduces Adaptive Cards as a Microsoft technology that allows for the creation of visually appealing cards across various platforms, including non-Microsoft ones. The tutorial demonstrates using the Adaptive Cards designer to extend a card with a secure input field for SSN, utilizing JSON to define the card's structure and a regex pattern for input validation. A special 'style' attribute, set to 'password', ensures the input is masked for privacy. The video concludes with a demonstration of testing the card in Co-Pilot Studio, showing how information is captured without revealing the sensitive input to onlookers, emphasizing the importance of data protection in sensitive data entry scenarios.

Takeaways

• 📘 Adaptive cards are a Microsoft technology that allows for the creation of various visual cards that can be rendered across different platforms, including non-Microsoft ones.
• 🖥️ You can design adaptive cards using the Adaptive Cards Designer, which can be accessed online and provides a visual interface for card creation.
• 📝 To create a secure input field for sensitive data like a Social Security number, you can extend an input form card and use a regular expression pattern to validate the input.
• 🔒 Adding a 'style' property with the value 'password' to an input field in an adaptive card will mask the input, displaying it as asterisks or bullets to protect sensitive information.
• 📱 Adaptive cards can be used in various channels and are not limited to Microsoft products; they can also be used in iOS and Android applications.
• 💻 The payload for an adaptive card is essentially JSON, which defines the structure and content of the card.
• 🔗 The video demonstrates how to integrate an adaptive card into a bot using CoPilot Studio, showing how to create a topic and use a trigger phrase to display the card.
• 📝 When designing an adaptive card, you can include error handling for input validation, specifying what message to display if the input does not meet the required format.
• 📊 CoPilot Studio allows for the testing of adaptive cards within the platform, providing a way to review and debug the information captured from the card.
• 🔄 To use the adaptive card in CoPilot Studio, you can copy the payload from the Adaptive Cards Designer and paste it into the 'Ask with Adaptive Card' node, using the 'style password' property to mask sensitive inputs.
• 📈 The video provides a step-by-step guide on how to create a masked input field for sensitive data within an adaptive card, enhancing user privacy and security.
• 📚 The speaker encourages viewers to like and subscribe for more educational content on CoPilot Studio and to try out CoPilot Studio using the provided link.

Q & A

What is an Adaptive card?

An Adaptive card is a Microsoft technology that allows the creation of various visual cards that can be rendered through different channels, including Microsoft and non-Microsoft products like iOS and Android.

Where can one find more information and examples of Adaptive cards?

One can find more information and examples of Adaptive cards on the Adaptive cards website, Adaptivecards.io.

How is an Adaptive card built?

An Adaptive card is built using a designer tool where you can create new cards by selecting from various card types, such as input forms.

What is the purpose of using a 'style' attribute with the value 'password' in an Adaptive card?

The 'style' attribute with the value 'password' is used to mask the input field, such as a Social Security number, so that it displays asterisks (*) or a similar mask by default, protecting sensitive data from being seen.

How does one extend an Adaptive card to include sensitive data fields like a Social Security number?

To extend an Adaptive card for sensitive data, one would add an input text field with a label and a regex pattern that matches the format of the sensitive data, and then apply the 'style' attribute with the value 'password' to mask the input.

What is the JSON payload in the context of an Adaptive card?

The JSON payload is the data structure that defines the Adaptive card's content and layout, including input fields and their properties.

How does one handle error messages in an Adaptive card input field?

Error messages are handled by specifying a condition in the JSON payload that defines how the error message should be displayed if the input does not meet the required format.

What is CoPilot Studio and how does it relate to Adaptive cards?

CoPilot Studio is a platform where one can create topics and integrate Adaptive cards. It allows for the creation of interactive flows where Adaptive cards can be used to collect and display information.

How can one test the functionality of an Adaptive card in CoPilot Studio?

In CoPilot Studio, one can test the functionality of an Adaptive card by creating a topic with a trigger phrase, using a question node to stop the flow and review the captured information, and then executing the topic to see the card in action.

What is the benefit of using a masked interface for sensitive data input in an Adaptive card?

The benefit of using a masked interface is that it protects sensitive data from being seen by others, such as when someone looks over the user's shoulder, thus enhancing privacy and security.

How can one ensure that the sensitive data entered in an Adaptive card is captured correctly in CoPilot Studio?

One can ensure the data is captured correctly by using topic level variables and reviewing them in the variable watcher after the user submits the form in CoPilot Studio.

What is the significance of using regex patterns in Adaptive card input fields?

Regex patterns are significant as they validate the format of the input data, ensuring that it conforms to a specific structure, such as the format of a Social Security number.

Outlines

00:00

📘 Introduction to Adaptive Cards and Masking Sensitive Data

The video begins by introducing Adaptive Cards, a Microsoft technology that allows for the creation of various visual cards compatible with multiple platforms, including non-Microsoft ones. The speaker guides viewers to Adaptivecards.io for more information and examples. An Adaptive Card designer is available for creating cards, and the video demonstrates extending a card to include sensitive information fields like a Social Security number. The process involves using JSON to define card elements and input validation through regular expressions. The speaker also discusses error handling for input fields and concludes by showing how to implement the card in Co-Pilot Studio, a platform for building conversational AI experiences.

05:01

🔒 Masking Sensitive Input Fields in Co-Pilot Studio

This paragraph explains how to mask sensitive data input fields in Co-Pilot Studio using Adaptive Cards. The speaker demonstrates adding a style attribute with the value 'password' to an input field, which changes the behavior to hide the input, typically used for Social Security numbers or other sensitive information. The video shows testing the card within Co-Pilot Studio, ensuring that the information is captured and masked as intended. The speaker uses a question node to debug and verify that the data is being collected correctly. By entering information into the masked fields, the video illustrates how the data remains hidden from view, providing a secure method for users to enter sensitive data. The video concludes with a reminder to review collected variables in the variable picker and an invitation to try Co-Pilot Studio.

Keywords

💡Adaptive Card

Adaptive Cards are a Microsoft technology that allows developers to create interactive, richly formatted cards that can be rendered across various platforms and channels, including both Microsoft and non-Microsoft products. They are used to display content in a structured and visually appealing way. In the video, the creator uses Adaptive Cards to build a form that includes fields for sensitive data like Social Security numbers.

💡Co-Pilot Studio

Co-Pilot Studio is a platform where users can design and implement conversational AI experiences, such as chatbots. In the context of the video, Co-Pilot Studio is used to create a topic that triggers the display of an Adaptive Card, allowing users to input sensitive information in a secure manner.

💡Sensitive Data

Sensitive data refers to information that requires a higher level of security due to its private or confidential nature. In the video, the creator discusses the importance of protecting sensitive data like Social Security numbers when inputting them through Adaptive Cards.

💡Masking Input

Masking input is a security feature that hides the characters entered by a user in a form field, typically used for sensitive information like passwords or credit card numbers. In the video, the creator demonstrates how to mask the Social Security number input field in an Adaptive Card to protect user privacy.

💡JSON

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. In the video, the creator discusses the JSON payload used to define the structure and content of the Adaptive Card.

💡Regular Expression (Regex)

A regular expression (regex) is a sequence of characters that forms a search pattern, primarily used for string matching in programming. In the context of the video, the creator uses a regex pattern to validate the format of the Social Security number input.

💡Error Handling

Error handling refers to the process of responding to the occurrence of various types of operational faults that may occur during the execution of a software program. In the video, the creator sets up an error message that is displayed if the input does not match the required format.

💡Dynamic Content

Dynamic content refers to web page content that changes while a user is viewing a web page before requesting a new one from the server. In the video, the creator mentions the option to convert static JSON content into a formula for dynamic Adaptive Cards, although for the purpose of the tutorial, a static card is used.

💡Payload

In the context of computing networks, a payload refers to the data that is being transmitted over a network in addition to the necessary protocol information. In the video, the term is used to describe the JSON data that defines the Adaptive Card's structure and content.

💡Style Password

The 'style password' property in Adaptive Cards is used to make an input field behave like a password field, where the input is masked. In the video, the creator adds 'style password' to the Social Security number input field to ensure the input is hidden for privacy.

💡Variable Watcher

A variable watcher is a tool used in debugging to monitor the values of variables during the execution of a program. In the video, the creator uses a question node to create a breakpoint and review the captured information in the variable watcher to demonstrate that the sensitive data has been collected.

Highlights

Adaptive cards are a Microsoft technology that allows the creation of various visual cards.

Adaptive cards can be rendered through different channels and are compatible with Microsoft and non-Microsoft products.

Adaptivecards.io provides a wealth of information and examples on how to use Adaptive cards.

There is a designer tool within Adaptive cards where users can create visual cards by selecting different card types.

The video demonstrates extending an Adaptive card to include sensitive data fields like Social Security numbers.

The payload for an Adaptive card is in JSON format, which can be customized for specific input fields.

A regular expression pattern is used to validate the format of input data like a Social Security number.

Error handling for input validation can be specified within the card's JSON payload.

To mask sensitive input fields, the 'style' property with a value of 'password' can be added to the input field.

Co-Pilot Studio allows for the creation of topics and nodes to trigger Adaptive card interactions.

The payload from the Adaptive card designer can be copied and pasted into Co-Pilot Studio for use in a topic.

Adding 'style password' to an input field in an Adaptive card masks the input, displaying asterisks instead of text.

Co-Pilot Studio provides a way to test and debug Adaptive card inputs using topic level variables.

Sensitive data entered into masked fields in Adaptive cards is protected from being seen by others.

The video provides a step-by-step guide on how to create and use Adaptive cards with masked fields in Co-Pilot Studio.

The use of 'style password' is a common practice for protecting sensitive data inputs in various fields, not just Social Security numbers.

The video concludes with a demonstration of how to execute and review the collected information from an Adaptive card.

Co-Pilot Studio offers a platform for building interactive and dynamic Adaptive card experiences.

The video encourages viewers to like, subscribe, and try Co-Pilot Studio for more educational content.

Transcripts

in this video I'm going to show you how

to mask a field on an Adaptive card when

you want to protect the input for

sensitive data in co-pilot studio so

let's first talk about what is an

Adaptive card if you don't know what an

Adaptive card is you can go to Adaptive

cards.io and basically this is a

Microsoft Technology that allows you to

be able to build all these different uh

visual cards that can be rendered

through different channels um through

out different Microsoft products or even

non-microsoft products as well like even

IOS and Android and so you can kind of

see here in the little video that plays

on the Adaptive card site that they've

got a ton of information here and you

can even scroll down and see examples of

how you might be able to use these um as

well this has been around since the bot

framework days uh and such so this is a

very common uh platform for people to

want to build visual cards now in order

to be able to build visual cards There's

an actual designer right here that you

can go to so let's take a look at the

designer okay so over here I have

designed this card inside of the adopter

cards designer and you can do this by

clicking on new card and picking one of

the cards that you might want in the

case of what we're playing with we're

playing with this one right here which

is the input form and so let's take a

look look here at what I've done to this

card so when we have these cards you

might have a situation where you want

like your name or your email address and

your phone number I've extended this

card to include something secure like

your Social Security number so let's

look at how I extended that card by just

scrolling down over here and looking at

the code behind this so you can see here

that this is the uh basically the

payload uh for the actual uh adaptive

card which is basically Json and if you

notice if you scroll down let's just

find where I do you can see the email

you can see the telephone number but

here you can see that there's an input

text field that said that I've called my

SSN now you'll see here that I put a

label so it will say social security

number and it displays the format in

which you want it and then down here

there's a Rex pattern that's being used

now in this case you can almost just

copy the phone number because it's

social security number the only real

difference is that you actually have a

separation here um within it that

basically has uh two numbers instead so

in order to be able to get this format

you'll see here that basically I've said

okay I need to have 0 to9 three digits

and then I've got uh another one that is

0 to9 two digits followed by another one

that's 0 to 9 for four digits and then I

put in here that if I I have an error

message how do I want to handle the

error message and you'll see here that I

went in and I said this if it doesn't

meet that format this is what I want it

to say and you can see that I've told it

to do this now you can literally just

copy this whole section right here uh

when you go about it but I'm going to

show you the one last little thing that

you need to do to be able to make this

uh land uh with with it not being

formatted uh where it shows the text so

we want it to actually just show like

Asters or something like that so let's

go take a look at what I did inside of

copilot studio

so now we're inside of copilot studio

and what I'm going to do now is I'm

going to go in and show you that I

created a topic and this topic I created

is called show adaptive card and I just

said with a trigger phrase here to show

an Adaptive card as the phrase so that's

what I can type and it will fire this up

now you'll notice here that this is

where I went in and they said I want to

ask with adaptive card so if you come in

here and you say ask with adaptive card

right there it will create this node for

you and so with that what I did in this

particular node let's expand this and

let's look at the properties on it and

what you're going to notice here and

I'll just move this over so you can kind

of see it is that I took the payload

from the adapter card designer which is

you want to grab this text right here

like all of this and you want to grab

that and you want to drop it in to this

location now notice that it says edit

Json you can convert this to a formula

if you want it to be a dynamic adaptive

card and all of that but in this case

what we want to do is we want to just

look at a regular adaptive card where

there is no Dynamic content and you'll

notice that we have follow this format

just like we had before but I did

something special whenever we built this

out you'll notice here that I added a

style and the style was password and by

adding style password to the end just

like you can see style tell or style

email but when you say style password

you're going to get a different uh

Behavior so now that I've saved this

notice that I'll show you what I did to

be able to test this just so you can see

this you'll see here your information

has been submitted so that after I hit

the submit button this goes to there and

then I put a question node here and now

why did I put a question Noe I put a

question Noe here because I want to

debug this to show you that it's

capturing the information because these

are all topic level variables so if I

just end the topic without doing

anything with it you won't be able to

see it in the variable Watcher so that's

why I did this just so that we have a

stop point and then then we have the end

the topic so now let's actually execute

this and here I'll turn on tracking so

that you can see it and if I say show an

Adaptive

card and you see it rendered the card

now if I come in here and I need to

follow the formatting again I need to

say like

Robinson Dwayne in this my email let's

just say me at at

home.com and then phone number let's

just use um let's do

555 Das one 2 3 dash 1 2 3

4 and then we'll get to the social

security number and in this case I need

to be able to get that same format so

what I'm going to do is I'm going to

type it in and I'm just going to fill

this with ones I'm just going to say one

one one

dash one one dash one one one one so

that should be completely masked and you

can see here that I've got these bullet

points now now you can click this to be

able to see the information behind the

scenes just like any type of masked uh

interface but the idea here is to make

that where that's masked so that you

can't see it by default now once I hit

submit on this you'll see here now would

you like to review the variables in the

case of this I I want to review the

variables so let's look at the variable

picker and let's go up to the test and I

want to look at topics and notice right

here you can see that I actually did

collect all the information that we

entered in just a minute ago so the idea

here is that this allows you to be able

to mask this so that the user when

they're typing it in that someone can't

look over their shoulder and see this

this is a common thing for

uh people who are entering in uh

situations where they have sensitive

data that they want to protect and you

can do this on social security number

any field as long as you give it that

style of password it's going to make it

where it displays it in a masked

interface so I hope this was actually

helpful because a lot of people have

been asking how to do this I hope you

enjoyed today's video and as always you

can like And subscribe to my channel for

more educational content on copilot

studio and as always you can try copilot

Studio at

aka.ms TR copilot Studio