Microsoft Teams Adaptive Card - Dark Mode Color Issue - node.js

I am trying to develope a simple messagaging extension app for Microsoft Teams. With the use of Task Modules I can load a simple Adative Card. Works as designed. The only problem I have with it, is that my Adaptive Card has a color issue withing Microsoft Teams in Dark Mode.
Take a look at the image below. 1 shows a very simple Adaptive Card designed via https://adaptivecards.io/designer/ (preview mode). 2 the very same Adaptive Card but now an actual snippet from Microsoft Teams. As you can see the card below has some color issues which makes the input hard to see.
Here is the code I've used:
public async handleTeamsMessagingExtensionFetchTask(
context: TurnContext,
action: any
): Promise<any> {
const adaptiveCard = CardFactory.adaptiveCard({
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "${title}"
},
{
"type": "Input.Text",
"placeholder": "Placeholder text"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
});
return {
task: {
type: 'continue',
value: {
card: adaptiveCard,
height: 535,
title: '${title}',
url: null,
width: 500
}
}
};
}

There's not much that can be done about the input box itself in this case, but maybe try changing the colour of the label above it, something like this (I've changed some of your property names as well, as they were invalid case - things like "medium" instead of "Medium":
"size": "medium",
"weight": "bolder",
"text": "${title}",
"color": "good"
Color allows the following values:
"default"
"dark"
"light"
"accent"
"good"
"warning"
"attention"

If you nest your Text input into a Container, you are able change the Container's style to provide a coloured background upon which the Text input sits.
It's not necessarily right for your use case, but it could be a workaround of interest
Container Style colour options
{
"type": "Container",
"style": "emphasis",
"bleed": true,
"items": [
{
"type": "TextBlock",
"text": "Request New Ticket",
"wrap": true,
"fontType": "Default",
"style": "heading",
"size": "Large",
"color": "Good",
"weight": "Bolder",
"horizontalAlignment": "Center"
}
]
}

Related

MS teams adaptive card not sending input text value on submit

I am 500% sure it used to work and all of a sudden this is broken. The card for getting input is no longer passing the value back to nodejs.
The card looks like below:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Note text"
},
{
"type": "Input.Text",
"placeholder": "Type a note",
"isMultiline": true,
"id": "noteIdVal"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Save",
"data": { "action" : "add_note", "objNumber": objId, "objType": objectType }
},
{
"type": "Action.Submit",
"title": "Cancel",
"data" : {"action": "cancel"}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
On the submit action, in my nodejs i am getting the data in the values node which are passed in the data field. However, it is no longer attaching noteIdVal. Did something changed from MS side?
MS Teams Adaptive card required special property with the name msteams to the object in an object submit action’s data property in order to access this functionality.
{
"type": "Action.Submit",
"title": "Click me for messageBack",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "I clicked this button",
"text": "text to bots",
"value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
},
"extraData": {}
}
}
The type property is "messageBack" the submit action will behave like a messageBack card action, which is like a combination of imBack and postBack.
Reference :
Microsoft Docs for MS Teams Adaptive Card
So, may be useful to other folks here. I have two showCards and the content of both the show cards has a common text field with same id name "noteIdVal". As ultimately it is a single json and hence was the culprit.
Lesson, have all fields unique id values which is easy to miss when you have multiple show cards

How to correctly use LUIS ML-features?

I just stumbled over the new "ML-features" in LUIS and I am not sure if I really understand how to use them correctly. The documentation seems very abstract and vague to me:
https://learn.microsoft.com/de-de/azure/cognitive-services/luis/luis-concept-feature
Besides a good general explanation a solution for the following example would be very welcome:
Example
Intent: OpenABox
Sample utterances: "open the green box", "open the azure box".
Entity: ColorEntity (no prebuilt entity).
The color should understand "green", "blue", "azure" and "olive", where "olive" should be regarded as synonym to "green" and "azure" to "blue".
Solution Proposal
I assume you would have to
Add an intent
Add a list-entity, that lists all colors and assigns their synonyms?
Add a phrase list, that again lists some, but maybe not all, colors, without respect to their meaning?
Make the ML-feature global?
Mark the values as interchangable?
Add a ML-entity, and assign the list entity as well as the phrase list as features?
Make the list-entity-feature required?
Add sample utterances and mark the entities with the list-entity? Or with the ML-entity? Or both?
Add the ML-Entity as feature to the intent? Or the phrase list? Or the list-entity? Or none at all?
Is it correct, that there is no way to confirm the correct resolution of "olive" to its canonical form "green" using the test panel? So I have to use the API to test this?
The Model
This model has been created as described above. It seems to do its job. But is this really the optimal way to do it? There seems to be a lot of redundancy in there.
{
"luis_schema_version": "7.0.0",
"intents": [
{
"name": "None",
"features": []
},
{
"name": "OpenABox",
"features": [
{
"modelName": "ColorMLEntity",
"isRequired": false
}
]
}
],
"entities": [
{
"name": "ColorMLEntity",
"children": [],
"roles": [],
"features": [
{
"featureName": "ColorPhraseList",
"isRequired": false
},
{
"modelName": "ColorListEntity",
"isRequired": true
}
]
}
],
"hierarchicals": [],
"composites": [],
"closedLists": [
{
"name": "ColorListEntity",
"subLists": [
{
"canonicalForm": "green",
"list": [
"olive"
]
},
{
"canonicalForm": "blue",
"list": [
"azure"
]
}
],
"roles": []
}
],
"prebuiltEntities": [],
"utterances": [
{
"text": "open the azure box",
"intent": "OpenABox",
"entities": [
{
"entity": "ColorMLEntity",
"startPos": 9,
"endPos": 13,
"children": []
}
]
},
{
"text": "open the green box",
"intent": "OpenABox",
"entities": [
{
"entity": "ColorMLEntity",
"startPos": 9,
"endPos": 13,
"children": []
}
]
}
],
"versionId": "0.1",
"name": "ColorTest",
"desc": "",
"culture": "en-us",
"tokenizerVersion": "1.0.0",
"patternAnyEntities": [],
"regex_entities": [],
"phraselists": [
{
"name": "ColorPhraseList",
"mode": true,
"words": "green,blue,azure,olive",
"activated": true,
"enabledForAllModels": false
}
],
"regex_features": [],
"patterns": [],
"settings": []
}
Features are supposed to be signals relevant to an intent, or an entity.
So for this example,
Create an ML entity "ColorEntity",
Label the utterances
Add ColorEntity as a feature for the intent
Then you can add a feature to ColorEntity, either a list entity or phrase list, no need for both.

