Overview

This article explains how to build a custom component and attach it to the community hero element on your community home page. You can add this custom component to any element based on your preference.

This custom component fetches recent notifications when the user is not signed in to the community. These recent notifications are rendered on your community home page based on whether the user is anonymous or registered.

The purpose of this component is to notify visitors about recent activities performed on the user account for registered users and for anonymous users, a custom text based on your preference will be displayed.

Building the Since you were gone component is done in three steps:

1. Creating a custom component walkthrough
2. Assigning the custom elements with custom text
3. Adding the custom component to your community homepage

Here is an image of the Since you were gone component in Atlas Community:

Since you were gone component

Creating a custom component walkthrough

Create a new custom component in Studio named since_you_were_gone (Studio > Component > New component). 

To add the below custom component code snippet, you must have community admin permission.

<#if user.anonymous>
	<div class="hero-desc hero-desc-space-style">
		<span>${text.format("custom.hero-desc.anonymous")}</span>
		<a href='${webUi.getUserRegistrationPageUrl("/")}'>${text.format("custom.hero-desc.anonymous.joinus")}</a>
	</div>
<#else>
    <#assign notifications = rest("/users/self/notifications/unread/count").value?number/>
    <#assign notificationfeedCount = liql("SELECT  count(*) FROM notification_feeds" )/>
    <#assign num=notificationfeedCount.data.count?number/>
  <#if (num> 0) && (notifications>0) >        <div class="hero-desc hero-desc-space-style">
        <div class="since">${text.format("custom.hero-desc.loggedin")}</div>
        <#attempt>
            <@component id="notificationfeed.notificationList" lazyLoad="true" />
            <#recover>
        </#attempt>
    </div>
    <#else>
        <div class="hero-desc hero-desc-space-style">
            <div class="hero-desc hero-desc-space-style">${text.format("custom.hero-desc.no.recent.notification")}</div>
        </div>
    </#if>
</#if>

We are going to break down the code into six sections.

Section 1 (Line 1-6)

<#if user.anonymous>
	<div class="hero-desc hero-desc-space-style">
		<span>${text.format("custom.hero-desc.anonymous")}</span>
		<a href='${webUi.getUserRegistrationPageUrl("/")}'>${text.format("custom.hero-desc.anonymous.joinus")}</a>
	</div>
<#else>

If user.anonymous is true, then proceed. The remainder of the component code is contained in this if statement. If user.anonymous is not true, the component is not rendered on the page and moves to line 7 which is for registered user. The text of the following elements appears on the homepage.

• custom.hero-desc.anonymous
• custom.hero-desc.anonymous.joinus

Section 2 (Line 7)

<#assign notifications = rest("/users/self/notifications/unread/count").value?number/>

From this line, the below-described codes are for the registered community user.  We create a variable named notifications. This will hold the count of the unread notifications. To set the value, we use the rest FreeMarker method to call the Community API v1 /users/self/notifications/unread/count endpoint. This query retrieves the count of notifications for self as a number.

Section 3 (Line8)

<#assign notificationfeedCount = liql("SELECT  count(*) FROM notification_feeds" )/>

We assign our LiQL query to a variable called notificationfeedCount. This is the query:

SELECT count(*) FROM notification_feeds

This query retrieves the count from the notification feeds of the user as a string.

Section 4(Line 9)

<#assign num=notificationfeedCount.data.count?number/>

We create a variable named num. This variable fetches the count of the notification feed which is a string that converts it to a number using the ?number function.

Section 5(Line 10)

<#if (num> 0) && (notifications>0) >        <div class="hero-desc hero-desc-space-style">

We use the && - AND operator to combine the results of lines 7 and 9.  If there is a value-based out of the && - AND operation, then the remainder of the component code is contained in this if statement.

Section 6 (Line 11-22)

      <div class="since">${text.format("custom.hero-desc.loggedin")}</div>
        <#attempt>
            <@component id="notificationfeed.notificationList" lazyLoad="true" />
            <#recover>
        </#attempt>
    </div>
    <#else>
        <div class="hero-desc hero-desc-space-style">
            <div class="hero-desc hero-desc-space-style">${text.format("custom.hero-desc.no.recent.notification")}</div>
        </div>
    </#if>
</#if>

In these lines, we declare the custom.hero-desc.loggedin element. In line 13, we use the core component notificationfeed.notificationList to retrieve the latest article activity of the user.  We also set the lazyLoad=true, so that it does not increase the initial page load time. 

Line 13 is the only core component and other parts of the code are custom based on your preference.

Furthermore, we also declare the custom.hero-desc.no.recent.notification element so that if there is no recent notification, this element displays the No new recent activity text on your community home page.

With lines 21 and 22, we close the if statements

Assigning the custom elements with custom text

In the above section, we have added some custom elements. In this section, we are going to assign those custom elements with text. 

1. Go to Studio > Text Editor > Community Text.
2. Click Search.
   You can see the text properties. 
3. Assign the following custom elements to the text.
   • custom.hero-desc.anonymous                   = To connect with the brightest leaders and practitioners of Digital Customer Engagement,
   • custom.hero-desc.anonymous.joinus      = join your community
   • custom.hero.desc.loggedin                         = Since you were gone,
   • custom.hero-desc.no.recent.notification = No new activity found
     Text Properties in Studio
4. Click Save.

The above elements will be rendered based on the user and will display on the community home page.

Adding the custom component to the community homepage

In this section, we are going to add the since_you_were_gone component to your community element based on your preference which will appear on your community homepage in the Studio. 

Go to Studio and select the layout on which you want to add this component. We are adding it to the Community Hero Layout and click Save.

Custom Component to the Community Hero Element

Conclusion

There you have it! The Since you were gone component appears on your community home page, customized for each visitor. 

Here is the image of the Since you were gone component for an anonymous user. 

Here is the image of the Since you were gone component for a community member(registered user).