how can i put a carousel in bot.on with bot framework? - frameworks

I have a chatbot with bot framework and I want to have this for my first message in bot.on but I don't know how can I do it.
Choose your language / Choisissez votre langue :
(img "flag french") | (img "flag english") | (img "flag spanish")
button "français" | button "english" | button "spanish"
bot.on('conversationUpdate', function (message) {
if (message.membersAdded) {
message.membersAdded.forEach((identity) => {
if (identity.id == message.address.bot.id) {
CODE HERE
}
});
}
});
Should I use a carousel with 3 card ? but I don't know how to do it in bot.on
Does anyone know how to do it ?

ok, I find it !
bot.on('conversationUpdate', function (message) {
if (message.membersAdded) {
message.membersAdded.forEach((identity) => {
if (identity.id == message.address.bot.id && message.source != 'skypeforbusiness') {
console.log(message);
bot.send(new builder.Message()
.address(message.address)
.text('Choose your language :')
);
setTimeout(function () {
bot.send(new builder.Message()
.address(message.address)
.attachmentLayout(builder.AttachmentLayout.carousel)
.attachments([
new builder.HeroCard()
.title()
.subtitle()
.text()
.images([builder.CardImage.create(null, '')])
.buttons([
builder.CardAction.imBack(null, "English", "English")
]),
new builder.HeroCard()
.title()
.subtitle()
.text()
.images([builder.CardImage.create(null, '')])
.buttons([
builder.CardAction.imBack(null, "Français")
]),
new builder.HeroCard()
.title()
.subtitle()
.text()
.images([builder.CardImage.create(null, '')])
.buttons([
builder.CardAction.imBack(null, "Español", "Español")
])
])
);
}, 1000);
}
});
}
});

Related

How can I print the table with the checkbox checked using react-data-grid?

When printing a table using react-data-grid
I am trying to make the background color of a specific row be blue and the checkbox to be checked.
code:
if (res) {
// alert("hi")
if (searchModalInit.excelColumnType === "toolProduct") {
setSearchList([...SearchResultSort(!column.noSelect ? [null, ...res] : res, searchModalInit.excelColumnType)])
setPageInfo({ page: res.page, total: res.totalPages });
Notiflix.Loading.remove()
} else
if (res.page !== 1) {
console.log("hihi");
setSearchList([...searchList, ...SearchResultSort(!column.noSelect ? [{ noneSelected: true }, ...custom_info_list] : custom_info_list, searchModalInit.excelColumnType)])
setPageInfo({ page: res.page, total: res.totalPages });
Notiflix.Loading.remove()
} else {
// console.log(custom_info_list)
// console.log("custom_info_list : ", custom_info_list);
console.log("selector.product_ids_for_selected_rows : ", selector.product_ids_for_selected_rows);
console.log("custom_info_list : ", custom_info_list);
let tmp: Set<any> = selectList
const new_rows = custom_info_list.map((row, index) => {
if (selector.product_ids_for_selected_rows.includes(row.product_id)) {
// alert("실행이 되나? : " + row.product_id)
tmp.add(row.product_id)
tmp.add(index)
return {
...row,
border: true
}
} else {
return {
...row
}
}
})
console.log("new_rows ::::", new_rows);
setSearchList([...SearchResultSort(!column.noSelect ? [{ id: null, noneSelected: false }, ...new_rows] : new_rows, searchModalInit.excelColumnType)])
Notiflix.Loading.remove()
}
}
color has been set
checkbox check doesn't work
let tmp: Set<any> = selectList
const new_rows = custom_info_list.map((row, index) => {
if (selector.product_ids_for_selected_rows.includes(row.product_id)) {
// alert("Is it running? : " + row.product_id)
tmp.add(row.product_id)
tmp.add(index)
If you know a way to make the checkbox of each row in the table be checked, please let me know. thank you
Reference:
https://github.com/adazzle/react-data-grid
test:

Ionic 4 ion-action-controller prevent auto close on button click

I am trying to show the list of language available as an Action sheet. But as soon as the language button is pressed the action sheet closes automatically. Is there any possible way to prevent the auto close of ion-action-sheet controller on clicking the ActionsheetButton.
async showChangeLangAlert() {
const actionSheet = await this.actionSheet.create(
{
header: this.translateText('Select language'),
buttons: this.getLanguageInputTypes(),
cssClass: 'confirmation-popup select-lang',
backdropDismiss: true,
mode: 'md'
}
);
actionSheet.present();
actionSheet.onWillDismiss().then(res => {
console.log(res);
event.preventDefault();
});
actionSheet.onDidDismiss().then(res => {
this.langChoosen.next(this.selectedLanguage);
});
}
private getLanguageInputTypes(): ActionSheetButton[] {
if (this.selectedLanguage === undefined) {
this.selectedLanguage = 'en';
}
return [
{
text: this.translateText('English'),
icon: (this.selectedLanguage.toLowerCase() === 'en') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'en') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'en';
}
},
{
text: this.translateText('German'),
icon: (this.selectedLanguage.toLowerCase() === 'de') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'de';
}
},
{
text: this.translateText('Select'),
icon: 'checkmark-circle',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.setSelectedLanguage();
}
}
];
}
private setSelectedLanguage() {
// close the action-sheet here
}
I want to achieve the manual close of the action-sheet controller, but it closes automatically on clicking any action button. What I am missing or is there any workaround to show the alert window as an action sheet?
the handler: ()=> returns to true after a button is clicked which dismisses the actionsheet. Returning false after the button is clicked in the handler() will keep the actionsheet in place.
handler: ()=>{
// assign selected language
this.selectedLanguage = 'en';
// then return false
return false;
}
backdropDismiss
Description
If true, the action sheet will be dismissed when the backdrop is clicked.
Attribute backdrop-dismiss
Type boolean
Default true
backdropDismiss:false