How to show compact style input Choice set options(radio buttons) in single line?

I am using adaptive card version 1.2.6 for MS Teams bot integration. As per my UI Requirements, I need to display compact style choice set options in a single line. But adaptive card designers displaying horizontally. Is it possible to show options in a single line(vertically)?
Design JSON:
{
"spacing": "Small",
"id": "leave_duration",
"placeholder": "Leave Duration",
"type": "Input.ChoiceSet",
"style": "expanded",
"isMultiSelect": true,
"choices": [
{
"title": "First Half",
"value": "First Half"
},
{
"title": "Second Half",
"value": "Second Half"
},
{
"title": "Full Day",
"value": "Full Day"
}
],
"separator": true
}

How to set colors for buttons on slack using slack API

I'm trying to set other styles for slack buttons besides the default 3:
- primary (green)
- danger (red)
- default (grey)
I would like to set other colors for the buttons for example orange.
I'm aware that it's possible to set custom colors for attachments by specifying hexcodes.
Is there a way to specify custom colors for slack buttons?
Here's what I tried:
{
"text": "Please rate this trip.",
"attachments": [
{
"callback_id": "rate_trip",
"color": "#3AA3E3",
"attachment_type": "default",
"actions": [
{
"name": "yes",
"text": "yes :thumbsup:",
"type": "button",
"value": "yes",
"style": "primary"
},
{
"name": "no",
"text": "no :thumbsdown:",
"type": "button",
"value": "no",
"style": "danger"
},
// I'd like to make the style for this to be orange but it defaults to grey.
{
"name": "maybe",
"text": "maybe :neutral_face:",
"type": "button",
"value": "maybe",
"style": "#FFA500",
}
}
]
}
]
}
Here's a screenshot of the outcome of this code.
No. Slack does not allow you do use custom colors for buttons. As you mentioned you can only use "styles" (in the style field) to color a button and are limited to default, primary and danger.
See here for the official documentation on this very topic.

how to implement algolia autocomplete on a single index, but i want results to show based on facets

I have an index on algolia, each document like this.
{
"title": "sample title",
"slug": "sample slug",
"content": "Head towards Rajinder Da Dhaba for some insanely delicious Kebabs!!",
"Tags": ["fashion", "shoes"],
"created": "2017-03-30T12:10:08.815Z",
"city": "delhi",
"user": {
"_id": "58b6f3ea884fdc682a820dad",
"description": "Roughly, somewhere between insanity and zen. Mostly the guy at the window seat!",
"displayName": "Jon Doe"
},
"type": "Post",
"places": [
{
"name": "Rajinder Da Dhaba",
"slug": "Rajinder-Da-Dhaba-safdarjung-9e9ffe",
"location": {
"_geoloc": [
{
"name": "Safdarjung",
"_id": "59611a2c2094b56a39afcbce",
"coordinates": {
"lng": 77.2030268,
"lat": 28.5685586
}
}
]
}
}
],
"objectID": "58dcf5a0355b590560d6ad68",
}
I want to implement autocomplete on this.
However, when i see the demos present in algolia dashboard, i found out that it returns the complete documents.
I want to only match on user.displayName, place.name, and title
and return only these fields as suggestions in the autocomplete results instead of complete documents, which match.
I know I can create separate indexes for users, places;
But is this possible with only a single index??
Did you had a look at http://algolia.com/doc/tutorials/search-ui/autocomplete/auto-complete/ ?
It shows how to have a custom display from an index.
To match on on user.displayName, place.name, and title
you can configure the "searchable attributes" from the algolia dashboard.

Resources