Open outlook when emaill address was clicked

Go to solution
Al-jhon
Kilo Sage

‎02-10-2025 10:17 PM

Hello All, 

The email address is clickable but there is no action to open Outlook application when being clicked.

Please help to advise.

my JSON code in Contact Card component:

/**
  * @Param {params} params
  * @Param {api} params.api
  * @Param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
  var contact = [
    {
      "label": "Email",
      "value": "mailto:" + api.data.look_up_a_single_record_1.result.email.displayValue,
      "clickable": true,
    },
    {
      "label": "Business Phone",
      "value": api.data.look_up_a_single_record_1.result.phone.displayValue,
      "clickable": true
    },
    {
      "label": "Mobile Phone",
      "value": api.data.look_up_a_single_record_1.result.mobile_phone.displayValue,
      "clickable": true
    },
    {
      "label": "PVN",
      "value": api.data.look_up_a_single_record_1.result.u_pvn.displayValue,
      "clickable": true
    }
  ];
  return contact;
}





Contact Card displays information below but when i clicked email address, outlook is not opening to compose new mail.

Aljhon_0-1739254623745.png

 

0 Helpfuls
  • 854 Views
2 ACCEPTED SOLUTIONS

Go to solution
Al-jhon
Kilo Sage

‎02-17-2025 10:07 PM

Hello everyone,

I achieved my goal to open an external application using the event "Link to destination".

I used the external URL and formulate the destination url below:

Aljhon_0-1739858819435.png

 

View solution in original post

0 Helpfuls

Go to solution
Al-jhon
Kilo Sage
In response to Ankur Bawiskar

‎02-26-2025 03:45 PM

Hello @Ankur Bawiskar , sure see below:

First: I modified the content that I want to display in Contact Card component via script:
in the script, i stored the value of email and pvn in attributes.

/**
  * @param {params} params
  * @param {api} params.api
  * @param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {

  var upvn = api.data.lookup_for_sys_user.result.u_pvn.displayValue;
  var uname = api.data.lookup_for_sys_user.result.user_name.displayValue;
  var uemail = api.data.lookup_for_sys_user.result.email.displayValue;

  var contact = [
      {
      "label": "Email",
      "value": api.data.lookup_for_sys_user.result.email.displayValue,
      "clickable": true
      },
      {
      "label": "Teams Chat",
      "value": uname,
      "clickable": true,
      "attributes": {"value": uemail} // store the email in attributes
      },
    {
      "label": "Business Phone",
      "value": api.data.lookup_for_sys_user.result.phone.displayValue,
      "clickable": false
    },
    {
      "label": "Mobile Phone",
      "value": api.data.lookup_for_sys_user.result.mobile_phone.displayValue,
      "clickable": false
    },
    {
      "label": "PVN",
      "value": api.data.lookup_for_sys_user.result.u_pvn.displayValue,
      "clickable": true,
      "attributes": {"value": upvn} // store the pvn in attributes
    }
];
  return contact;
}


THEN, in the event tab of contact card:

I choose "Link to Destination" > select destination > External URL:



Aljhon_1-1740612746097.png

 

I used IF function and CONCAT function (inside IF) to manipulate the app that will be open.

Aljhon_2-1740612887771.png


Btw, i put a script to log the event to get the proper dotwalking. sample below:

Aljhon_3-1740613089334.png

 



EVENT >>> {

    "elementId": "contact_card_2",

    "name": "SN_CONTACT_CARD#ITEM_CLICKED",

    "payload": {

        "item": {

            "label": "Email",

            "value": "juan.delacruz@email.com",

            "clickable": true

        }

    },

    "context": {},

    "eventInfo": {

        "sourceElementId": "cm71w31il00013j8vvwrf9e26"

    }

}

-------------------------------------------------------------------------

 SO in the contact card:

Aljhon_4-1740613366884.png

When user click the email address, it will open an external URL > mailto:User@emailaddress.com
and this will popup:

Aljhon_5-1740613493611.png

 

View solution in original post

0 Helpfuls
7 REPLIES 7

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron

‎02-10-2025 10:31 PM

@Al-jhon 

what happens currently when they click?

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader
0 Helpfuls

Go to solution
Al-jhon
Kilo Sage
In response to Ankur Bawiskar

‎02-10-2025 10:32 PM

Hello @Ankur Bawiskar , nothing happens.

0 Helpfuls

Go to solution
Ankur Bawiskar
Tera Patron
Tera Patron
In response to Al-jhon

‎02-10-2025 10:34 PM

@Al-jhon 

Not very sure but did you check this

Contact card UIB Setup 

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

Go to solution
Al-jhon
Kilo Sage
In response to Ankur Bawiskar

‎02-10-2025 10:46 PM

@Ankur Bawiskar , i checked this already but has no sample how to make event handlers when item clicked... i will do a research more about this. thank you for your time.

0 Helpfuls