Styling in Adaptive Card Submit Action

I am using Adaptive card to display some items in my bot solution. In Adaptive card Submit button i want to make title as bold.

Code:

"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
 "body": [
   {
     "maxLines": 0,
     "size": "default",
     "spacing": "medium",
     "text": "You can ask me below optons",
     "type": "TextBlock",
     "weight": "default",
     "wrap": true
   }
 ],
 "actions": [
   {
     "type": "Action.Submit",
     "title": "Service details \n \"Service details for PC request\"",
     "data": "Service details for PC request"
   }
 ],
 "type": "AdaptiveCard",
 "version": "1.0"
}

In the above code.I am showing title in submit button two lines.

In this i want to make only "Service details" in bold.

Is there any option for submit action styling?

I have tried Bold(** {Something} **) option. But didnt work for Button title.

Solution

Unfortunately, it appears that rendering Markdown is not supported by Adaptive Cards for the action component. As you can see in the AC docs, Markdown is only supported in the TextBlock. Scrolling down to Actions, you can see that it is not.

If this is a feature you feel strongly about, I would suggest you create a feature request on their GitHub repo.

[Edit]

It is possible to change the text of the button after the card has been passed to Web Chat but prior to its rendering. Add the following code, making adjustments where necessary, and you should be good to go.

mainDialog.js - Pass placeholder text in the adaptive card being sent from the bot.

async basicAdaptiveCard ( stepContext ) {
  let text = `##Service details` // \n \"Service details for PC request\""
  let response = md.utils.isString( '__Service details__' )
  const card = {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
      {
        "type": "TextBlock",
        "text": "Hi!! How can I help you today?",
        "weight": "Bolder",
        "size": "Medium"
      }
    ],
    "actions": [
      {
        "type": "Action.Submit",
        "title": "Placeholder Message", // This text will be replaced in Web Chat
        "data": "close"
      }
    ]
  }

index.html

<head>
  [...]
  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/markdown-it.min.js"></script>
  [...]
</head>

[...]


<script type="text/babel">
  ( async function () {
    'use strict';
    const { ReactWebChat } = window.WebChat;
    const markdownIt = window.markdownit(); // Import  'markdown-it' into web chat script

  [...]

  // Create `store` to capture and modify the activity coming from the bot
  const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => async action => {

    // Notifies Web Chat we are going to do something when an activity is received from the bot 
    if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {

      // We update the HTML of the already rendered card.
      // First, we acquire the button(s). In my case, I have multiple buttons from multiple cards, so I gather them all.
      let button = document.body.getElementsByClassName('ac-pushButton')

      // Next, we cycle through the buttons
      for(let i = 0; i <= button.length - 1; i++) {

        // Looking for the button with the text we passed through
        if(button[i].children[0].nodeName === 'DIV' && button[i].children[0].innerHTML === 'Placeholder Message') {

          // As the default font-weight for the button is bold, we set it all to 'normal'
          button[i].children[0].setAttribute('style', 'font-weight: normal; color: black')

          // And pass in the text we want with the styling we want allowing us to specify which text should be bold
          button[i].children[0].innerHTML = '<p><b>Service details</b><br />\"Service details for PC request\"</p> '
          continue;
        }
      }
    return next( action );
  } );

// Finally, we pass in `store` to the renderer
window.ReactDOM.render(
  <ReactWebChat
    directLine={ directLine }
    store={store}
  />,
  document.getElementById( 'webchat' )
);
document.querySelector( '#webchat > *' ).focus();

Hope of help.