Forum Discussion
Abhi1222
Feb 28, 2024Copper Contributor
How to display an img tag in html
Hi folks, I am trying to read group chat messages from MS GRAPH API where one of the message body content is an screenshot which returns the following <p> </p> <p><img alt="image" src="...
- Mar 05, 2024Hello Abhi1222 - You please use Get chatMessageHostedContent to get the hosted contents.
Reference doc: https://learn.microsoft.com/en-us/graph/api/chatmessagehostedcontent-get?view=graph-rest-1.0&tabs=http
ChetanSharma-msft
Microsoft
Mar 03, 2024Hello Abhi1222 - Please confirm if your issues has resolved?
If not, could you please share the complete code, so that we can try to repro it from our end?
If not, could you please share the complete code, so that we can try to repro it from our end?
Abhi1222
Mar 03, 2024Copper Contributor
Still have the issue.
onPressChat: async function (oEvent) {
const chatId = "Your CHAT ID";
const getAllMessages = await this.getMyChatMessages(graphClient, chatId);
this.getView().getModel('peopleListModel').setProperty('/selectedChatId', chatId);
console.log(getAllMessages);
const messagesArray = []
for (let messages of getAllMessages.value) {
if (messages.messageType === "message") {
var pic = await this.getPhoto(graphClient, messages.from.user.id);
if (messages.attachments.length > 0) {
for (var attachment of messages.attachments) {
if (messages.attachments.contentType === "reference") {
messagesArray.push({
bodyContent: '<p> ' + messages.body.content + '</p> <a href=\"' + attachment.contentUrl +
'\" style=\"color:green; font-weight:600;\">' + attachment.name + '</a>',
createdDateTime: new Date(messages.createdDateTime),
fromUser: messages.from.user,
displayPic: pic
})
}
}
} else {
messagesArray.push({
bodyContent: messages.body.content,
createdDateTime: new Date(messages.createdDateTime),
fromUser: messages.from.user,
displayPic: pic
})
}
}
}
console.log(messagesArray);
// Sort the array in descending order by date using regular functions
const sortedData = messagesArray.sort(function (a, b) {
return a.createdDateTime - b.createdDateTime;
});
this.getView().getModel('peopleListModel').setProperty('/feedItemsCollection', messagesArray);
},
I am reading the messages as below
getMyChatMessages: async function (graphClient, chatId) {
this.ensureScope('chat.readwrite.all');
return await graphClient
.api('/me/chats/' + chatId + '/messages').top(50)
.get();
},
In one of the message i have a screenshot sent from MS Teams ..
to be precise it return as below
"<p> </p>
<p><img alt="image" src="https://graph.microsoft.com/v1.0/chats/"Your CHAT ID"/messages/1709011814869/hostedContents/aWQ9eF8wLWV1cy1kNS1kYTkzYmM0YWZiYmUyZmEyZjAyN2YzYzk2MGQ3MWI4Nyx0eXBlPTEsdXJsPWh0dHBzOi8vdXMtYXBpLmFzbS5za3lwZS5jb20vdjEvb2JqZWN0cy8wLWV1cy1kNS1kYTkzYmM0YWZiYmUyZmEyZjAyN2YzYzk2MGQ3MWI4Ny92aWV3cy9pbWdv/$value" width="378.83141762452107" height="250" itemid="0-eus-d5-da93bc4afbbe2fa2f027f3c960d71b87" style="vertical-align:bottom"></p>
<p> </p>"
Thanks,
Abhinay
- ChetanSharma-msftMar 05, 2024
Microsoft
Hello Abhi1222 - You please use Get chatMessageHostedContent to get the hosted contents.
Reference doc: https://learn.microsoft.com/en-us/graph/api/chatmessagehostedcontent-get?view=graph-rest-1.0&tabs=http