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 '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 🙂

  • 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.

     

     

    • RyanPi's avatar
      RyanPi
      Khoros Staff

      This sure looks like a great candidate for the "How We Built It" series in the Developer Blog.

      I'd love to mention your example as well, if you're ok with that?

    • Hoekstra_VFZ's avatar
      Hoekstra_VFZ
      Advisor

      Thanks Jeff! Very, very insightfull stuff 🙂 I send a DM with a question about a detail in the component.

  • 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.

     

     

  • I'd be super interested to learn more about this component Hoekstra_VFZ  if you are happy to share details. I think this would be a great enhancement to our Home Page. 

    • Hoekstra_VFZ's avatar
      Hoekstra_VFZ
      Advisor

      Hi elbranscomb sure! What would you like to know specifically? (Your question is pretty broad).

      Below you find some code to pass on to your developers as a starting point. This is not my final version though, i still have some minor improvements to make.

      - Users like this feature, they can go back to their last activity faster. It makes them feel at home a bit more

      - It however does not improve overall measurable engagement much.