Open outlook when emaill address was clicked

[Al-jhon]

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.

[Al-jhon · Accepted solution]

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:

[Al-jhon · Accepted solution]

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:

[Ankur Bawiskar]

@Al-jhon 

can you share the detailed steps so that it helps other members?

[Al-jhon · Accepted solution]

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:

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

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

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:

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