I have to add multiple buttons on Card or Basic card. Is it possible ?
In dialog flow documentation, its mentioned there is one element buttons which takes array of element. Based on this I have added buttons like:
agent.add(new BasicCard({
title: body.hits.hits[i]._source.name,
formattedText: '',
image: {
url: body.hits.hits[i]._source.images ? body.hits.hits[i]._source.images[0].src : '',
accessibilityText: 'Logo',
},
buttons: [{
title: "Buy",
openUrlAction: {
url: body.hits.hits[i]._source.buy,
}
},{
title: "Add to Cart",
openUrlAction: {
url: body.hits.hits[i]._source.aad_to_card,
}
}
],
}));
But its throws error as below:
throw new Error(`Unknown response type: "${JSON.stringify(response)}"`);
Some places its mentioned buttons takes only one element. So what's the point of making it array ?
A BasicCard can only have one button. That is the current rule. I can't give a good reason on why it is in an array even if it only accepts one element.
Related
I have a message extension running in MS Teams.
The search list displays the Hero Card.
On selecting one of them it displays something like below in the chat.
Part of code that displays the button:
...
heroCard.content.buttons = [{
type: 'invoke',
title: 'Open Attachment',
value: {
type: "task/fetch",
messageId: "12345",
}
}];
I am looking to run my angular app on clicking Open Attachment which displays the documents.
I figured out the way to proceed using Microsoft Docs: Use task modules from bots
First I need to tweak the hero card button to pass my data.
...
heroCard.content.buttons = [{
type: 'invoke',
title: 'Open Attachment',
value: {
type: "task/fetch",
messageId: "12345",
data: attachments
}
}];
The second thing is to handle the fetch request:
async handleTeamsTaskModuleFetch(context, action) {
var attachments = action.data.data
return {
task: {
type: 'continue',
value: {
height: 400,
width: 400,
title: 'View Documents',
url: `https://example.io?data=${attachments}`
}
}
};
}
Note: the URL must be in the valid domain of the manifest - otherwise you'll see the blank page.
The below is the final output:
I create a chat bot using dialogflow and actions on google library. In the back-end code I have created function including if else. I added new suggestions in the "else if". That are not display in the actions on google simulator.Another suggestions are working. Only that time it is not displayed. Please give me some instructions for fixed that.
this is my code:
'use strict';
const functions = require('firebase-functions');
const {
dialogflow,
Suggestions,
Carousel,
Image,
Table,
List,
} = require('actions-on-google');
const app = dialogflow({debug: true});
// Constants for list and carousel selection
const Order_Food = 'order food';
const Extra_Product = 'extra product';
const Spa_Reservation = 'spa reservation';
const Restaurant_Booking = 'restaurant booking';
app.intent('user.provide_room_number', (conv) => {
conv.ask('Great! I can help you with the following. Please select
from the options below.');
//conv.ask(new Suggestions('Order Food', 'Extra Product',
'Restaurant', 'Spa'));
// Create a carousel
conv.ask(new Carousel({
items: {
// Add the first item to the carousel
[Order_Food]: {
synonyms: [
'order food',
'food',
],
title: 'Food',
description: 'Can order some food',
image: new Image({
url: 'http://www.restauranteelpalacete.com/wp-content/uploads/2018/01/Online-Food-Ordering.jpg',
alt: 'Food',
}),
},
// Add third item to the carousel
[Spa_Reservation]: {
synonyms: [
'spa',
'spa reservation',
],
title: 'Spa Reservation',
description: 'Can put the reservation on the spa.',
image: new Image({
url: 'https://res.klook.com/images/fl_lossy.progressive,q_65/c_fill,w_1295,h_720,f_auto/w_80,x_15,y_15,g_south_west,l_klook_water/activities/kykzulvt1t71kwhnmkik/OasisSpa.jpg',
alt: 'Spa',
}),
},
// Add fourth item to the carousel
[Restaurant_Booking]: {
synonyms: [
'restaurant',
'restaurant booking',
],
title: 'Restaurant',
description: 'Can put the reservation on the Restaurant.',
image: new Image({
url: 'https://cdn-image.foodandwine.com/sites/default/files/1501607996/opentable-scenic-restaurants-marine-room-FT-BLOG0818.jpg',
alt: 'Restaurant',
}),
},
},
}));
});
app.intent('actions_intent_OPTION-handler', (conv, params, option) => {
// Get the user's selection
// Compare the user's selections to each of the item's keys
if (!option) {
conv.ask('You did not select any item from the list or carousel');
} else if (option === 'order food') {
conv.ask(new SimpleResponse({speech:"Absolutely, have you decided what you like or you could go through the in room dinning menu. \n Do you need order Food.?",text:"Absolutely, have you decided what you like or you could go through the in room dinning menu. Do you need order Food.?"}));
conv.ask(new Suggestions(["Ok", "Done", "Thanks"]));
} else if (option === 'spa reservation') {
conv.ask(new Suggestions('Yes I need Spa.'));
conv.ask(`We have an excellent Spa that offer exquisite treatment packages. You can select one of the options. We have quite a few free slots today. Do you need information about that.`);
} else if (option === 'restaurant booking') {
conv.ask(`We have some dining options for you today. Do you want more information. `);
conv.ask(new Suggestions('I need restaurant.'));
} else {
conv.ask('You selected an unknown item from the list, or carousel');
}
});
You should design your conversation bot more efficiently.In second elseif condition, after a suggestion no further conversation should happen in an intent.Suggestion are for triggering intent. For your case best scenario would be to create a follow up intent.
Suggestion is not appearing in conversation because, in every rich response at least one simple response should be present. Try below code. Hope this helps you.
conv.ask(new SimpleResponse({speech:"Absolutely, have you decided what you like or you could go through the in room dinning menu. \n Do you need order Food.?",text:"Absolutely, have you decided what you like or you could go through the in room dinning menu. Do you need order Food.?"}));
conv.ask(new Suggestions(["Ok", "Done", "Thanks"]));
I'm sending a link button throught a Telegram bot and I would like to get the callback_data after the user opens the url.
My options are:
var options = {
parse_mode: "Markdown",
reply_markup: {
inline_keyboard: btns
}
};
where btns is
[
[{ text: "Read first", url: "http://any", callback_data: "any_relevant_data }]
]
The button shows perfectly, the link works, but no callback is triggered and I never hit
bot.on('callback_query', (callback_message) => { //any action });
Is this a missing feature or it's me, doing something wrong?
According to API Document, you can't use url and text in the same time.
This object represents one button of an inline keyboard.
You must use exactly one of the optional fields.
I know how to set the optionList on Initiliaztion but how do I set it programmatically?
I have an inviteList array:
$("#select-invite").options(inviteList);
You can use load method to set options via programmatic API. You may also want to call clear and clearOptions methods to reset selected values and old options.
Here is how to put it all together:
var selectize = $("#select-invite")[0].selectize;
selectize.clear();
selectize.clearOptions();
selectize.load(function(callback) {
callback(inviteList);
});
Please note that inviteList should be an array of objects that have properties configured in valueField and labelField options when select was initialized. For example, here is how inviteList should look like with default valueField and labelField options:
var inviteList = [
{
text: 'Option One',
value: 1
},
{
text: 'Option Two',
value: 2
}
];
As far as I know there's no method for adding multiple options through the API. You'll need to write a loop that uses the addOption() method. You'll need to get the control instance of selectize before trying to use the API. Take a look at the example below, from the Github examples:
// Create the selectize instance as usual
var $select = $('#select-tools').selectize({
maxItems: null,
valueField: 'id',
labelField: 'title',
searchField: 'title',
options: [
{id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
{id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
{id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
],
create: false
});
// Get the selectize control instance
var control = $select[0].selectize;
// Add the new option when a button is clicked
// Remove the click event and put the addOption call in a loop
$('#button-addoption').on('click', function() {
control.addOption({
id: 4,
title: 'Something New',
url: 'http://google.com'
});
});
From the Github examples.
I know this is an old question but as of 2021 I have found this to be the simplest way to achieve this:
Building on #byte255's answer above, you only need to use the clearOptions method and addOption method.
let selectize = $("#select-invite")[0].selectize;
selectize.clearOptions();
let newOptions = [
{
text: 'Option One',
value: 1
},
{
text: 'Option Two',
value: 2
}
]
selectize.addOption(newOptions);
I'm, trying to add a search box exactly as one on sencha docs home page http://docs.sencha.com/ext-js/4-0/
I used the code from the example
http://docs.sencha.com/ext-js/4-0/#!/example/form/forum-search.html
and everything works as expected except for one thing ..
when I select an option from a list in my search box the combobox value is set to the selected value .. and when I press arrow down button it performs a new search with modified query ..
but I just want to see the results of the previous search - exactly the behaviour of the search box on sencha page
any ideas how to achieve that ?
After trying various things the code below does what i need, but maybe there is a better way ..
I had to set triggerAction to 'query' and also had to manually reset the text of the combobox in the the select event handler
var searchBox = {
xtype: 'combo',
store: dataStore,
displayField: 'title',
valueField: 'id',
autoSelect: false,
typeAhead: false,
fieldLabel: 'Search for',
hideTrigger:true,
anchor: '100%',
mode:'remote',
triggerAction: 'query',
listeners: {
'select' : function(combo) {
var selected = this.value;
combo.setValue(combo.lastQuery);
showResult(selected);
}
},
listConfig: {
loadingText: 'Searching ...',
emptyText: 'No matching posts found.',
getInnerTpl: function() {
return '<a class="search-item" href="?term={id}" onclick="return javascript:showResult(\'{id}\')">' +
'<h3><span>{title}<br /></span>{id}</h3></a>';
}
},
pageSize: 10
}
You need first sample from this page. Type "A" first
http://docs.sencha.com/ext-js/4-0/#!/example/form/combos.html