We are sending adaptive card to user from MS teams Application using call graph APIs. While sending card we observed empty space on top of the card. See image below.
Below is what we are passing to API as payload. Document
{
attachments: [{
id,
contentType: 'application/vnd.microsoft.card.adaptive',
contentUrl: null,
content: JSON.stringify(card),
name: null,
thumbnailUrl: null
}],
body: { contentType: 'html', content }
}
We tried different way by giving subject to main object also name inside attachment but nothing is working out. I would like to know how we can give text on the header part or if it's not possible how we can completely rid off it.
Engineering team has confirmed this is because the card is being sent by Graph API, there is no app associated with Graph API, and thus no app attribution is shown on the card.
Here is the document on how to specify TeamsAppId to fix this https://learn.microsoft.com/en-us/graph/api/chatmessage-post?view=graph-rest-beta&tabs=http#example-10-send-message-that-contains-cards-that-are-attributed-to-a-teams-app
Please note that this is still in beta version.
Related
Using Microsoft Graph REST API, we create an Outlook calendar event
Focus on the body attribute:
{
...,
"body": {
"contentType": "text",
"content": "Test\n\nTest"
}
}
We would expect the event's description, as shown in Outlook Calendar and in Teams Calendar (Microsoft Teams > Calendar tab), to then be:
Test
Test
This is the case in Outlook calendar (outlook.com). However, in Teams Calendar, it displays as:
Test Test
We've also tried \r\nTest\r\n\r\nTest\r\n with the same result.
How can we have linebreaks in the description/body of the event we create, correctly displayed in Outlook and Teams?
According to the itemBody documentation of the event, you can also add it as html. Then you'll know for sure how it's is going to look.
{
"body": {
"contentType": "html",
"content": "<h1>test</h1><br />\n<p>test</p>"
}
}
Keep in mind that not all html is supported, but it should get you a long way. And "nice" html isn't really a requirement, so this would also work:
test<br />\ntest
Simply change the contentType to HTML but use the exact text you have.
Based on my experiments this works correctly in both teams and outlook
I have configured directline channel to Microsoft bot framework v4 with node js. I have suggested actions in welcome message. when I clicked any suggested action it disappear in UI but its response receiving to bot.
var msg = MessageFactory.suggestedActions(
CardFactory.actions([
{
type: 'messageBack',
title: 'xyz',
value: 'xyzDialog'
}]),'please select choice');
await context.sendActivity(msg);
could you please guide me how can I make it appear clicked suggested action to end user?
Thanks in advance.
As per the documentation here:
Unlike buttons that appear within rich cards (which remain visible and accessible to the user even after being tapped), buttons that appear within the suggested actions pane will disappear after the user makes a selection. This prevents the user from tapping stale buttons within a conversation and simplifies bot development (since you will not need to account for that scenario).
So in short, you cannot achieve your desired outcome with suggested actions. You have a couple of options:
Handle the suggest action in your bot code and send a reply back to the user thanking them for their input (and potentially repeating their input back to them "thank you for selecting X").
Using a CardAction instead, as per this dated sample.
Use an adaptive card (the new way), there is a sample available here, along with a detailed guide.
The downside of the last two approaches is that users will be able to repeatedly click on these buttons so your bot must handle multiple submissions in the backend.
For information on Suggest action using button.
var msg = MessageFactory.suggestedActions(['x', 'y', 'z'], 'please select choice?');
await turnContext.sendActivity(msg);
also suggestedActions need IEnumerable<CardAction> see MessageFactory.SuggestedActions Method the code will be
var msg = MessageFactory.SuggestedActions(
new CardAction[]
{
new CardAction(title: "x", type: ActionTypes.ImBack, value: "x"),
new CardAction( title: "y", type: ActionTypes.ImBack, value: "y"),
new CardAction(title: "z", type: ActionTypes.ImBack, value: "z")
}, text: "please select choice");
// Send the activity as a reply to the user.
await context.SendActivity(msg);
Multiple questions about Bot Framework V4.
Change the input field place holder text
Change the status message
Auto scroll on new message
On new message, chat bot is not scrolling down.
This issue is already asked here - 'Auto scroll' not working On Microsoft-bot-Framework (Python SDK based)
https://github.com/Microsoft/BotFramework-WebChat/issues/1031#issuecomment-459397736
Tried the workaround solution for web chat, but with adaptive cards taking some time to load, this solution doesn't scroll down fully.
Added a timeout of 3 sec, it works, but not ideal solution as there is a lag in scroll.
My Adaptive cards json is added to https://www.qnamaker.ai/, is that the reason for delay in loading?
You can change the sendBox default text by accessing the property via store, like so:
const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => async action => {
store.dispatch({
type: 'WEB_CHAT/SET_SEND_BOX',
payload: { text: 'You got this!'}
});
});
The ability to customize the timestamp is, at this time, still a feature request. If this feature would be valuable to you, I would suggest you upvote and/or add your voice to the conversation.
My strong suspicion is, yes, the lag on rendering the adaptive card is due to QnAMaker. Or, more specifically, due to an API call and needing to wait for the returned result.
I have embedded a video into my site using the Ziggeo API. I am using Handlebars to populate the token to the ziggeo player:
<ziggeo id="zideo_player" ziggeo-width="560" ziggeo-height="315" ziggeo-playonclick="true" ziggeo-video={{this.token}}>
</ziggeo>
I know that the token is getting there because I can see it in the inspector.
The weird thing is, when I go into the inspector and change from ziggeo to ziggeoplayer, the video will show, but when I push those changes to Heroku, it again doesn't show.
It's as if the player is loading before the token is received and only by changing the name can I re-send the token.
This turned out to be an asynch (asynchronization) issue. The video was trying to load before it could send and receive information from Ziggeo's API. To solve this, I used a separate js file and then appended the video information after the document loaded.
After some more thought, I might have also been able to fix this by placing the Ziggeo API information at the bottom of the body in the index.handlebars file instead of in the head. I didn't have a chance to try this since the above trick worked, but it would probably look cleaner if it did.
v1 and v2 should both work on Heroku.
Benjamin, can you try replacing that HTML embedding code with JS code, which could then be delayed if really needed.
For example of same code in JS:
<script>
//ZiggeoAPI will work only with v1-rXY/ziggeo.js v2- will require v2 app to be created and code would look just a bit different
ZiggeoApi.Events.on("system_ready", function() {
var player = new ZiggeoApi.V2.Player({
element: document.getElementById("your_element_ID"),
attrs: {
width: 560,
height: 315,
theme: "modern",
themecolor: "red",
playonclick: true,
video: "{{this.token}}"
}
});
player.activate();
});
</script>
This would only fire once the Ziggeo system is loaded and ready. This means that it fires after the DOM is ready and page loaded so it should be before the {{this.video}} is available.
My website, http://www.joaniesgifts.co.uk, includes the like button on the product pages. However, I've found that certain product pages are using the incorrect image when a user likes the page. This page is an example.
I think this may have been down to an original incorrect setup which is now corrected. However, the problem remains...
The only thing I have to go on is if I use the Facebook URL linter on the above product page I receive the following error.
Object at URL 'http://www.joaniesgifts.co.uk/terramundi-money-pot-holiday-fund' of type '213689662010141:product' is invalid because the domain 'www.joaniesgifts.co.uk' is not allowed for the application id '213689662010141' which owns the specified object type. If you are the owner of this application, you can verify your configured 'Site Domain' at developers.facebook.com/apps/213689662010141.
(I have verified my site's domain)
Everything else appears fine except it is also showing the wrong image! However, under Raw Open Graph Document Information it has the correct link!
If I then click Graph API - http://graph.facebook.com/10150450766583352 - it again shows the wrong image was linked!
What else could I do?
Also: The Graph API shows the incorrect image after a scrape only minutes ago.
{
"url": "http://www.joaniesgifts.co.uk/terramundi-money-pot-holiday-fund",
"type": "website",
"title": "Terramundi Money Pot - Holiday Fund",
"image": [
{
"url": "http://www.joaniesgifts.co.uk/index.php?route=product\u00252Fproduct\u00252Fcaptcha"
}
],
"updated_time": "2011-11-11T18:54:38+0000",
"id": "10150450766583352"
}
As this is an apparent bug in Facebook, I have gotten around this by removing the Open Graph type: product from the Facebook meta tags. At least the page works now and links the right images!