Having a link to the message tab on the client profile page

Product Feature Requests
1

Organization: Medic + Aurum Institute + University of Washington

Ministry of Health - Direct to client communication to improve post-operative care for men undergoing voluntary male circumcision (VMMC)

What Other Organizations Would Benefit From This Feature: organisations/ applications with a messaging function

Describe the Feature: As a [CHV/Nurse/texting hub] is it possible to have a link to the message tab on the client’s profile page so that it is easier to navigate to a particular client’s message without having to scroll or search messages on the message tab side bar?

What “Pain Point” Does The Proposed Feature Address: [this addresses the inconvenience and time taken to search or scroll through the message tab to find a particular client’s message thread to view or respond to their messages which are currently arranged in order of the last message delivered; or using the send message option on the floating button to ensure that the particular clients message thread comes to the top]

Proposed Solution: [Having a link that would take the user directly to the client’s message thread on the message tab]

Do you have funding to cover external developers? No

Do You Have Resources (Designers, Developers, PMs) Available: No

Links To Supporting Information / Uploads: [feature specs or designs, examples of similar features etc]

2

Hi @Evelyn_Waweru … I think this should be possible today, but you’ll want to check with an app developer.

Messages Tab

The URL on the messages tab just looks something like this…

https://instance-name.org/#/messages/contact:6624f74d-f3b9-49a7-a675-a3a568794561

Where the UUID after contact: is the “client” whose profile you want to have a link from.

Contacts Tab

The URL on the contacts tab, when viewing a specific Contact’s profile, looks like this…

https://instance-name.org/#/contacts/6624f74d-f3b9-49a7-a675-a3a568794561

So from the Contact’s tab, I think you can probably add a field to your Contact Summary that takes the UUID of the Contact you are viewing, append it to the base link for the Messages tab (https://instance-name.org/#/messages/contact:<uuid>) and create a hyperlink to the Messages tab.

Have you tried something like this already?

3

Thank you Michael, Femi is trying out these options.

1 Like
4

Hi @Evelyn_Waweru / @Femi , any success here?

5

Hi @michael , I have not found a way to make links in the condition cards clickable. If this works, it will only solve a one-way trip from contact profile to messages; we still need to solve for messages to contact profile.

6

Thanks @Femi , I was thinking you’d do it from Contact Summary, not Condition Cards (though I’m not sure the difference matters). What was the problem you ran into?

Also, Link to Contact's Profile from Messages tab · Issue #8660 · medic/cht-core · GitHub will address messages → contact and is something we will be working on next.

7

Yes @michael, there are no differences; we will just pass arrays of label/value objects that CHT then figure out how to render internally. We can tell CHT how to format the values, lineage, date, age…etc, but the logic to render a string or HTML is not exposed, so the link will end up as a string, not clickable.

8

Gotcha, thanks @Femi . @Jennifer_Quesada any interesting workarounds you can think of to get a hyperlink on the Contact Summary? Would adding a pipe do the trick (and be easy)?

9

@michael, this will require coding on our behalf to add a pipe that will create a link to the contact’s messages.

10

OK… thanks @Jennifer_Quesada . I can’t really think of many other use cases for this since most users will be offline (so the link would really only link to somewhere else in the app), though perhaps others have some creative ideas?

We already have sections on the contact’s profile for “Reports” and “Tasks”. One option would be to include a “Messages” section as well, which would be consistent with how we link to Reports/Tasks. If viewing the household level… you might see multiple rows in that section (one per household member), but when viewing a specific contact, there would only ever been 1 or 0 rows (just like the messages tab, you only see one row per contact). If you were to tap on that row, it’d just take you to the Messages tab and select that specific row. @Nicole_Orlowski … what do you think?

11

[…] any interesting workarounds you can think of to get a hyperlink on the Contact Summary? Would adding a pipe do the trick (and be easy)?

@michael, I was revisiting this and your suggested workaround is a good one, especially that the CHT already has a pipe that supports creating links: :sparkles: safeHtml :sparkles:

Example 1

With some simple additions to contact-summary.templated.js, a link can be added to the profile.

image
image1037×490 13 KB

The link can be built specifically for each contact, so it works to see the contact:

const messageLink = '<a href="#/messages/contact:'+contact._id+'">A link!</a>';

fields.push({ appliesToType: 'person', label: '', value: messageLink, width: 12, filter: 'safeHtml' });

Example 2

Taking this a step further, a more “built-in” look can be achieved by removing the field name and styling the link as a button with additional HTML

image
image1026×456 13.6 KB

A couple of additional notes:

  • There is no way to know if there are messages for that contact, so you may be redirecting the user to the Messages tab with what looks like no one being selected in desktop mode. In mobile mode, you are drilled into the contact’s RHS but with “No messages”. It looks fine, but if you want to send a message you have to go to < and create a new message. In both cases, the dead ends are likely a suitable tradeoff for being able to get directly to the contact’s Messages.
  • I wouldn’t recommend using the primary button color for actual use.
  • The safeHtml opens the door to a lot of other uses, and worth exploring for those looking to create a custom direct link to external dashboards too.
3 Likes
12

Thats awesome! Thanks for sharing @marc !

1 Like
13

For posterity, here is a more complete example with the contact-summary.templated.js code for a link to the message tab:

if (contact.phone) {
    const messageButton = `<a class="btn btn-primary" href="#/messages/contact:${contact._id}">View Messages <i class="fa fa-envelope"></i></a>`;
    fields.push({ appliesToType: 'person', label: '', value: messageButton, width: 12, filter: 'safeHtml' });
}

image
image1175×492 21.7 KB

Also, here is the code for linking to a Superset dashboard, and passing the facility name to be used directly in a filter:

    const dashboardUrl='http://superset.url.org';
    const dashboardId='1';  // Get this from your superset dashboard
    const dashboardFilter='NATIVE_FILTER-*';  // Get this from your filter setting in superset
    const dashboardValue= encodeURIComponent(contact.name);    // Choose the value to filter on
    const dashboardColumn='facility_name';    // Match this to the filter column name

    const dashboardButton = `<a class="btn btn-primary" href="${dashboardUrl}/superset/dashboard/${dashboardId}/?native_filters=(${dashboardFilter}:(__cache:(label:'${dashboardValue}',validateStatus:!f,value:!('${dashboardValue}')),extraFormData:(filters:!((col:${dashboardColumn},op:IN,val:!('${dashboardValue}')))),filterState:(label:'${dashboardValue}',validateStatus:!f,value:!('${dashboardValue}')),id:${dashboardFilter},ownState:()))" target="_blank" rel="noopener">Open Dashboard <i class="fa fa-line-chart"></i></a>`;

    fields.push({ appliesToType: ['clinic', 'health_center', 'district_hospital'], label: '', value: dashboardButton, width: 12, filter:'safeHtml' });

As mentioned earlier, using a non-primary button color would be better, but outline-primary, secondary, light, and dark appear as plain links, while success, danger, warning, and info didn’t seem appropriate or clashed with existing CHT colors.

2 Likes