We wanted to better equip our leaders with content that is group-specific and a tab to get in contact with our staff and give feedback. To do this we decided to add additional tabs to the group toolbox block. 

This recipe will show you how you can easily do the same!

1. Create a new page for each new tab and add a Content Channel View Block with the corresponding content channel. For a feedback page, you would have to use a workflow entry block and build a workflow that asks questions for the leader.

Make note of the page id's for the new pages created. 

2.  Go back to the main page of the group toolbox.

Edit the Lava Template on the group toolbox block to contain the following:

(This lava adds tabs that display based on the group type. To use for your groups, you will have to change the GroupTypeId and Page Id, You will have to change the group type ids and page ids in the code below to make this work!)


{% if AllowedActions.View == true or AllowedActions.Edit == true or AllowedActions.ManageMembers == true or AllowedActions.Administrate == true %}
{% assign countActive = -1 %} {% assign countInactive = -1 %} {% assign countPending = -1 %}
 
{% for member in Group.Members %}
{% 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;
endcomment %}
{% if Group.GroupType.GroupCapacityRule == 'Hard' %} {% assign warningLevel = 'danger' %}
{% endif %}
{% assign activeMemberCount = countActive | Plus:1 %} {% comment %}the counter is zero based{% {% assign overageAmount = activeMemberCount | Minus:Group.GroupCapacity %}
{% if overageAmount > 0 %}
<div class="alert alert-{{ warningLevel }} margin-t-sm">This group is over capacity by {{ overageAmount }}
</div>
{% endif %} {% endfor %}
<h1>{{ Group.Name }}</h1>
{{ Group.Description }}
width: 100%; height: 200px;">
{% if Group.GroupType.GroupCapacityRule != 'None' and Group.GroupCapacity != '' %} {% assign warningLevel = 'warning' %}
{{ '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 />
'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
{% 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 AllowedActions.Edit == true %}
<div class="actions margin-v-md clearfix">
<a class="btn btn-default btn-sm pull-right" href="#" onclick="{{ Group.Id | Postback:'EditGroup' }}">Edit</a> </div>
{% endif %}
{% if LinkedPages.RosterPage != '' and (LinkedPages.AttendancePage != '' or Group.GroupType.TakesAttendance ==
}}?GroupId={{ Group.Id }}">Roster</a></li> {% else %}
}}">Roster</a></li>
<li role="presentation"><a href="{{ LinkedPages.RosterPage }}?GroupId={{ Group.Id
{% 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 %}
}}">Feedback</a></li> }}">Feedback</a></li>
{% endif %}
{% if Group.GroupType.Id == 555 %} {% if CurrentPage.Id == 1156 %}
<li role="presentation" class="active"><a href="/page/1156?GroupId={{ Group.Id
{% else %}
<li role="presentation"><a href="/page/1156?GroupId={{ Group.Id
{% endif %} {% endif %}
}}">Resources</a></li> }}">Resources</a></li>
}}">Chairs</a></li>
</ul> {% endif %}
{% if Group.GroupType.Id == 555 %} {% if CurrentPage.Id == 1157 %}
<li role="presentation" class="active"><a href="/page/1157?GroupId={{ Group.Id
{% else %}
<li role="presentation"><a href="/page/1157?GroupId={{ Group.Id
{% endif %} {% endif %}
{% if Group.GroupType.Id == 555 %}
{% if CurrentPage.Id == 1147 %}

