Introduction
When we interact with Power Virtual Agents formatting the displayed text with bold/italics, showing an ordered list of information, or displaying tabular data and images elevates the user experience. However, we cannot use the most reliable HTML tags to create the needed textual changes within Power Virtual Agents.
As of now, only Markdown language is supported to display the textual formatting within Power Virtual Agents. Markdown is a lightweight markup language for creating a formatted text which dates to 2004. Markdown is being widely used to make formatting changes and edit documents on platforms like Github.
Let’s see the basics of working with the Markdown language within Power Virtual Agents.
Basics
The markdown syntax does not work directly when applied with Power Virtual Agents. By default, the Send a message action in Power Virtual Agents have a few formatting options that let you beautify the text.
It will provide the output as :
However, beyond this, there are no inherent formatting options available as of now. So as to extend the formatting abilities, Power Virtual Agents however support displaying markdown language. But it comes with a caveat, if we use it directly within the Message node, the markdown will be ignored. So the only way to add markdown is to use Power Automate where we can define the markdown text and share back the variable holding the markdown data which can be displayed using the message box. So we will call the Power Automate and accept the markdown variable and show it as :
Let’s see some basic formatting samples that we can achieve within Power Virtual Agents using Power Automate.
Heading and Paragraph
We can define the heading levels by using the # symbol followed by text. The number of # that we use will determine the size of the heading. It is equivalent to the H1-H6 heading tag in HTML.
For instance, we can use up to 6 # to define the heading levels with Single Hash indicating the largest heading size.
| # This is heading 1 ## This is heading 2 ### This is heading 3 #### This is heading 4 ##### Heading level 5 ###### This is heading 6 |
To create paragraphs, we will use a blank line to separate one or more lines of text as below :
| This is line 1 in Paragraph 1 This is line 2 in Paragraph 2 |
We will be calling the Power Automate from within Power Virtual Agents to define the markdown in a variable and will send it back to the Power Virtual Agent as below:
It outputs the markdown in the chat window as:
As we can see the Heading and Paragraph markdowns have been rendered but the Heading with 5 Hashes(H5) doesn’t work as expected which is by design.
Bold and Italics
We can now try to add Bold and Italic formatting to the text. A text is made Bold by adding 2 asterisks before and after the words as :
| **I am a Bold Text** |
A text is made italics by surrounding it with single asterisks
| *I am an Italic Text* |
While the text can be made both bold and italic by surrounding it with 3 asterisks
| ***I am both Bold and Italic*** |
In Power Automate, it would look like :
The output in Power Virtual Agent will look like this:
Block quote
Ideally, in the markdown world, we can create a block quote by appending the text with the > symbol. But in Power Automate, it is just ignored. So not all markdowns are respected AS-IS in Power Virtual Agents for now.
Ordered and Unordered Lists
A very common use case is to list down the data as bulleted or numbered lists. We can create the ordered list by starting the text with a number followed by a period and the relevant data as below. In the same way, we can indent the items as well.
| 1. First List item 2. Second List item 3. Third List item 1. Indented item 2. Indented item 4. Fourth List item |
In Power Automate it would look like :
The PVA output will the markdown as :
To create an unordered list we can add dashes (-), asterisks (*), or plus signs (+) in front of the text, and indentation can be done by adding dashes/ asterisks/ plus signs as
| * First List item * Second List item * Third List item * Indented item * Indented item * Fourth List item |
In Power Automate it would look like :
The markdown output in PVA will be as below :
We can also nest the Ordered and Unordered lists as :
| 1. First List item 2. Second List item 3. Third List item * Indented item * Indented item 4. Fourth List item |
Which would result in the below output
Table
To add a table, we use three or more hyphens (—) to create each column’s header and use pipes (|) to separate each column. To add the rows we will again use pipe as a separator or each cell as below :
| |Name|Department| |————-|————-| |Priyaranjan|Modern Work Place| |Nimmy|Java Digital| |Rakesh|Mobility| |Jinesh|Next Digital| |Rajesh|Enterprise| |
We will add it to Power Automate as :
Which will give the markdown output in PVA
Links
We can also format the text as links using the below syntax to display a clickable link in PVA
| [Google](www.google.com) |
We will add it to Power Automate as:
Which will give the output in PVA
Images
To render an image using markdown, we will follow the syntax
|  |
We will add it to Power Automate as :
And the PVA output will come up as:
Video
Same way as adding the image, extending the markdown to the below syntax will let us add the Video to the PVA
| []({video-url} “Link Title”) |
Here we can add the Video Thumbnail URL, its alternate text, Video URL, and the hover over video title
We can add it to Power Automate as :
Which will output the Video link in PVA as
It doesn’t have the flexibility to playback within PVA, clicking on it will take you to the respective web-based media players.
Summary
Thus, we have seen how to work with markdown language to format and beautify the conversations within Power Virtual Agents
