How to change pushbutton background color when its selected/pressed dynamically in webchat botframework

0
votes

I am using botframework webchat using react for designing our bot. We need to highlight the user selection which was chosen from the previous adaptive card. I tried many ways but found nothing. Is there any way to get it?

enter image description here

e.g. I selected “Bank Key Request” and then selected “Change”, but there is no difference. All buttons are same after selection too.

1
botframeworkbotsadaptive-cardsdirect-line-botframeworkweb-chat
can you show me the button code – S.N.B

1 Answers

0
votes

we can use a state for button color , then update that state whenever button is pressed

this.state = {

  buttonColor:'red'
}

then in Button Component, place buttonColor state in in style

<Button onPress={()=> this.setState(buttonColor:"Blue")} style={{ color:this.state.buttonColor}} />

If you are using react-native-adaptive-cards, you can customize styles as follows

  customThemeConfig = {
        input: {
            borderColor: "#000000",
            backgroundColor: "#F5F5F5",
            borderRadius: 4,
            borderWidth: 1,
        },
        button: {
            "ios": {
                color: 'white',
                backgroundColor: "#1D9BF6",
            },
            "android": {
                color: 'white',
                backgroundColor: "#1D9BF6",
            },
            "windows": {
                color: 'white',
                backgroundColor: "#1D9BF6",
            }
        }
    }
    
<AdaptiveCards themeConfig={customThemeConfig} payload={payload} />

so whenever the button is pressed, the state will change color will turn to Blue.