1. OUR PROBLEM

We have many serving opportunities at our church, both ministries within the church and organizations we partner with. We wanted a central location for people to see all those opportunities and filter them based on their passions and ability to serve.

2. OUR SOLUTION

In looking at the tools Rock had available we thought we could use the Group Finder with a bit of tweaking and here is what we came up with.

https://shepherdchurch.com/go

3. HOW WE DID IT

First, We setup a couple defined types for our groups.


The first defined type we will setup is the "GO Group Type" and this will contain the serving "levels"


GO_Group_Type1.png GO_Group_Type2.png


The Second defined type we will create will be Group Focus and this will contain the serving interests.

GO_Group_Focus1.png GO_Group_Focus2.png

Once you have the defined types setup you can set up a custom group type.

Here are some screenshots of all the settings we changed for the custom group type. (if there is not a screenshot of the section it was left as default.)

General.png Attendance-Checkin.png Scheduling.png Roles-Member_Attributes.png Group_Attributes.png

Here are the field types for each attribute


Requires Background check: Boolean, Dropdown

How will you make an impact on your community?: Group Focus (the defined type we setup earlier)

Group Type: GO Group Type (the other defined type we setup earlier)

Group Logo: Image, File Upload

What We Do: Memo, 4 Lines

What They Do: Memo, 4 Lines

Family Friendly: Boolean, Toggle

Group_Member_Workflows.png

We have included this GO Teams Registration workflow in this recipe. to import go to Admin Tools > Power Tools > Workflow Import/Export.

You will have to change the System Email because the workflow references our custom system email. 

I'm sure some of you can make a much prettier email template but here is the code of each email referenced in the workflow. 

GO Teams Registration - Initial Leader Notification: 

    {%- assign leaderId = Workflow | Attribute:'Leader','Id' -%}

    
{{ Person.NickName }},


    
Someone new has signed up for {{ Workflow | Attribute:'Group','Name' }}! 
    

    
    
Please contact them within 48 hours and welcome them to your specific GO team! Contact can be made via text or email, but you are welcome to call them as well. They are now part of your team so be as personable with them as possible. 
    

    
You can also contact your whole team using the Group Leaders Toolbox which can be found via the following website:  YOURCHURCHWEBSITE/gotools
    

    
The name and contact information of your new Go Team member can be found below:
    


    

        {{ Workflow | Attribute:'Person','FullName' }}

        {{ Workflow | Attribute:'Person','Object' | PhoneNumber:'Mobile' }}

        {{ Workflow | Attribute:'Person','Email' }}

        {{ Workflow | Attribute:'Person','Object' | Address:'Home' }}
    


    
Remember that potential members only know basic information about your ministry. So, please be prepared to answer questions about your ministry’s focus, how they can serve, where they can serve, etc. If they are not available to serve immediately, then let them know that you will be emailing them with future service opportunities.
    


    
Thank you for leading and helping unleash the power of service throughout Los Angeles. 


    {{ 'Global' | Attribute:'GOEmailFooter' }}

GO Teams Registration - Member Pending:

Dear {{ Person.NickName }},


    
Thank you for your interest in joining one of YOURCHURCH’s Go teams!! You are joining a large community of men and women who believe in living life outside of the church walls as an ambassador of Christ. We desire to unleash the power of service throughout Los Angeles.


    
Your name, email and phone number have been given to your Go Team leader(s). He/She will be contacting you soon with more information on how to get involved.


    
Sincerely,


    

       GO Team

    
    

    {{ 'Global' | Attribute:'GOEmailFooter' }}

Then, using that custom group type we setup earlier, we went to People >Group Viewer and set up each individual group

GO_Teams.png

Now that we have the backbone complete, we need the public to see it

Page Setup:

On the Go Teams landing page, we have an HTML block and the Group Finder Block.

The HTML block just controls the image and basic instructions of what to do here.

The Group Finder Block is where things get interesting. 

Using the Out of the box group finder block we threw some lava in there to get it to reference the GO Teams and display the way we want.

Group_Finder_Config.png

Map.png

Lava-Grid.png

