How to send the arguments to post back dialog - botframework

Question

I have created a post back dialog but trying to post some arguments while calling the postback dialog in microsoft bot framework in v#4 doesn't work as expected.
I have written this code to call the post back dialog from hero card. Here i am able to call the post back but i'm not able to send values(arguments) to postback dialog.
var card1 = CardFactory.heroCard(
Name,
Address1+", "City",
CardFactory.images([Image]),
CardFactory.actions([
{
type: 'postBack',
title: Service,
value: PostBack_DIALOG,
text: 'arguments for postback dialog'
},
{
type: 'call',
title: phone ,
value: "tel:" + phoneNumber
}
])
Please suggest how to send the arguments to post back dialog in bot framework v#4

Answer 1

You can achieve this via sending the argument, not as part of the card, but as part of a successive sendActivities step once the hero card has rendered and the user has selected a button.
In the following code example, I have two steps. One for rendering the card and one for sending the data after the user has interacted with the card. In the first step, called postBackCardStep, I am capturing a previous value from a suggested action where the user selected either 'blue' or 'green'. That value is then passed in the Service button when that button is pressed.
In the second step, called postBackPostStep, I capture and send the user's selection in resultDetails. I also define a property, called postBackArg, and send a property vlaue for validation on the client side. I send this in a data dictionary object in a sendActivities activity. This allows me to send, as one action, both a message and the data.
async postBackCardStep ( stepContext ) {
const PostBack_DIALOG = stepContext.context.activity.text;
const reply = { type: ActivityTypes.Message };
const postBackBtn = { type: ActionTypes.PostBack, title: 'Service', value: PostBack_DIALOG }
const callBtn = { type: ActionTypes.Call, title: 'Phone', value: '123-456-7890' }
const card = CardFactory.heroCard(
'<Name>',
'<Address>',
['<link to some image>'],
[
postBackBtn,
callBtn
]
);
reply.attachments = [ card ];
await stepContext.context.sendActivity( reply );
return { status: DialogTurnStatus.waiting };
}
async postBackPostStep ( stepContext ) {
const resultDetails = stepContext.context.activity.text;
const data = { value: resultDetails, postBackArg: 'true' };
await stepContext.context.sendActivities( [
{ text: `Sending ${ resultDetails } via postBack`, type: 'message' },
{ name: 'data', type: 'event', channelData: { 'data': data } }
] );
return await stepContext.next();
}
Next, in the web chat script in the html page, I have the following code. I create a store, create and name an event, and pass the acquired data from the bot into that event. I then create an event listener that validates the data by checking if the received data is an event type and a postBackArg value of 'true' (this value should be passed from the bot as a string and validated as a string). If both checks pass, then the console message is posted with the values. The store is then passed into renderWebChat.
const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {
const event = new Event('incomingActivity');
event.data = action.payload.activity;
window.dispatchEvent(event);
}
return next( action );
} );
window.addEventListener('incomingActivity', ({ data }) => {
const type = data.type;
if (type === 'event' && data.channelData.data.postBackArg === 'true') {
console.log('DATA ', data);
const resultDetails = data.channelData.data.value;
const args = data.channelData.data.postBackArg;
console.log(`Received a message from the bot (${resultDetails}) with argument value ${args}.`);
}
} );
window.WebChat.renderWebChat( {
directLine: directLine,
store
}, document.getElementById( 'webchat' ) );
document.querySelector( '#webchat > *' ).focus();
Here, you can see the data has successfully been passed from the bot to the page which, as specified in the incomingActivity event listener, only occurs if the correct data properties were passed and successfully validated.
Unless I'm much mistaken, at this point you should be good to go!
Hope of help!