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.