Notification Bubble for Connection Requests and Tasks

Shared by Brent Pirolli, CedarCreek Church
4 months ago

13.0 Administration / Finance, General, Operations, Web Beginner

Notification Bubble for Connection Requests and Tasks

One of the worst things to hear was how someone tried to get connected at church and never heard back from the staff or volunteers. Oof! Rock goes a long way to helping with this, but we wanted to leverage what people are used to seeing every day (notification bubbles) to make sure items awaiting their attention were not overlooked, tucked away on a page they may not visit daily. Let's put these notifications into a format that people are used to seeing as "needing attention" and give them a red bubble with a notifications count in it. (Yes, I'm aware some monsters out there have 24,563 unread messages in their gmail app with an atrociously ignored notification bubble... you know who you are... this won't help you... call a therapist).

Prerequisite: Fluid Engine

You must be on Fluid Engine for this to work. I don't know why the older DotLiquid engine throws an error complaining about "==" being used because the code doesn't include any "==" but regardless, Fluid engine processes this properly. This is why the minimum version I listed is Rock v13 which is the first time you could move to Fluid Engine. If you are on Rock v17 or higher, you are running Fluid Engine as DotLiquid was discontinued. If you are using v13 - v16 and want to know what engine you are on, go to "Admin Tools - General Settings - Global Attributes" and find the "Lava Engine Liquid Framework" attribute and ensure it is on "Fluid". If it is not, beware that changing this is a process and shouldn't be done lightly as it may break your older code. Refer to https://community.rockrms.com/lava/fluid for more information on starting this journey. https://community.rockrms.com/lava/fluid/differences is also a good reference for what needs updated before moving to Fluid Engine.

Let's Build!

1) We're going to start by adding a new block to the Header Zone, that is visible across the entire Site. Hover over the bottom right and click the Page Zones icon, then click the Zone Blocks icon at the top left of the Header Zone. From there, choose "Site" as the location for this block.

2) Choose the plus icon at the bottom right to add a block and add an HTML Content block with the name "Action Required Notifications" and hit the Save button.

3) Move this new block to the top of the list by dragging the 3 line "hamburger" icon up to the top and click "Done" when finished.

4) Now we need to add content to this new block, so we COULD TRY a method to edit it on this page, where we hover over the bottom right of your screen and click the "Block Configuration" icon. If you are lucky, you'll be able to mouse over the block at the top as illustrated... sometimes by attacking it slowly with the cursor from the bottom left. But odds are it will be hard to do since this block has no content in it yet, and the other items there appear on top of it. And even once we add content to it, if you personally don't have any notifications, the entire block is hidden... No worries, the next step will show you another way to edit to this block.

5) Let's edit this block through the back-end instead. On the left, go to "Admin Tools - CMS Configuration" choose "Pages" and navigate to Internal Homepage on the left.

6) On the right, choose the "Header" zone from the dropdown to see what blocks are in that zone. In the "Blocks from Site" section you should see our "Action Required Notifications" block. Click the Edit HTML icon.

7) Now copy and paste the following code (this box scrolls down) into the code editor view of this block and press Save.

<style>
badge::before{ background:transparent; }
.rock-bookmark {background-color: rgba(255, 255, 255, 0.1) !important;}
.rockbadgehover i:hover, .rockbadgehover i:active { color: rgba(255,255,255,0.5) !important; }

.fa-stack[data-count]:after { position:absolute; right:-5px; bottom:-5px; content: attr(data-count); font-size:16px; padding:7px 5px 9px; border-radius:999px; line-height:3px; background:rgb(255,0,0); min-width:1em; font-weight:bold; }
@media only screen and (max-width: 767px) {
    .navbar-side-open .zone-content > .notifications-bubble { display: block !important; position: fixed; top: 60px; right: 85px; }
}
</style>

<!-- Pull current Connection Requests Count for ConnectionState 0 (active) and 2 (Future) where FutureFollowUp Dates are <= today. -->
{% assign personId = CurrentPerson.Id %}
{% assign currentDate = "now" | Date: "yyyy-MM-dd" | AsDateTime %}
{% sql %}
    SELECT
        cr.[Id]
    FROM
        [ConnectionRequest] cr
        INNER JOIN [PersonAlias] pa ON pa.[Id] = cr.[ConnectorPersonAliasId]
    WHERE
        pa.[PersonId] = {{ personId }} 
        AND (cr.[ConnectionState] = 0 OR (cr.[ConnectionState] = 2 AND cr.[FollowUpDate] != '' AND cr.[FollowUpDate] <= GETDATE())) 
{% endsql %}
{% assign crIds = results | Map:'Id' | Join:',' %}
{% connectionrequest expression:'Id IN ({{ crIds | Default:0 }})' count:'true' %}
{% endconnectionrequest %}

