自适应卡片提交操作中的样式

Question

我正在使用自适应卡片来显示我的机器人解决方案中的一些项目。在自适应卡片提交按钮中，我想将标题设为粗体。

代码：

"$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"
}

在上面的 code.I 中，我在提交按钮中显示了两行标题。

在此我只想将 "Service details" 设为粗体。

是否有用于提交操作样式的选项？

我试过 Bold(** {Something} **) 选项。但不适用于按钮标题。

Answer 1

不幸的是，Adaptive Cards 似乎不支持操作组件的渲染 Markdown。正如您在 AC 文档中看到的那样，Markdown 仅在 TextBlock. Scrolling down to Actions 中受支持，您可以看到它不是。

如果您非常喜欢这个功能，我建议您在他们的 GitHub repo.

上创建一个功能请求

[编辑]

可以在卡片传递到网络聊天之后但在呈现之前更改按钮的文本。添加以下代码，在必要时进行调整，您应该可以开始了。

mainDialog.js - 在从机器人发送的自适应卡片中传递占位符文本。

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/markdown-it@8.4.2/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();

希望得到帮助。

自适应卡片提交操作中的样式

Styling in Adaptive Card Submit Action

botframework

adaptive-cards