Populate search result to Contact Card in UI Builder

Al-jhon
Kilo Sage

Hello. anyone can help me how to fetch or populate information from search input (sys_user) and display it to the Contact card?

Aljhon_0-1736826813053.png

 

1 ACCEPTED SOLUTION

Al-jhon
Kilo Sage

I was able to do this by making a data resource (look up single record).
I created a Client State where I can get the table and sysId of the search user.

Aljhon_0-1738196199046.png


and on the Contact Card Connfiguration:

Aljhon_1-1738198396294.png


I used script to display dynamic value on the contact card:

  var contact = [
    {"label": "Email","value": 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;
}



View solution in original post

2 REPLIES 2

Community Alums
Not applicable

Hi @Al-jhon ,

Please follow this Article which will be your starting point :

https://www.servicenow.com/community/hrsd-articles/adding-additional-data-points-to-the-employee-inf...

 

Al-jhon
Kilo Sage

I was able to do this by making a data resource (look up single record).
I created a Client State where I can get the table and sysId of the search user.

Aljhon_0-1738196199046.png


and on the Contact Card Connfiguration:

Aljhon_1-1738198396294.png


I used script to display dynamic value on the contact card:

  var contact = [
    {"label": "Email","value": 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;
}