自适应卡 - 用于卡宽度控制的主机配置

Question

我正在尝试从卡片生成图像。 Webex 具有窄卡宽度支持，我使用以下代码生成的卡片图像没有主机配置生成 wider image (similar to "Cortana Option") which gets resize on the Webex side (similar to bot framework) resized.

我希望生成 HTML 宽度较小的类似于 bot 框架网络聊天，以便调整大小对整体卡片布局的影响较小。

Webex 在设计器上有类似卡片宽度的 Bot 框架 webchat 选项。 config 控制卡的宽度是哪个主机的？设计器上“Bot Framework Webchat”选项的宽度选项设置是多少？

function cardToImage(card) {
    setupNodeAdaptiveCards();
    let adaptiveCard = new AdaptiveCards.AdaptiveCard();

    AdaptiveCards.AdaptiveCard.onProcessMarkdown = function (text, result) {
        result.outputHtml = markdownit().render(text);
        result.didProcess = true;
    };
    adaptiveCard.parse(card);
    // console.log(JSON.stringify(adaptiveCard))
    let cardElement = adaptiveCard.render();
    console.log(cardElement.outerHTML);
    elementToImage(cardElement.outerHTML);
}

更宽的图像：

窄卡：

Answer 1

您可以找到网络聊天使用的默认值 adaptiveCardHostConfig here。我不知道它是否与 Adaptive Cards Designer 使用的完全一致，但它应该能让您大致了解。

它确实传递了从相邻文件中获取的值，因此您可能需要漫游以搜索这些值。

{
  containerStyles: {
    default: {
      foregroundColors: {
        default: {
          default: bubbleTextColor,
          subtle
        },
        accent: {
          default: accent,
          subtle: accent
        }
      }
    },
    emphasis: {
      backgroundColor: cardEmphasisBackgroundColor,
      foregroundColors: {
        default: {
          default: bubbleTextColor,
          subtle
        }
      }
    },
    accent: {
      backgroundColor: '#C7DEF9',
      foregroundColors: {
        default: {
          default: '#333333',
          subtle: '#EE333333'
        }
      }
    },
    good: {
      backgroundColor: '#CCFFCC',
      foregroundColors: {
        default: {
          default: '#333333',
          subtle: '#EE333333'
        }
      }
    },
    attention: {
      backgroundColor: '#FFC5B2',
      foregroundColors: {
        default: {
          default: '#333333',
          subtle: '#EE333333'
        }
      }
    },
    warning: {
      backgroundColor: '#FFE2B2',
      foregroundColors: {
        default: {
          default: '#333333',
          subtle: '#EE333333'
        }
      }
    }
  },
  supportsInteractivity: true,
  fontFamily: primaryFont,
  imageSizes: {
    small: 40,
    medium: 80,
    large: 160
  },
  actions: {
    actionAlignment: 'stretch',
    actionsOrientation: 'vertical',
    buttonSpacing: 8,
    maxActions: 100,
    showCard: {
      actionMode: 'inline',
      inlineTopMargin: 8
    },
    spacing: 'default'
  },
  adaptiveCard: {
    allowCustomStyle: false
  },
  imageSet: {
    imageSize: 'medium',
    maxImageHeight: 100
  },
  factSet: {
    title: {
      color: 'default',
      size: 'default',
      isSubtle: false,
      weight: 'bolder',
      wrap: true,
      maxWidth: 150
    },
    value: {
      color: 'default',
      size: 'default',
      isSubtle: false,
      weight: 'default',
      wrap: true
    },
    spacing: 8
  }
}

希望得到帮助！

自适应卡 - 用于卡宽度控制的主机配置

Adaptive Card - Host Config for card width control

node.js

adaptive-cards