<li role="presentation" class="active"><a href="/page/1147?GroupId={{ Group.Id
{% else %}
<li role="presentation"><a href="/page/1147?GroupId={{ Group.Id }}">Chairs</a></li>
{% endif %} {% endif %}
{% if LinkedPages.RosterPage == CurrentPage.Path %}
{% if countPending > -1 %}
{% assign icountPending = 0 %}
member.PersonId }}">
<div class="well">
<h4>Pending Members</h4>
{% for member in Group.Members %}
{% if member.GroupMemberStatus == 'Pending' %}
{% assign loopcycle = icountPending | 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={{
{% endif %}
<img src="{{ member.Person.PhotoUrl }}&height=60&width=60&mode=crop&scale=both" height="60" class="pull-left margin-r-sm" alt="">
<div class="pull-left">
<strong>{{ member.Person.FullName }}</strong> <small>({{ member.GroupRole.Name }})</small>
{% for phone in member.Person.PhoneNumbers %}
<br />{% if phone.IsUnlisted != true %}<a href="tel:{{ phone.NumberFormatted }}">{{ phone.NumberFormatted }}</a>{% else %}Unlisted{% endif %} <small>({{
phone.NumberTypeValue.Value }})</small>
{% endfor %}
}}</a>
%} }}" >
class="margin-l-sm">
<br />
<a href="mailto:{{ member.Person.Email }}">{{ member.Person.Email
</div>
{% if AllowedActions.Edit == true or AllowedActions.ManageMembers == true
<div class="pull-left rollover-item" style="position: absolute; right:0; top:0;"> <a href="#" onclick="{{ member.Id | Postback:'DeleteGroupMember'
<i class="fa fa-times"></i>
</a>
<a href="#" onclick="{{ member.Id | Postback:'EditGroupMember' }}"
<i class="fa fa-pencil"></i>
</a> </div>
{% endif %}
{% if LinkedPages.PersonDetailPage %} </a>
{% endif %} </div>
{% if loopcycle != 0 or icountPending == countPending %} </div>
{% endif %}
{% assign icountPending = icountPending | Plus: 1 %} {% endif %}
{% endfor %}
</div> {% endif %}
{% if countActive > -1 %}
{% assign icountActive = 0 %}
<h4>Active Members</h4>
{% for member in Group.Members %}
{% if member.GroupMemberStatus == 'Active' %}
{% assign loopcycle = icountActive | Modulo:2 %}
{% if loopcycle == 0 %} <div class="row">
{% endif %}
<div class="col-sm-6 margin-b-md rollover-container" style="overflow: hidden;">
member.PersonId }}">
{% if LinkedPages.PersonDetailPage %}
<a href="{{ LinkedPages.PersonDetailPage }}?PersonId={{
{% endif %}
<img src="{{ member.Person.PhotoUrl }}&height=60&width=60&mode=crop&scale=both" height="60" class="pull-left margin-r-sm" alt="">
<div class="pull-left">
<strong>{{ member.Person.FullName }}</strong> <small>({{ member.GroupRole.Name }})</small>
{% if member.Person.Email contains 'hillsidewired.com' %}
<br /><a href="tel:{{ member.Person | PhoneNumber:'Work'
}}">{{ member.Person | PhoneNumber:'Work' }}</a>(Work)</small>
{% else %}
{% for phone in member.Person.PhoneNumbers %}
<br />{% if phone.IsUnlisted != true %}<a href="tel:{{ phone.NumberFormatted }}">{{ phone.NumberFormatted }}</a>{% else %}Unlisted{% endif %} <small>({{
phone.NumberTypeValue.Value }})</small>
}}</a>
%} }}" >
class="margin-l-sm">
{% endfor %} {% endif %}
<br />
<a href="mailto:{{ member.Person.Email }}">{{ member.Person.Email
</div>
{% if AllowedActions.Edit == true or AllowedActions.ManageMembers == true
<div class="pull-left rollover-item" style="position: absolute; right:0; top:0;"> <a href="#" onclick="{{ member.Id | Postback:'DeleteGroupMember'
<i class="fa fa-times"></i>
</a>
<a href="#" onclick="{{ member.Id | Postback:'EditGroupMember' }}"
<i class="fa fa-pencil"></i>
</a> </div>
{% endif %}
{% if LinkedPages.PersonDetailPage %} </a>
{% endif %} </div>
{% if loopcycle != 0 or icountActive == countActive %} </div>
{% endif %}
member.PersonId }}">
<h4>Inactive Members</h4>
{% for member in Group.Members %}
{% if member.GroupMemberStatus == 'Inactive' %}
{% assign loopcycle = icountInactive | 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={{
{% endif %}
{% assign icountActive = icountActive | Plus: 1 %} {% endif %}
{% endfor %} {% endif %}
{% if countInactive > -1 %}
{% assign icountInactive = 0 %}
<img src="{{ member.Person.PhotoUrl }}&height=60&width=60&mode=crop&scale=both" height="60" class="pull-left margin-r-sm" alt="">
<div class="pull-left">
<strong>{{ member.Person.FullName }}</strong> <small>({{ member.GroupRole.Name }})</small>
{% for phone in member.Person.PhoneNumbers %}
<br />{% if phone.IsUnlisted != true %}<a href="tel:{{ phone.NumberFormatted }}">{{ phone.NumberFormatted }}</a>{% else %}Unlisted{% endif %} <small>({{
phone.NumberTypeValue.Value }})</small>
}}</a>
%} }}" >
{% endfor %}
<br />
<a href="mailto:{{ member.Person.Email }}">{{ member.Person.Email
</div>
{% if AllowedActions.Edit == true or AllowedActions.ManageMembers == true
<div class="pull-left rollover-item" style="position: absolute; right:0; top:0;"> <a href="#" onclick="{{ member.Id | Postback:'DeleteGroupMember'
<i class="fa fa-times"></i> </a>
class="margin-l-sm">
btn-xs">
<a href="#" onclick="{{ member.Id | Postback:'EditGroupMember' }}"
<i class="fa fa-pencil"></i>
</a> </div>
{% endif %}
{% if LinkedPages.PersonDetailPage %} </a>
{% endif %} </div>
{% if loopcycle != 0 or icountInactive == countInactive %} </div>
{% endif %}
{% assign icountInactive = icountInactive | Plus: 1 %} {% endif %}
{% endfor %} {% endif %}
<div class="pull-right margin-b-md">
{% 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 != '' %}
{% if AllowedActions.Edit == true or AllowedActions.ManageMembers == true %}
<a href="#" onclick="{{ '' | Postback:'SendCommunication' }}" class="btn btn-default
<i class="fa fa-envelope-o"></i> Email Roster </a>
{% endif %} {% endif %}
{% if LinkedPages.AlternateCommunicationPage %}
{% if AllowedActions.Edit == true or AllowedActions.ManageMembers == true %}
<a href="#" onclick="{{ '' | Postback:'SendAlternateCommunication' }}" class="btn btn-default btn-xs">
<i class="fa fa-mobile-phone"></i> Text Roster </a>
{% endif %} {% endif %}
</div>
</p> {% endif %}
{% else %}
{% if Group.Id %}
<div class='alert alert-warning'>You do not have permission to view this group.</div> {% endif %}
{% endif %}

Finally, put some content in your content channel and get your workflow up and running and you're in business!