What is HostConfig?

HostConfig is a cross-platform configuration object that specifies how an Adaptive Card Renderer generates UI.

This allows properties which are platform agnostic to be shared among renderers on different platforms and devices. It also allows tooling to be created which gives you an idea of the look and feel that card would have for a given environment.

See a sample HostConfig.json to get a feeling for its contents.

Important

This content is out of date and will be updated shortly. Please see the sample Host Config above for the most up-to-date structure

Note

You are not restricited to the limited set of styling that Host Config offers. You can customize the look and feel of the card further using the styling mechanisms appropriate to the UI framework used to render the card. For example, use CSS in HTML to change the look and behavior of action elements.

HostConfig

Property Type default Description
actions ActionsConfig - Defines configuration for actions in general
actionAlignment ActionAlignment - Controls how actions are horizontally positioned within their container
actionSetConfig ActionSetConfig - Defines ActionSet configuration
actionsOrientation ActionsOrientation - Controls how actions are oriented
adaptiveCard AdaptiveCardConfig - Defines adaptive card configuration
choiceSet ChoiceSetConfig - Defines ChoiceSet configuration
colors ColorsConfig - Defines color palette
colorConfig ColorConfig - Defines color and subtle version of color
column ColumnConfig - Defines configuration for Column element
columnSet ColumnSetConfig - Defines configuration for ColumnSet element
container ContainerConfig - Defines configuration for Container element
containerStyleConfig ContainerStyleConfig - Defines a style for a container
dateInput DateInputConfig - Defines DateInput configuration
image ImageConfig - Defines Image configuration
imageSet ImageSetConfig - Defines configuration for ImageSet element
imageSizes ImageSizesConfig - Defines the sizes for images
factSet FactSetConfig - Defines configuration for FactSet element
fontFamily string "Calibri" Defines comma delimited font-family to be used for card
fontSizes FontSizesConfig - Defines font sizes to use for text.
numberInput NumberInputConfig - Defines NumberInput configuration
showActionMode ShowActionMode - Controls how to show the card for a ShowActionCard
showCardActionConfig ShowCardActionConfig - The configuration for showing a card action.
spacingDefinition SpacingDefinition - Defines left, top, right and bottom number values
strongSeparation SeparationConfig - Defines spacing and color for separations between vertical elements
supportsInteractivity bool true Does the host want to support interactivity like actions and inputs
textBlock TextBlockConfig - Defines TextBlock configuration
TextConfig TextConfig - Defines text settings for things like FactSet Title.
textInput TextInputConfig - Defines TextInput configuration
timeInput TimeInputConfig - Defines TimeInput configuration
toggleInput ToggleInputConfig - Defines ToggleInput configuration

ActionsConfig

Defines config for how actions should be rendered

Property Type default Description
actionsOrientation ActionsOrientation Horizontal Defines actions as horizontal vs vertical
actionAlignment ActionAlignment center should actions be aligned left, centered, right or stretch
buttonSpacing number 8 spacing between buttons in an actionSet
maxActions number 5 max number of actions that the app wants to support
separation SeparationConfig - Defines separation between actionSet and previous elements
showCard ShowCardActionConfig - Defines configuration for ShowCardAction

ActionAlignment

Controls how actions are horizontally positioned within their container

Value Meaning
left actions should be aligned to the left
center actions should be aligned center
right actions should be aligned tot the right
stretch actions should be be stretched to fit the width

ActionSetConfig

Defines ActionSet configuration

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between elements

ActionsOrientation

Controls how actions are oriented

Value Meaning
horizontal actions should be laid out horizontally
vertically actions should be laid out vertically

AdaptiveCardConfig

Defines Card configuration

Property Type default Description
backgroundColor string #FFFFFFFF Defines default color for the background in RGBa format #AARRGGBB
padding SpacingDefinition 8,8,8,8 Defines padding between card content and edge of card

ChoiceSetConfig

Defines configuration for ChoiceSet input elements

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between elements

ColorsConfig

Color configuration defines the palette for the card