Here is the Lava for the Group Finder:

   <style>
    .card {font-family:'Poppins', Arial, Sans-serif; font-weight:600; border-radius:30px;min-height:420px;}
    .card a {color:#545454; text decoration:none; font-size:16px;}
    .card .img-card-top a:hover{opacity 0.75;}
    div.card div.card-body table tbody tr td.details {font-size:12px; color:#707070; line-height:14px; font-family:'Roboto', Arial, Sans-serif; font-weight:normal;width:50%;}
      div.card div.card-body table tbody tr td.details span{margin-left:6px;}
    .modal-header {border-bottom: 0px;}
    .modal-title {margin-top: 20px; font-size: 32px; font-weight:600; font-family:'Poppins', Arial Sans-serif}
    .modal-body {padding:0px 48px 15px 48px; font-size:14px;}
    .modal-footer {border-top: 0px;}
    .close {font-size: 40px;}
    .modal {}
    .join {font-size: 16px; font-weight:900;background-color:#00ef93; border:none;}
    .join a:hover{color#fff;}
    .AboutGroup {text-align:center;}
    .GroupType {text-align:center;}
    .LGicons {color: grey;}
    .control-label{font-family:'Poppins', Arial, Sans-serif}
    .description {font-size:12px; color:#707070; line-height:14px; font-family:'Roboto', Arial, Sans-serif; font-weight:normal;}
    @media (min-width: 992px) { .field-criteria > div {float:left !important;} }
</style>
<div class="row mt-5">
    {% for group in Groups %}
    {% assign isOnlineGroup = group | Attribute:'OnlineGroup' | AsBoolean %}
    <div class="col-lg-4 col-md-6 col-sm-12">
  <div class="card mb-3"> <a target="_blank" data-toggle="modal" data-target="#ModalGroup{{ group.Id }}" onClick="ga('send', 'event', { eventCategory: 'LifeGroups', eventAction: 'Click', eventLabel: 'Group-Preview', eventValue: {{ group.Id }}});" href="javascript:void(0)">
        {% assign GOGroupLogo = group | Attribute:'GroupLogo'%}
                {% if GOGroupLogo contains '/GetImage.ashx?' %}
                <div class="card-img-top" style="border-radius:30px 30px 0 0; background: url({{ GOGroupLogo }}); height:210px;background-size:cover; background-repeat:none; background-repeat:none;background-position-x: center;background-position-y: center;"></div>
                {% else %}
                {% assign LGGrooupType = group | Attribute:'GoGroupType'%}
                    {% case LGGrooupType %}
                    {% when "Men's" %}
                        <div class="card-img-top" style="border-radius:30px 30px 0 0; background: url(https://www.YOURCHURCHWEBSITE/Content/YOURCONTENTPATH/LifeGroups/LG_MenAvatar.svg); height:210px;background-size:cover; background-repeat:none;background-position: center;"></div>
                    {% when "Women's" %}
                        <div class="card-img-top" style="border-radius:30px 30px 0 0; background: url(https://www.YOURCHURCHWEBSITE/Content/YOURCONTENTPATH/LifeGroups/LG_WomenAvatar.svg); height:210px;background-size:cover; background-repeat:none;background-position: center;"></div>
                    {% else %}
                        <div class="card-img-top" style="border-radius:30px 30px 0 0; background: url(https://www.YOURCHURCHWEBSITE/Content/YOURCONTENTPATH/LifeGroups/LG_CoupleAvatar.svg); height:210px;background-size:cover; background-repeat:none;background-position: center;"></div>
                    {% endcase %}
                {% endif %}
    </a>
    <div class="card-body"> <a target="_blank" data-toggle="modal" data-target="#ModalGroup{{ group.Id }}" onClick="ga('send', 'event', { eventCategory: 'LifeGroups', eventAction: 'Click', eventLabel: 'Group-Preview', eventValue: {{ group.Id }}});" href="javascript:void(0)">
      <h5 class="card-title">{{ group.Name | Escape }}</h5>
      </a>
       <b>{{ group.groupMembers.GroupMemberStatus | First }}</b>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            {% assign GOFF = group | Attribute:'FamilyFriendly' %}
                <td class="details" colspan="2"><i class="fa fa-users LGicons mr-1"></i>{{ group | Attribute:'GoGroupType' }}
                {% if GOFF == 'Yes' %}<br><i class="fa fa-child LGicons mr-1"></i> Family Friendly{% endif %}</td>
     
        </tr>
        <tr>
         <td class="details"><!--<i class="fas fa-map-marker-alt mr-1"></i>{% if isOnlineGroup == true %}Online{% else %}{{ group.GroupLocations | First | Property:'Location.City' }}{% endif %}--></td>
          <td> </td>
        </tr>
      </table>
      <p class="description">{{ group.Description | TruncateWords:25 }}</p>
    </div>
  </div>
  </div>
<div class="modal fade" id="ModalGroup{{ group.Id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" >
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
            {% for member in group.Members %}
                {% if member.GroupRole.IsLeader and member.GroupMemberStatus == 1 %}
                    {% if GOGroupLogo contains '/GetImage.ashx?' %}
                    <div class="card-img-top mt-4" style="border-radius:30px 30px 0 0; background: url({{ GOGroupLogo }}); height:280px;background-size:cover; background-repeat:none; background-repeat:none;background-position-x: center;background-position-y: center; width:90%;margin-left:auto;margin-right:auto;"></div>
                    {% else %}
                    {% assign LGGrooupType = group | Attribute:'GoGroupType'%}
                        {% case LGGrooupType %}
                        {% when "Men's" %}
                        <div class="card-img-top mt-4" style="border-radius:30px 30px 0 0; background: url(https://www.YOURCHURCHWEBSITE/Content/YOURCONTENTPATH/LifeGroups/LG_MenAvatar.svg); width:90%;height:280px;background-size:cover;background-position: center;margin-left:auto;margin-right:auto;"></div>
                        {% when "Women's" %}
                        <div class="card-img-top mt-4" style="border-radius:30px 30px 0 0; background: url(https://www.YOURCHURCHWEBSITE/Content/YOURCONTENTPATH/LifeGroups/LG_WomenAvatar.svg); width:90%;height:280px;background-size:cover;background-position: center;margin-left:auto;margin-right:auto;"></div>
                        {% else %}
                        <div class="card-img-top mt-4" style="border-radius:30px 30px 0 0; background: url(https://www.YOURCHURCHWEBSITE/Content/YOURCONTENTPATH/LifeGroups/LG_CoupleAvatar.svg); width:90%;height:280px;background-size:cover;background-position: center;margin-left:auto;margin-right:auto;"></div>
                        {% endcase %}
                    {% endif %}
                {% break %}
                {% endif %}
            {% endfor %}
        <h5 class="modal-title" id="exampleModalLongTitle" align="center">{{ group.Name | Escape }}</h5>
      </div>
      <div class="modal-body">
        {% assign GOTheyDo = group | Attribute:'WhatTheyDo' %}
        {% if GOTheyDo != empty %}<div class="AboutGroup mt-4"><b>What they do:</b> {{ GOTheyDo }}</div>{% endif %}
        {% assign GOWeDo = group | Attribute:'WhatWeDo' %}
        {% if GOWeDo != empty %}<div class="AboutGroup mt-4"><b>What we will do:</b> {{ GOWeDo }}</div>{% endif %}
        <div class="GroupType mt-4"><i class="fa fa-users LGicons"></i> {{ group | Attribute:'GoGroupType' }}</div>
      </div>
      <div class="modal-footer">
        <p align="center"><a class='btn btn-xs btn-primary join' target="_blank" href='{{ LinkedPages.RegisterPage }}?GroupId={{ group.Id }}'>Interested in {{ group.Name | Escape }}</a></p>
      </div>
    </div>
  </div>
</div>
  {% endfor  %} </div>

Linked_Pages.png

So, we have our groups we have a way for people to sign up, and now we need a way for our volunteer leaders to be able to manage their groups.

The Built-in Leader Toolbox is perfect for this, though it displays a little more information than we want the volunteers to see, it’s also missing some important information they will need.

Page Setup:

Create a page where you want your leader toolbox to live. We have the page setup as "Left Side Bar" and in the Sidebar Zone we have the "Group List Personalized Lava" block. In the Main Zone we have the "Group Detail Lava" block.

For the "Group List Personalized Lava" block configuration we only have the Go Team group we setup earlier selected.

For the "Group Detail Lava" block configuration in the Main Zone here is a screenshot of the configuration.

Group_Detail_Config.png

And here is the custom lava template, but let's explain what this lava is actually doing.

We needed the leaders to they if they are background checked but we didn't want them to see all the details of the background check, we wanted them to see the person's contact information like email and phone number but not the person's address.

We Also added some controls like a button that would take them to their group schedule so they could modify their own schedule and email the whole group.

    
    {% if AllowedActions.View == true || AllowedActions.Edit == true || AllowedActions.Administrate == true %}
    {% assign countActive = -1 %}
    {% assign countInactive = -1 %}
    {% assign countPending = -1 %}
    {% for member in Group.Members %}
        {% if member.GroupRole.IsLeader == true %}{% continue %}{% endif %}
        {% case member.GroupMemberStatus %}
            {% when 'Active' %}
                {% assign countActive = countActive | Plus: 1 %}
            {% when 'Inactive' %}
                {% assign countInactive = countInactive | Plus: 1 %}
            {% when 'Pending' %}
                {% assign countPending = countPending | Plus: 1 %}
            {% else %}
        {% endcase %}
    {% endfor %}
    
    {% for groupLocation in Group.GroupLocations %}
        {% if groupLocation.Location.GeoPoint != '' %}
        
            <div class="packagesummary-image"
                style="background: url('https://maps.googleapis.com/maps/api/staticmap?size=1400x400&zoom=13&maptype=roadmap&markers={{ groupLocation.Location.GeoPoint }}&scale=2&key={{ 'Global' | Attribute:'GoogleAPIKey' }}') no-repeat center;
                        width: 100%;
                        height: 200px;"
            </div>
                        
        {% endif %}
    {% endfor %}
    <h1>{{ Group.Name }}</h1>

	{{ Group.Description }}

	{% if Group.GroupType.GroupCapacityRule != 'None' and  Group.GroupCapacity != '' %}
		{% assign warningLevel = 'warning' %}

		{% if Group.GroupType.GroupCapacityRule == 'Hard' %}
			{% assign warningLevel = 'danger' %}
		{% endif %}

		{% assign activeMemberCount = countActive | Plus:1 %} {% comment %}the couter is zero based{% endcomment %}
		{% assign overageAmount = activeMemberCount | Minus:Group.GroupCapacity %}

		{% if overageAmount > 0 %}
			<div class="alert alert-{{ warningLevel }} margin-t-sm">This group is over capacity by {{ overageAmount }} {{ 'individual' | PluralizeForQuantity:overageAmount }}.</div>
		{% endif %}
	{% endif %}

	<div class="row">
		<div class="col-md-6">
		<h4>Group Details:</h4>
		{% for attribute in Group.AttributeValues %}
		<strong>{{ attribute.AttributeName }}:</strong> {{ attribute.ValueFormatted }} <br />
		{% endfor %}
		</div>

		<div class="col-md-6">
		<h4>Leaders:</h4>
		<ul>
			{% for member in Group.Members %}

			{% if member.GroupRole.IsLeader %}
			<li>
			{{ member.Person.FullName }} <small>({{ member.GroupRole.Name}})</small>
			</li>
			{% endif %}
			{% endfor %}
		</ul>
		</div>
	</div>
	

	{% if LinkedPages.RosterPage != '' and  (LinkedPages.AttendancePage != '' or Group.GroupType.TakesAttendance == 'False') %}
		<ul class="nav nav-tabs margin-v-lg">
			{% if LinkedPages.RosterPage != '' %}
				{% if LinkedPages.RosterPage == CurrentPage.Path %}
					<li role="presentation" class="active"><a href="{{ LinkedPages.RosterPage }}?GroupId={{ Group.Id }}">Roster</a></li>
				{% else %}
					<li role="presentation"><a href="{{ LinkedPages.RosterPage }}?GroupId={{ Group.Id }}">Roster</a></li>
				{% endif %}
			{% endif %}

			{% if LinkedPages.AttendancePage != '' and Group.GroupType.TakesAttendance == 'True' %}
				{% if LinkedPages.AttendancePage == CurrentPage.Path %}
					<li role="presentation" class="active"><a href="{{ LinkedPages.AttendancePage }}?GroupId={{ Group.Id }}">Attendance</a></li>
				{% else %}
					<li role="presentation"><a href="{{ LinkedPages.AttendancePage }}?GroupId={{ Group.Id }}">Attendance</a></li>
				{% endif %}
			{% endif %}
		</ul>
	{% endif %}

	{% if LinkedPages.RosterPage == CurrentPage.Path %}

		{% assign statuses = 'Pending,Active' | Split:',' %}
		{% for status in statuses %}
			{% assign statusCount = 0 %}
			{% for member in Group.Members %}
				{% if status == member.GroupMemberStatus %}
					{% assign statusCount = statusCount | Plus:1 %}
				{% endif %}
			{% endfor %}

			{% if status == 'Pending' %}
				<div class="well">
			{% endif %}
			<h4>{{ status }} Members</h4>

			{% assign icount = 0 %}
			{% for member in Group.Members %}
				{% if status == member.GroupMemberStatus %}

					{% assign loopcycle = icount | Modulo:2 %}

					{% if loopcycle == 0 %}
						<div class="row">
					{% endif %}

					<div class="col-sm-6 margin-b-md rollover-container" style="overflow: hidden;">
						{% if LinkedPages.PersonDetailPage %}
							<a href="{{ LinkedPages.PersonDetailPage }}?PersonId={{ member.PersonId }}">
						{% endif %}
						<img src="{{ member.Person.PhotoUrl }}&height=60&width=60&mode=crop&scale=both" height="60" class="pull-left margin-r-sm" />
						<div class="pull-left">
							<strong>{{ member.Person.FullName }}</strong>
							<small>({{ member.GroupRole.Name}})</small>

							{% assign phoneTypes = 'Home,Mobile,Work' | Split:',' %}
							{% for phoneType in phoneTypes %}
								{% assign phone = member.Person | PhoneNumber:phoneType %}
								{% if phone and phone != '' %}
							<br />{{ phone }} <small>({{ phoneType }})</small>
								{% endif %}
							{% endfor %}

							<br />
							<a href="mailto:{{ member.Person.Email }}">{{ member.Person.Email }}</a></br>
							<!--Background Check-->
							{% assign LGGrooupType = Group | Attribute:'GoGroupType'%}
                            {% if LGGrooupType contains 'Next Level' %}
                                {% assign backgroundCheckResult = member.Person | Attribute:'BackgroundCheckResult' %}
                                {% if backgroundCheckResult != empty %}
                                    Background Check: {{ member.Person | Attribute:'BackgroundCheckDate' }} - {{backgroundCheckResult}}<br>
                                {% endif %}
                            {% endif %}
						</div>

						{% if AllowedActions.Edit == true %}
						<div class="pull-left rollover-item" style="position: absolute; right:0; top:0;">
							{% if status == 'Pending' %}
							<a href="#" onclick="{{ member.Id | Postback:'DeleteGroupMember' }}" >
							<i class="fa fa-times"></i>
							</a>
							{% endif %}
							<a href="#" onclick="{{ member.Id | Postback:'EditGroupMember' }}" class="margin-l-sm">
							<i class="fa fa-pencil"></i>
							</a>
						</div>
						{% endif %}

						{% if LinkedPages.PersonDetailPage  %}
							</a>
						{% endif %}
					</div>

					{% assign icount = icount | Plus:1 %}
					{% if loopcycle != 0 or icount == statusCount %}
						</div>
					{% endif %}

				{% endif %}
			{% endfor %}

			{% if status == 'Pending' %}
				</div>
			{% endif %}

		{% endfor %}

		<div class="pull-right margin-b-md">
		    {% if AllowedActions.Edit == true %}
				<a href="/page/1894" class="btn btn-default btn-xs">
					<i class="fa fa-calendar-alt"></i> Scheduler
				</a>
			{% endif %}
			{% if AllowedActions.Edit == true %}
				<a href="#" onclick="{{ '' | Postback:'AddGroupMember' }}" class="btn btn-default btn-xs">
					<i class="fa fa-plus"></i> Add Member
				</a>
			{% endif %}
			{% if LinkedPages.CommunicationPage != '' and AllowedActions.Edit == true %}
				<a href="#" onclick="{{ '' | Postback:'SendCommunication' }}" class="btn btn-default btn-xs">
					<i class="fa fa-envelope-o"></i> Email Roster
				</a>
			{% endif %}
		</div>
		</p>
	{% endif %}

    {% else %}
	    {% if Group.Id %}
	    	<div class='alert alert-warning'>You do not have persmission to view this group.</div>
    	{% endif %}
    {% endif %}