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
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-msft
Microsoft
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
Reference doc: https://learn.microsoft.com/en-us/graph/api/chatmessagehostedcontent-get?view=graph-rest-1.0&tabs=http