AdaptiveCards - How to customize the color and fonts for Actions on iOS?

Question

I'm using v1.2.6 of the AdaptiveCard SDK. Using this example card that uses the 3 available styles for actions (default, positive, destructive), it seems I'm only able to control the background color of the positive card, and it's not very intuitive how it's working.

The card i'm using:

{
   "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
   "type":"AdaptiveCard",
   "version":"1.2",
   "body":[
      {
         "type":"TextBlock",
         "wrap":true,
         "text":"There are also still actions at the bottom of the card"
      }
   ],
   "actions":[
      {
         "type":"Action.ShowCard",
         "title":"Positive",
         "style":"positive",
         "card":{
            "type":"AdaptiveCard",
            "body":[
               {
                  "type":"TextBlock",
                  "text":"This is a show card"
               }
            ]
         }
      },
      {
         "type":"Action.OpenUrl",
         "title":"Desctructive",
         "url":"https://adaptivecards.io",
         "style":"destructive"
      },
      {
         "type":"Action.Submit",
         "title":"Default",
         "data":{
            "x":13
         }
      }
   ]
}

And the host config I'm using:

{
    "hostCapabilities": {
        "capabilities": null
    },
    "choiceSetInputValueSeparator": ",",
    "supportsInteractivity": true,
    "fontFamily": "Arial",
    "spacing": {
        "small": 4,
        "default": 12,
        "medium": 12,
        "large": 12,
        "extraLarge": 16,
        "padding": 12
    },
    "separator": {
        "lineThickness": 1,
        "lineColor": "#EEEEEE"
    },
    "fontSizes": {
        "small": 12,
        "default": 14,
        "medium": 16,
        "large": 20,
        "extraLarge": 22
    },
    "fontWeights": {
        "lighter": 300,
        "default": 400,
        "bolder": 600
    },
    "imageSizes": {
        "small": 40,
        "medium": 80,
        "large": 160
    },
    "containerStyles": {
        "default": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#CE2D4F", // this affects the "positive" action for some reason
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#24282B"
        },
        "emphasis": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": " #FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF9987"
                },
                "attention": {
                    "default": "#FF9D52",
                    "subtle": "#FFCA99"
                }
            },
            "backgroundColor": "#535759"
        },
        "good": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#17451E"
        },
        "accent": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#124052"
        },
        "warning": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#632926"
        },
        "attention": {
            "foregroundColors": {
                "default": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "dark": {
                    "default": "#FFFFFF",
                    "subtle": "#E6E8E8"
                },
                "light": {
                    "default": "#B4B6B8",
                    "subtle": "#929596"
                },
                "accent": {
                    "default": "#1DC4F2",
                    "subtle": "#00A0D1"
                },
                "good": {
                    "default": "#44CF50",
                    "subtle": "#7FEB86"
                },
                "warning": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                },
                "attention": {
                    "default": "#FF5C4A",
                    "subtle": "#FF5C4A"
                }
            },
            "backgroundColor": "#543511"
        }
    },
    "actions": {
        "maxActions": 5,
        "buttonSpacing": 8,
        "showCard": {
            "actionMode": "Inline",
            "inlineTopMargin": 8,
            "style": "emphasis"
        },
        "style": "emphasis",
        "preExpandSingleShowCardAction": false,
        "actionsOrientation": "Vertical",
        "actionAlignment": "stretch"
    },
    "adaptiveCard": {
        "allowCustomStyle": false
    },
    "imageSet": {
        "maxImageHeight": 100
    },
    "media": {
        "allowInlinePlayback": false
    },
    "factSet": {
        "title": {
            "size": "Default",
            "color": "Default",
            "isSubtle": false,
            "weight": "Bolder",
            "wrap": true
        },
        "value": {
            "size": "Default",
            "color": "Default",
            "isSubtle": false,
            "weight": "Default",
            "wrap": true
        },
        "spacing": 10
    },
    "cssClassNamePrefix": null
}

renders this card:

The positive card seems to only change color when I modify the hex value under "containerStyles" -> "default" -> "foregroundColors" -> "accent" -> "default" which makes zero sense to me (I only found this via trial and error as the documentation doesn't do a good job of explaining this).

I've also explored using extensibility for rendering my own Actions, but it doesn't seem to be supported since there is no ACRCardElementType enum for actions (only ActionSets).

I have these questions as a result:

Why is the positive action background color affected by that specific property?
How do I modify the background colors of the other actions (and how are they getting their current values)?
Is there a way to use extensibility to render these action buttons?

score 2 · Answer 1 · answered Jun 04 '20 at 08:24

2

im afraid that right now action styles (all buttons) can only be changed using CSS. The HostConfig has no affect on the color of buttons.

For iOS, if you are familiar with XIB, you can change the styles of buttons through XIB. https://learn.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/ios/native-styling

If not, UI element such as buttons can be updated through overriding corresponding renderer. https://learn.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/ios/extensibility

answered Jun 04 '20 at 08:24

MadeWithCards.io

31
2

1

For JS/HTML you can just use CSS to change the buttons. – MadeWithCards.io Jun 04 '20 at 08:25
Thanks for the response! The XIB approach we are avoiding, since those XIBs are part of the Microsoft SDK and not our own project (we don't want to maintain a whole framework if possible). As for the renderer, I mentioned in my question that I wasn't able to get that to work since there is no corresponding `ACRCardElementType` for actions (only ActionSet). The command used to register a renderer requires a cardElementType: `ACRRegistration.getInstance().setBaseCardElementRenderer(renderer, cardElementType: elementType)`. Do you know if there is another way to override the action renderers? – johnny Jun 04 '20 at 18:10

score 0 · Answer 2 · edited Feb 25 '21 at 08:18

I've used Custom Render to update the button styling.

class CustomADButtonRenderer: ACRBaseActionElementRenderer {
    let renderer = ACRActionSubmitRenderer.getInstance()

    override func renderButton(_ rootView: ACRView!, inputs: NSMutableArray!, superview: UIView!, baseActionElement acoElem: ACOBaseActionElement!, hostConfig acoConfig: ACOHostConfig!) -> UIButton! {
        super.renderButton(rootView, inputs: inputs, superview: superview, baseActionElement: acoElem, hostConfig: acoConfig)
        let button = renderer?.renderButton(rootView, inputs: inputs, superview: superview, baseActionElement: acoElem, hostConfig: acoConfig)

// check - update styling for default button only. Possible values are 'default', 'positive', 'destructive' 
        if let button = button, let sentiment = acoElem?.sentiment, sentiment == "default" {
            button.backgroundColor = .lightGray
        }
        return button
    }
}

Then where we create an Adaptive card from JSON payload,

private let customButtonRenderer = CustomADButtonRenderer()
let registration = ACRRegistration.getInstance()
registration.setActionRenderer(customButtonRenderer, cardElementType: 2) 
// 'cardElementType' is not yet availble as Enum, so need to pass arg. as NSNumber. This is already raised as an enhancements on Adaptivecard repository.

Note: Above code need to be added before,

let card: ACOAdaptiveCardParseResult = ACOAdaptiveCard.fromJson(payload)

Cheers and happy coding!

AdaptiveCards - How to customize the color and fonts for Actions on iOS?

2 Answers2

Linked