Forum Discussion

Hoekstra_VFZ's avatar
3 years ago

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 'Sinc...
  • Hoekstra_VFZ's avatar
    3 years ago

    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.