Property Type default Description
default ColorConfig #FF000000 default color to use
accent ColorConfig #FF0000FF accent color to use
dark ColorConfig #FF101010 dark color to use
light ColorConfig #FFFFFFFF light color to use
good ColorConfig #FF008000 good color to use
warning ColorConfig #FFFFD700 warning color to use
attention ColorConfig #FF8B0000 attention color to use

ColorConfig

Defines color and subtle version of color

Property Type default Description
normal string - normal color to use (in #AARRGGBB)
subtle string - subtle color to use (in #AARRGGBB)

ColumnSetConfig

Defines ColumnSet configuration

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between elements

ColumnConfig

Defines column configuration

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between columns

ContainerConfig

Defines container configuration

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between elements
normal ContainerStyleConfig - Defines the normal style for a container
emphasis ContainerStyleConfig - Defines an emphasized style for a container

ContainerStyleConfig

Defines a style for a container

Property Type default Description
backgroundColor string transparent Defines background color for the container
borderColor string transparent Defines a border color for the container
borderThickness SpacingDefinition {0,0,0,0} Defines a border thickness for the container
padding SpacingDefinition {0,0,0,0} Defines background color for the container

DateInputConfig

Defines configuration for Date input elements

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between elements

ImageConfig

Default Image configuration

Property Type default Description
imageSize ImageSize Auto The default image size to use for an image
separation SeparationConfig - Defines spacing and color for separations between elements

ImageSetConfig

Default Image size for the imageset

Property Type default Description
imageSize ImageSize Medium The default image size to use for an imageSet
separation SeparationConfig - Defines spacing and color for separations between elements

ImageSizesConfig

Defines imageSize for the card

Property Type default Description
small number 60 small image size
medium number 120 medium image size
large number 120 large image size

FactSetConfig

Defines how factSets should look

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between elements
spacing number 20 spacing between fact and value
title TextConfig { Weight = TextWeight.Bolder } sets how text for fact title should look
value TextConfig { } sets how text for fact value should look

FontSizesConfig

Defines font sizes

Property Type default Description
small number 10 small font size
normal number 12 normal font size
medium number 14 medium font size
large number 17 large font size
extraLarge number 20 extraLarge font size

NumberInputConfig

Defines configuration for Number input elements

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between elements

TextBlockConfig

Defines configuration for TextBlock elements

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between elements

TextConfig

Defines text settings for things like FactSet Title.

Property Type default Description
size TextSize normal desired size (small, normal, medium, large, extraLarge)
weight TextWeight normal desired weight (lighter, normal, bolder)
color TextColor default desired color from palette
wrap bool false can text be wrapped
isSubtle bool false should use subtle version of color

TextInputConfig

Defines configuration for Text input elements

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between elements

TimeInputConfig

Defines configuration for Time input elements

Property Type default Description
separation SeparationConfig - Defines spacing and color for separations between elements

ToggleInputConfig

Defines configuration for Toggle input elements

Property Type default Description

SeparationConfig

Properties which define spacing, line thickness and color for separating elements

Property Type default Description
spacing number - spacing between elements
lineThickness number - thickness of visible line if desired
lineColor string - color defined as RGBa value #AARRGGBB

ShowCardActionConfig

The configuration for showing a card action.

Property Type default Description
actionMode ShowActionMode InlineEdgeToEdge Defines whether showCard should popup or be displayed inline or inline with background extended to container boundary
backgroundColor string #FFF8F8F8" Defines inline slide-out background color
inlineTopMargin number when in inline mode defines the space between action buttons and the inline card
padding SpacingDefinition {16,16,16,16} The padding for the card when shown inline

SpacingDefinition

Defines left, top, right and bottom number values

Property Type default Description
left number 0 define left value
right number 0 define right value
top number 0 define top value
bottom number 0 define bottom value

ShowActionMode

Controls how to show the card for a ShowActionCard

Value Meaning
InlineEdgeToEdge Show the card inline, but with background color extending to container boundaries
Inline Show the card inline
Popup Popup a window to show the card