{% assign connectCount = count %}

<!-- Pull current Task Count: Active Workflow Activities assigned to current person or to a group they are an active member of -->
{% sql id:'{{ CurrentPerson.Id }}' %}
	SELECT COUNT(WorkflowActivity.Id) AS 'Count'
	FROM WorkflowActivity
		LEFT OUTER JOIN PersonAlias ON WorkflowActivity.AssignedPersonAliasId = PersonAlias.Id AND PersonId = @id
		LEFT OUTER JOIN (
			SELECT *
			FROM GroupMember
			WHERE PersonId = @id
				AND GroupMemberStatus = 1
				AND ArchivedDateTime IS NULL
				AND InactiveDateTime IS NULL
		) AS GM ON GroupId = AssignedGroupId
		INNER JOIN Workflow ON WorkflowActivity.WorkflowId = Workflow.Id
		INNER JOIN WorkflowAction ON WorkflowActivity.Id = WorkflowAction.ActivityId
		INNER JOIN WorkflowActionType ON WorkflowAction.ActionTypeId = WorkflowActionType.Id
		INNER JOIN WorkflowActivityType ON WorkflowActionType.ActivityTypeId = WorkflowActivityType.Id
		INNER JOIN WorkflowType ON WorkflowActivityType.WorkflowTypeId = WorkflowType.Id
	WHERE (WorkflowActivity.ActivatedDateTime IS NOT NULL AND Workflow.ActivatedDateTime IS NOT NULL)
		AND (WorkflowAction.CompletedDateTime IS NULL AND WorkflowActivity.CompletedDateTime IS NULL
		AND Workflow.CompletedDateTime IS NULL)
		AND WorkflowActivityType.IsActive != 0
		AND WorkflowType.IsActive != 0
		AND (GM.Id IS NOT NULL OR PersonAlias.Id IS NOT NULL)
		AND WorkflowActionType.WorkflowFormId IS NOT NULL
{% endsql %}
{% for item in results %}
    {% assign taskCount = item.Count %}
{% endfor %}

<!-- Add the Connection Count and Task Count together and determine if notification should appear. -->
{% assign totalCount = connectCount | Plus: taskCount %}
{% if totalCount > 0 %}
<ul class="nav navbar-nav loginstatus">
	<li>
		<a class="navbar-link rock-bookmark" href="/MyDashboard" style="padding: 0;">
			<div class="fa-stack rockbadge rockbadgehover" style="cursor: pointer; margin-top: -2px; opacity: .75; font-size: 20px; background: transparent;" data-count="{{ totalCount }}">
				<i class="badge-icon fa fa-clipboard-list"></i>
			</div>
		</a>
	</li>
</ul>
{% endif %}

8) Next we need to allow some security permissions for this block to run the SQL and Entity Commands and assign it a CSS Class so it will format and appear properly for mobile devices. Click on the "Block Properties" icon, enable "Rock Entity" and "SQL" lava commands in the first tab, then click on the "Advanced Settings" tab and give it a CSS class of "notifications-bubble" and press Save.

NOTE:

If you didn't do the above step (or honestly I've seen this even if you DO the previous step) when going back to the home page or refreshing the page, you may see the following error. This can be resolved by editing the "Block Properties" on the block itself (as opposed to doing it through the Pages back-end) and checking the Rock Entity and SQL boxes again. I honestly don't know why they showed as checked on the back-end for me but not on the block itself until I set it in both places. Likely a cache issue or bug of some kind. But if this happens to you, just set them again on the block itself.

End Result

If all has gone as expected, you should now see NOTHING! Well... unless you have any Tasks or Connection Requests assigned to you. If you do, then you'll see something like the photos below (desktop and mobile menu). If you click it, you'll be taken to your "My Connections" page where you should see a matching number of items awaiting your attention.

Desktop View:

Mobile View (when menu is opened):

Thanks to Courtney Cooksey and David Axelson for help with some of the code!

Recipe

Notification Bubble for Connection Requests and Tasks

Notification Bubble for Connection Requests and Tasks

Notification Bubble for Connection Requests and Tasks

Prerequisite: Fluid Engine

Let's Build!

NOTE:

End Result

Login to add a comment...