This chapter describes the specific settings required in the adaptive card JSON and the variable definition in the widget card template in Alfabet Expand to specify static values for different kinds of Microsoft adaptive card binding expressions. You can use any definition valid for the variables in the standard adaptive card JSON your widget card template is based on.

  • Result: Text in the card is colored. The text color is the same for all cards based on the widget card template.

    Card JSON code example:

    • {
      • 'type': 'TextBlock',
      • 'text': 'This is the colored text',
      • 'color': '${colorvalue}'
    • }

    Attribute settings in the variable definition of the widget card template:

    • Mapping Type: Color.
    • Type: Common.
    • User Interface Item: Leave this field empty.
    • Value: Open the color selector and select the color for the text.

  • Result: Text in a text block or text run of the card is colored. The text color changes if a user changes the color theme for the user interface to change the display of the Alfabet user interface.

    Define the text color in a style definition of a user interface group and assign the user interface group to user interface themes.

    Card JSON code example:

    • {
      • 'type': 'TextBlock',
      • 'text': 'This is the colored text',
      • 'color': '${colorvalue}'
    • }

    Attribute settings in the variable definition of the widget card template:

    • Mapping Type: Color.
    • Type: Common.
    • User Interface Item: Select the interface style to use for the text in the user interface. The drop-down list includes all available styles with a text color specification with the information: style name (user interface group name).
    • Value: Leave this field empty.

  • Result: Text in a text block or a text run in the card has a defined size.

    Card JSON code example:

    • {
      • 'type': 'TextBlock',
      • 'text': 'This is the text with the specified size',
      • 'size': '${sizevalue}'
    • }

    Attribute settings in the variable definition of the widget card template:

    • Mapping Type: FontSize.
    • Type: Common.
    • User Interface Item: Leave this field empty.
    • Value: Enter the text size as integer.

  • Result: The specified text is displayed in a text block or text run in each card based on the widget card template.

    Card JSON code example:

    • {
      • 'type': 'TextBlock',
      • 'text': '${textvalue}',
    • }

    Attribute settings in the variable definition of the widget card template:

    • Mapping Type: TextOrValue.
    • Type: Common.
    • User Interface Item: Leave this field empty.
    • Value: Enter the text.

  • Result: The image is displayed in all cards based on the widget card template.

    The Is Workbench Card attribute of the widget card definition is set to False. Image rendering is currently not supported for data workbench card visualizations.

    You have uploaded the image to one of the icon galleries.

    Example of Microsoft adaptive card JSON:

    • {
      • 'type': 'Image',
      • 'url': '${imageurl}',
      • 'horizontalAlignment': 'Left',
      • 'height': '40px',
      • 'size': 'Stretch'
    • }

    Attribute settings in the variable definition of the widget card template:

    • Mapping Type: IconURL.
    • Type: Common.
    • Icon: Open the editor, select the icon gallery containing the image and select the image in the list.
    • Value: Leave this field empty.