We like the 'Since you were gone' feature here on Atlas - We recreated it and shared the component
We really like the 'Since you were gone' feature here on Atlas. We want to implement this on our Communities. We asked support if this is a component that is available in Studio, it is not. The 'Since you were gone' feature is a custom made component just for Atlas.
We would love Khoros to share the content of this component so we can fast-track our development of such a component. We feel the entire community here might benefit from sharing this with all of us 🙂
Hoekstra_VFZ we deployed this functionality in our community, as shown in the screenshot below.
You can find my code for the component and the associated macro library below to give you a starting point.
- Component: custom.homePage.hero.profileNotifications.ftl
- Macro Library: custom.macro.common.notifications.ftl
Feel free to send me a DM if you have any questions.
Again thanks to jeffshurtliff for extra advice via DMs.
This is what I came up with for the Ziggo and Vodafone communities
Difficulties:
- Truncate strings. This took a while to find out how it works.
- Count(*) from the notifications_feed seemed broken. Thanks to Khoros Support we now know you need to define count as true. For the count query to work.
- <#break> didn't work as expected within a <#list>, needed to set a variable to detect a succesfull iteration.
- Between certain types of notifications user id's are not the same key.
- We needed to excluded stuff like Rank and Badge notifications because we want to focus on user interactions.
This is the component:
<#-------------------- COMPONENT --------------------- Latest Notification ---------------------------------------------------- Scope: Home Page only Instance: Shared Created By: Anne Hoekstra Last Modified By: Anne Hoekstra Last Modified Date: 11-07-2022 Last Reviewed By: N/A Last Reviewed Date: N/A -----------------------------------------------------> <#-------------------- MANIFEST ---------------------- Functions: - getUser Key documentation: - https://developer.khoros.com/khoroscommunitydevdocs/docs/notification_feeds Optimizations that should be done: - Move CSS to Community Style - Move functions to macros -----------------------------------------------------> <#-------------------- IMPORT DEPENDENCIES ----------> <#import "theme-lib.common-functions.ftl" as standardUtils /> <#-------------------- FUNCTIONS --------------------> <#-------------------- Function: getUser ------------> <#-- This checks if the url to the user is in view_href or href (older accounts?) --> <#function getUser input> <#if input.author.view_href?has_content> <#assign results = input.author.view_href /> <#else> <#assign results = input.author.href /> </#if> <#return results /> </#function> <#-------------------- BASE DATA --------------------> <#assign newNotification_count = standardUtils.executeLiQLQuery("SELECT count(*) FROM notification_feeds", true) /> <#assign data = standardUtils.executeLiQLQuery("SELECT * FROM notification_feeds LIMIT ${newNotification_count}") /> <#assign intro = 'Ondertussen ' /> <#assign selectedNotification = false /> <#-------------------- STYLE ------------------------> <style> .sinceyouweregone a { text-decoration: underline !important; } .sinceyouweregone a::after{ content: "" !important; display: none !important; } .sinceyouweregone::before { color: inherit; content: "\e923"; display: inline-block; font-family: "CustomIcons"; font-size: 12px; font-weight: inherit; position: relative; } </style> <#-------------------- BUILD THE THING --------------> <#if data?has_content && newNotification_count gt 0> <#list data as notification> <#attempt> <#if notification.subscription_type == 'TOPIC' || notification.subscription_type == 'MENTIONS' || notification.subscription_type == 'SOLUTIONS' || notification.subscription_type == 'KUDOS'> <span class="sinceyouweregone"> <#if notification.subscription_type == 'TOPIC' && selectedNotification == false > <#assign content = standardUtils.executeLiQLQuery(notification.topic.query) /> ${intro} heeft <a href="${getUser(content[0])}">${content[0].author.login}</a> gereageerd op <a href="${content[0].view_href}">${utils.html.truncate(55, content[0].subject?replace('^Re: ', '', 'r'), "...")}</a>. <#assign selectedNotification = 'true' /> <#elseif notification.subscription_type == 'MENTIONS' && selectedNotification == false > <#assign content = standardUtils.executeLiQLQuery(notification.mentions.query) /> ${intro} heeft <a href="${getUser(content[0])}">${content[0].author.login}</a> je genoemd in <a href="${content[0].view_href}">${utils.html.truncate(55, content[0].subject?replace('^Re: ', '', 'r'), "...")}</a>. <#assign selectedNotification = 'true' /> <#elseif notification.subscription_type == 'SOLUTIONS' && selectedNotification == false > <#assign content = standardUtils.executeLiQLQuery(notification.solutions.query) /> ${intro} heeft <a href="${getUser(content[0])}">${content[0].author.login}</a> jouw antwoord als oplossing gemarkeerd in <a href="${content[0].view_href}">${utils.html.truncate(55, content[0].subject?replace('^Re: ', '', 'r'), "...")}</a>. <#assign selectedNotification = 'true' /> <#elseif notification.subscription_type == 'KUDOS' && selectedNotification == false > <#assign content = standardUtils.executeLiQLQuery(notification.kudos.query) /> <#assign title = standardUtils.executeLiQLQuery("SELECT * FROM messages WHERE id = '${content[0].message.id}'") /> ${intro} heeft <a href="${content[0].user.view_href}">${content[0].user.login}</a> likes gegeven in <a href="${content[0].message.view_href}">${utils.html.truncate(55, title[0].subject?replace('^Re: ', '', 'r'), "...")}</a>. <#assign selectedNotification = 'true' /> </#if> </span> </#if> <#recover> ${text.format("custom-hero-welcome.text")}! </#attempt> </#list> <#else> ${text.format("custom-hero-welcome.text")} </#if> <#--------------------------------------------------->
We would to share this component with anyone who is interesed. Any feedback on the code? Or going to use this on your Community? Please let me know in this topic.