i want to do a dynamic form with v-if

I want to display an additional input if the person clicks yes and clicks on nothing
i try to do that with v-if but i the value never change
this is the entire page in vuejs maybe i need to do a method, i already try without quote and with, i to set value like club = 1 but didn't work to.
I'm not sure if my v-bind is good too
<el-form-item label="Possédez vous un club ?">
<el-radio-group v-model="ruleForm.club">
<el-radio label="Oui" v-bind:value="true"></el-radio>
<el-radio label="Non" v-bind:value="false"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="'ruleForm.club' == true" label="Nom du club" prop="nClub">
<el-input v-model="ruleForm.nClub" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" #click="submitForm('ruleForm')">Submit</el-button>
<el-button #click="resetForm('ruleForm')">Reset</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data () {
var validatePseudo = (rule, value, callback) => {
if (value === '' || value !== 'coach') {
callback(new Error('Please input the pseudo'))
} else {
callback()
}
}
var validatePass = (rule, value, callback) => {
if (value === '' || value !== 'password') {
callback(new Error('Please input the password'))
} else {
callback()
}
}
return {
ruleForm: {
nom: '',
prenom: '',
pseudo: '',
email: '',
pass: '',
statue: '',
club: '',
nClub: ''
},
rules: {
pseudo: [
{ validator: validatePseudo, trigger: 'blur' }
],
pass: [
{ validator: validatePass, trigger: 'blur' }
]
}
}
},
methods: {
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$router.push({
name: '/'
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm (formName) {
this.$refs[formName].resetFields()
},
}
}
</script>
I do not really understand your question, but from what I can tell you would like to add an inputfield if a user selects a certain radio button using v-if. I've recreated this in a jsfiddle. Is this wat your looking for?
Link: https://jsfiddle.net/Mertakus/8wx4h7up/3/

UI5 Messagebox synchron

Hi i implemented a Messagebox in a for loop, but i know the messagebox works asynchron.
I want that the programm wait for every loop to the desicion of the user.
onBook: function(oEvent) {
var that = this;
for (var i = 0; i < Items.length; i++){
function message(innerArg) {
sap.m.MessageBox.confirm(
"Text", {
icon : sap.m.MessageBox.Icon.INFORMATION,
title : "Really",
actions : [ sap.m.MessageBox.Action.YES,
sap.m.MessageBox.Action.NO ],
onClose : function(oAction) {
if (oAction === sap.m.MessageBox.Action.NO) {
delete(i);
}else{
}
}
});
}
message(i);
}
that.do(oEvent);
The programm jumps in the "do" method before a user action is done
Edit:
for (var i = 0; i < Items.length; i++){
(function (innerArg) {
sap.m.MessageBox.confirm(
"Delete?", {
icon : sap.m.MessageBox.Icon.INFORMATION,
title : "Delete",
actions : [ sap.m.MessageBox.Action.YES,
sap.m.MessageBox.Action.NO ],
onClose : function(oAction) {
if (oAction === sap.m.MessageBox.Action.NO) {
delete(innerArg)
}}
});
})(i);
}
that.Save(oEvent);
When the box is open the entries are booked because the programm goes to the save method without wating of user action Whats wrong ?
Ah, the asynchronous-function-in-a-synchronous-loop anti-pattern ;-)
You can try using closures:
for (var i = 0; i < items; i++) {
// use self-executing function here
(function(innerArg) {
sap.m.MessageBox.confirm(
"Text", {
onClose: function(oAction) {
if (oAction === sap.m.MessageBox.Action.NO) {
// here I want to do something
console.log("Value: ", innerArg);
}
}
}
);
})(i);
}
EDIT: Update with Promises
Based on your updated question, I have provided a more-or-less sorta-kinda working example (it may not work flawless, but it should show the design pattern you should follow)
You wrap the message box responses into a Promise resolve, and store these into an array. You then feed that array to Promise.all() in order to proceed with your save functionality
processData: function() {
var promises = [],
self = this;
for (var i = 0; i < items; i++) {
promises.push(this.doMessageboxAction(i));
}
Promise.all(promises).then(function(aData) {
aData.forEach(function(oData) {
self.save(oData);
});
}).catch(function(err) {
console.log(err);
});
}
doMessageboxAction: function(item) {
return new Promise(function(resolve, reject) {
sap.m.MessageBox.confirm(
"Text", {
onClose: function(oAction) {
if (oAction === sap.m.MessageBox.Action.NO) {
//do something
//etc
resolve(item); // or some other variable
}
else {
//do something else
//etc
resolve(item); // or some other variable
}
}
}
);
});
}

SAPUI5 Color text from a table / list cell

I want to change the color of the table cell, but I find it hard to transform the code to XMLView from JSView. Can you guys give me a hand ?
What I've managed so far, is to add the text of the color, but what I want is to color the text itself (or the background)
Here is the code:
<ObjectIdentifier
title="{Invoices>BillValue}"
text = "{parts : [ 'Invoices>InvoiceRest' ],
formatter: 'Invoices.Formatter.BillColor'
}"/>
And in the "formatter" (I don't know why it doesn't want to format the text bellow :( ):
jQuery.sap.declare("Invoices.Formatter");
Invoices.Formatter = {
BillColor : function (fValue1) {
try {
if (Number(fValue1) > 0) {
return "red";
} else {
return "green";
}
} catch (err) {
return "None";
} } };
Thanks
var iDtemplate = new sap.m.ColumnListItem("idTemplate",{
type: "Navigation",
visible: true,
selected: true,
cells:[
new sap.m.ObjectStatus({
text:"{SlNo}",
}).bindProperty("state", "number", function(value) {
return getStatusColor(value);
}),
new sap.m.ObjectStatus({
text:"{Name}",
}).bindProperty("state", "number", function(value) {
return getStatusColor(value);
}),
],
pressListMethod: function(event){
var bindingContext = event.getSource().getBindingContext();
}
});
function getStatusColor(status) {
if (status === '') {
return "Error";
}
else {
return "Success";
}
}
Based on the number field we are giving colors to columns Slno and Name.