我如何设置列表样式以强制将提示变为按钮?
我更喜欢按钮的外观而不是编号列表,但是瀑布对话框中提示的默认处理是在一定长度的内容后自动从按钮(默认)更改为编号列表。
我目前正在执行这样的提示:
return await step.prompt(FOCUS_AREA_PROMPT, {
prompt: 'Got it. Can you confirm the focus area this is for?',
choices: ChoiceFactory.toChoices(FOCUS_AREAS)
});
我已经尝试在此提示中添加样式属性,并且还尝试将其添加到addDialogs行this.dialogs.add(new ChoicePrompt(FOCUS_AREA_PROMPT));
,但我尝试过的任何操作都没有修改选项的行为。
我已经查看了MS文档中的ListStyle enum,但是我尝试将其添加到其中的任何方法都没有任何区别。有什么方法可以强制按钮而不管内容的长度如何?
回答如下:您可以通过以下方式设置选择提示,以实现所需按钮的外观。作为参考,您可以阅读有关forChannel
here的更多信息。根据您的需要进行更改。
希望帮助!
[编辑]
下面进行了更新,以表示可以组装选择提示的两种方式以及如何输出值(通过imBack
)。使用toChoices
时,相关的按钮值将在activity.text
和stepContext.result.value
中返回(作为Object
类型)。当使用forChannel
时,相关的按钮值将在activity.text
和stepContext.result
中返回(作为String
类型)。
如评论中所述,按钮标题长度具有字符限制,但是这是特定于通道的。在网络聊天中测试时,限制为20个字符。将FOCUS_AREAS
“ AI和机器学习”值(21个字符)调整为“ AI /机器学习”(19个字符)会导致选择显示为按钮而不是列表。
选项1:使用toChoices
async choiceStep ( stepContext ) {
const stepResult = stepContext.context.activity.text;
const FOCUS_AREAS = [ 'Chatbots', 'RPA', 'Blockchain', 'AR/VR', 'AI/Machine Learning' ]
if ( stepResult ) {
return await stepContext.prompt( CHOICE_PROMPT, {
prompt: 'Got it. Can you confirm the focus area this is for?',
choices: ChoiceFactory.toChoices( FOCUS_AREAS )
} );
}
}
activity:
{ type: 'message',
id: 'A50eelAPrFIHKv9XeCRm24-o|0000021',
timestamp: 2019-09-25T20:34:30.562Z,
serviceUrl: 'https://directline.botframework/',
channelId: 'directline',
from: [Object],
conversation: [Object],
recipient: [Object],
textFormat: 'plain',
locale: 'en-US',
text: 'Chatbots',
channelData: [Object] },
info:
{ index: 1,
options: {},
reason: 'endCalled',
result:
{ value: 'Chatbots', index: 0, score: 1, synonym: 'Chatbots' },
values: { instanceId: 'c10ed437-77eb-4502-cd24-e89d4c5e45cf' },
onNext: [AsyncFunction: onNext] }
选项2:使用
forChannel
async choiceStep ( stepContext ) {
const stepResult = stepContext.context.activity.text;
if ( stepResult ) {
const message = ChoiceFactory.forChannel(
stepContext.context, [
{ value: 'Chatbots', action: { type: 'imBack', title: 'Chatbots', value: 'Chatbots' } },
{ value: 'RPA', action: { type: 'imBack', title: 'RPA', value: 'RPA' } },
{ value: 'Blockchain', action: { type: 'imBack', title: 'Blockchain', value: 'Blockchain' } },
{ value: 'AR/VR', action: { type: 'imBack', title: 'AR/VR', value: 'AR/VR' } },
{ value: 'AI/Machine Learning', action: { type: 'imBack', title: '', value: 'AI/Machine Learning' }, text: 'AI/Machine Learning' },
], `Which do you choose?`
);
await stepContext.context.sendActivity( message );
}
return { status: DialogTurnStatus.waiting };
}
activity:
{ type: 'message',
id: 'Cw5xvHTv6RCDWf3kkyS3Ir-o|0000205',
timestamp: 2019-09-25T20:21:30.320Z,
serviceUrl: 'https://directline.botframework/',
channelId: 'directline',
from: [Object],
conversation: [Object],
recipient: [Object],
textFormat: 'plain',
locale: 'en-US',
text: 'Chatbots',
channelData: [Object] },
info:
{ index: 1,
options: {},
reason: 'continueCalled',
result: 'Chatbots',
values: { instanceId: '4becefed-88d2-773e-6184-91456609a26a' },
onNext: [AsyncFunction: onNext] }
我如何设置列表样式以强制将提示变为按钮?
我更喜欢按钮的外观而不是编号列表,但是瀑布对话框中提示的默认处理是在一定长度的内容后自动从按钮(默认)更改为编号列表。
我目前正在执行这样的提示:
return await step.prompt(FOCUS_AREA_PROMPT, {
prompt: 'Got it. Can you confirm the focus area this is for?',
choices: ChoiceFactory.toChoices(FOCUS_AREAS)
});
我已经尝试在此提示中添加样式属性,并且还尝试将其添加到addDialogs行this.dialogs.add(new ChoicePrompt(FOCUS_AREA_PROMPT));
,但我尝试过的任何操作都没有修改选项的行为。
我已经查看了MS文档中的ListStyle enum,但是我尝试将其添加到其中的任何方法都没有任何区别。有什么方法可以强制按钮而不管内容的长度如何?
回答如下:您可以通过以下方式设置选择提示,以实现所需按钮的外观。作为参考,您可以阅读有关forChannel
here的更多信息。根据您的需要进行更改。
希望帮助!
[编辑]
下面进行了更新,以表示可以组装选择提示的两种方式以及如何输出值(通过imBack
)。使用toChoices
时,相关的按钮值将在activity.text
和stepContext.result.value
中返回(作为Object
类型)。当使用forChannel
时,相关的按钮值将在activity.text
和stepContext.result
中返回(作为String
类型)。
如评论中所述,按钮标题长度具有字符限制,但是这是特定于通道的。在网络聊天中测试时,限制为20个字符。将FOCUS_AREAS
“ AI和机器学习”值(21个字符)调整为“ AI /机器学习”(19个字符)会导致选择显示为按钮而不是列表。
选项1:使用toChoices
async choiceStep ( stepContext ) {
const stepResult = stepContext.context.activity.text;
const FOCUS_AREAS = [ 'Chatbots', 'RPA', 'Blockchain', 'AR/VR', 'AI/Machine Learning' ]
if ( stepResult ) {
return await stepContext.prompt( CHOICE_PROMPT, {
prompt: 'Got it. Can you confirm the focus area this is for?',
choices: ChoiceFactory.toChoices( FOCUS_AREAS )
} );
}
}
activity:
{ type: 'message',
id: 'A50eelAPrFIHKv9XeCRm24-o|0000021',
timestamp: 2019-09-25T20:34:30.562Z,
serviceUrl: 'https://directline.botframework/',
channelId: 'directline',
from: [Object],
conversation: [Object],
recipient: [Object],
textFormat: 'plain',
locale: 'en-US',
text: 'Chatbots',
channelData: [Object] },
info:
{ index: 1,
options: {},
reason: 'endCalled',
result:
{ value: 'Chatbots', index: 0, score: 1, synonym: 'Chatbots' },
values: { instanceId: 'c10ed437-77eb-4502-cd24-e89d4c5e45cf' },
onNext: [AsyncFunction: onNext] }
选项2:使用
forChannel
async choiceStep ( stepContext ) {
const stepResult = stepContext.context.activity.text;
if ( stepResult ) {
const message = ChoiceFactory.forChannel(
stepContext.context, [
{ value: 'Chatbots', action: { type: 'imBack', title: 'Chatbots', value: 'Chatbots' } },
{ value: 'RPA', action: { type: 'imBack', title: 'RPA', value: 'RPA' } },
{ value: 'Blockchain', action: { type: 'imBack', title: 'Blockchain', value: 'Blockchain' } },
{ value: 'AR/VR', action: { type: 'imBack', title: 'AR/VR', value: 'AR/VR' } },
{ value: 'AI/Machine Learning', action: { type: 'imBack', title: '', value: 'AI/Machine Learning' }, text: 'AI/Machine Learning' },
], `Which do you choose?`
);
await stepContext.context.sendActivity( message );
}
return { status: DialogTurnStatus.waiting };
}
activity:
{ type: 'message',
id: 'Cw5xvHTv6RCDWf3kkyS3Ir-o|0000205',
timestamp: 2019-09-25T20:21:30.320Z,
serviceUrl: 'https://directline.botframework/',
channelId: 'directline',
from: [Object],
conversation: [Object],
recipient: [Object],
textFormat: 'plain',
locale: 'en-US',
text: 'Chatbots',
channelData: [Object] },
info:
{ index: 1,
options: {},
reason: 'continueCalled',
result: 'Chatbots',
values: { instanceId: '4becefed-88d2-773e-6184-91456609a26a' },
onNext: [AsyncFunction: onNext] }