Adding hyperlink in adaptive card table

%3CLINGO-SUB%20id%3D%22lingo-sub-3272354%22%20slang%3D%22en-US%22%3EAdding%20hyperlink%20in%20adaptive%20card%20table%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3272354%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Team%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe%20have%20created%20a%20table%20in%20javascript%20using%20adaptive%20cards%2C(columnset)%20and%20in%20that%20table%2C%20we%20want%20to%20display%20some%20hyperlinks%2C%20but%20we%20are%20not%20able%20to%20achieve%20that%2C%20we%20are%20able%20to%20display%20those%20links%20as%20text%20but%20not%20as%20a%20hyperlink.%3C%2FP%3E%3CP%3EPlease%20find%26nbsp%3B%20below%20what%20we%20are%20able%20to%20achieve%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Mridul260_0-1648710743665.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F360220i57D2FCCC523F7993%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22Mridul260_0-1648710743665.png%22%20alt%3D%22Mridul260_0-1648710743665.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ewe%20want%20the%20highlighted%20part%20to%20be%20hyperlinks.%3C%2FP%3E%3CP%3EAlso%2C%20find%20the%20coding%20we%20have%20done%20to%20achieve%20this%3A%3C%2FP%3E%3CP%3Evar%20element%20%3D%20context.incident1%3B%3C%2FP%3E%3CP%3E%3CBR%20%2F%3Evar%20msg%20%3D%20%7B%3C%2FP%3E%3CP%3E%22attachments%22%3A%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22contentType%22%3A%20%22application%2Fvnd.microsoft.card.adaptive%22%2C%3C%2FP%3E%3CP%3E%22content%22%3A%20%7B%3CBR%20%2F%3E%22type%22%3A%20%22AdaptiveCard%22%2C%3CBR%20%2F%3E%22msTeams%22%3A%20%7B%20%22width%22%3A%20%22full%22%20%7D%2C%3CBR%20%2F%3E%22body%22%3A%20%5B%5D%2C%3C%2FP%3E%3CP%3E%22%24schema%22%3A%20%22%3CA%20href%3D%22http%3A%2F%2Fadaptivecards.io%2Fschemas%2Fadaptive-card.json%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Fadaptivecards.io%2Fschemas%2Fadaptive-card.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22version%22%3A%20%221.2%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%2F%2Ffor(var%20i%3D0%3Bi%3CELEMENT.LENGTH%3E%3C%2FELEMENT.LENGTH%3Evar%20body1%20%3D%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22ColumnSet%22%2C%3CBR%20%2F%3E%22columns%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22Column%22%2C%3CBR%20%2F%3E%22width%22%3A%22stretch%22%2C%3CBR%20%2F%3E%22items%22%3A%20%5B%3CBR%20%2F%3E%7B%3C%2FP%3E%3CP%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3C%2FP%3E%3CP%3E%22text%22%3A%20%22Incident%20Number%22%2C%3C%2FP%3E%3CP%3E%7D%2C%3C%2FP%3E%3CP%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22Column%22%2C%3CBR%20%2F%3E%22width%22%3A%22stretch%22%2C%3CBR%20%2F%3E%22items%22%3A%20%5B%3CBR%20%2F%3E%7B%3C%2FP%3E%3CP%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%22Description%22%2C%3C%2FP%3E%3CP%3E%7D%2C%3C%2FP%3E%3CP%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22Column%22%2C%3CBR%20%2F%3E%22width%22%3A%22stretch%22%2C%3CBR%20%2F%3E%22items%22%3A%20%5B%3CBR%20%2F%3E%7B%3C%2FP%3E%3CP%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%22Status%22%2C%3C%2FP%3E%3CP%3E%7D%2C%3C%2FP%3E%3CP%3E%5D%3CBR%20%2F%3E%7D%2C%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22Column%22%2C%3CBR%20%2F%3E%22width%22%3A%22stretch%22%2C%3CBR%20%2F%3E%22items%22%3A%20%5B%3CBR%20%2F%3E%7B%3C%2FP%3E%3CP%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%22Priority%22%2C%3C%2FP%3E%3CP%3E%7D%2C%3C%2FP%3E%3CP%3E%5D%3CBR%20%2F%3E%7D%2C%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22Column%22%2C%3CBR%20%2F%3E%22width%22%3A%22stretch%22%2C%3CBR%20%2F%3E%22items%22%3A%20%5B%3CBR%20%2F%3E%7B%3C%2FP%3E%3CP%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%22Resolver%20Group%22%2C%3C%2FP%3E%3CP%3E%7D%2C%3C%2FP%3E%3CP%3E%5D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22type%22%3A%20%22Column%22%2C%3CBR%20%2F%3E%22items%22%3A%20%5B%3CBR%20%2F%3E%7B%3C%2FP%3E%3CP%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22weight%22%3A%20%22bolder%22%2C%3CBR%20%2F%3E%22text%22%3A%20%22Ticket%20Link%22%2C%3C%2FP%3E%3CP%3E%7D%2C%3C%2FP%3E%3CP%3E%5D%2C%3C%2FP%3E%3CP%3E%7D%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CBR%20%2F%3E%5D%3C%2FP%3E%3CP%3E%7D%3B%3C%2FP%3E%3CP%3Efor(var%20i%3D0%3Bi%3CELEMENT.LENGTH%3E%3C%2FELEMENT.LENGTH%3E%3C%2FP%3E%3CP%3E%3CBR%20%2F%3E%3CBR%20%2F%3Ebody1.columns%5B0%5D.items.push(%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22width%22%3A%22auto%22%2C%3C%2FP%3E%3CP%3E%22text%22%3A%20element%5Bi%5D.number%2C%3CBR%20%2F%3E%7D)%3B%3CBR%20%2F%3Ebody1.columns%5B1%5D.items.push(%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22width%22%3A%22auto%22%2C%3C%2FP%3E%3CP%3E%22text%22%3A%20element%5Bi%5D.short_description%2C%3C%2FP%3E%3CP%3E%7D)%3B%3CBR%20%2F%3Ebody1.columns%5B2%5D.items.push(%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22width%22%3A%22auto%22%2C%3C%2FP%3E%3CP%3E%22text%22%3A%20element%5Bi%5D.state%2C%3C%2FP%3E%3CP%3E%7D)%3B%3CBR%20%2F%3Ebody1.columns%5B3%5D.items.push(%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22width%22%3A%22auto%22%2C%3C%2FP%3E%3CP%3E%22text%22%3A%20element%5Bi%5D.priority%2C%3C%2FP%3E%3CP%3E%7D)%3B%3CBR%20%2F%3Ebody1.columns%5B4%5D.items.push(%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3CBR%20%2F%3E%22width%22%3A%22auto%22%2C%3C%2FP%3E%3CP%3E%22text%22%3A%20element%5Bi%5D.u_resolver_group%2C%3C%2FP%3E%3CP%3E%7D)%3B%3C%2FP%3E%3CP%3E%3CBR%20%2F%3Ebody1.columns%5B5%5D.items.push(%7B%3CBR%20%2F%3E%22type%22%3A%20%22TextBlock%22%2C%3CBR%20%2F%3E%22separator%22%3Atrue%2C%3C%2FP%3E%3CP%3E%22width%22%3A%22auto%22%2C%3C%2FP%3E%3CP%3E%22text%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fepiroctest.service-now.com%2Fep%3Fid%3Dticket%26amp%3Btable%3Dincident%26amp%3Bview%3Dsp%26amp%3Bsys_id%3D%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fepiroctest.service-now.com%2Fep%3Fid%3Dticket%26amp%3Btable%3Dincident%26amp%3Bview%3Dsp%26amp%3Bsys_id%3D%3C%2FA%3E%22%2Belement%5Bi%5D.sys_id%3C%2FP%3E%3CP%3E%7D)%3B%3C%2FP%3E%3CP%3E%7D%3CBR%20%2F%3Emsg.attachments%5B0%5D.content.body.push(body1)%3B%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3Eprint(JSON.stringify(msg))%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPlease%20let%20me%20know%20what%20can%20we%20do%20to%20achieve%20this.%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3272354%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EMicrosoft%20365%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
New Contributor

Hi Team,

 

We have created a table in javascript using adaptive cards,(columnset) and in that table, we want to display some hyperlinks, but we are not able to achieve that, we are able to display those links as text but not as a hyperlink.

Please find  below what we are able to achieve:

Mridul260_0-1648710743665.png

 

we want the highlighted part to be hyperlinks.

Also, find the coding we have done to achieve this:

var element = context.incident1;


var msg = {

"attachments":[
{
"contentType": "application/vnd.microsoft.card.adaptive",

"content": {
"type": "AdaptiveCard",
"msTeams": { "width": "full" },
"body": [],

"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2"
}
}
]
};

 

 

//for(var i=0;i<element.length;i++){
var body1 =
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width":"stretch",
"items": [
{

"type": "TextBlock",
"weight": "bolder",

"text": "Incident Number",

},

]
},
{
"type": "Column",
"width":"stretch",
"items": [
{

"type": "TextBlock",
"weight": "bolder",
"text": "Description",

},

]
},
{
"type": "Column",
"width":"stretch",
"items": [
{

"type": "TextBlock",
"weight": "bolder",
"text": "Status",

},

]
},

{
"type": "Column",
"width":"stretch",
"items": [
{

"type": "TextBlock",
"weight": "bolder",
"text": "Priority",

},

]
},

{
"type": "Column",
"width":"stretch",
"items": [
{

"type": "TextBlock",
"weight": "bolder",
"text": "Resolver Group",

},

]
},
{
"type": "Column",
"items": [
{

"type": "TextBlock",
"weight": "bolder",
"text": "Ticket Link",

},

],

},

 


]

};

for(var i=0;i<element.length;i++){



body1.columns[0].items.push({
"type": "TextBlock",
"separator":true,
"width":"auto",

"text": element[i].number,
});
body1.columns[1].items.push({
"type": "TextBlock",
"separator":true,
"width":"auto",

"text": element[i].short_description,

});
body1.columns[2].items.push({
"type": "TextBlock",
"separator":true,
"width":"auto",

"text": element[i].state,

});
body1.columns[3].items.push({
"type": "TextBlock",
"separator":true,
"width":"auto",

"text": element[i].priority,

});
body1.columns[4].items.push({
"type": "TextBlock",
"separator":true,
"width":"auto",

"text": element[i].u_resolver_group,

});


body1.columns[5].items.push({
"type": "TextBlock",
"separator":true,

"width":"auto",

"text": "https://epiroctest.service-now.com/ep?id=ticket&table=incident&view=sp&sys_id="+element[i].sys_id

});

}
msg.attachments[0].content.body.push(body1);



print(JSON.stringify(msg));

 

Please let me know what can we do to achieve this.

Thanks

0 Replies