What is a HUB?

Credit to Brady Sheerer from ProChurch Tools for his work and research on the central HUB idea. This recipe will not talk about the why or strategy but more of how to pull it off using RockRMS. Also there are so many variables in creating this with everyone's own structure, website ads, and more so please use this as a guide to help you think about different ways to use the Pre/Post HTML parts of blocks. If you want to learn more about the strategy check out some resources I mentioned in my keynote from RX2019 here: https://hf.church/rx2019-takeaway

You can see the one from my church at https://hf.church/hub

I used the following blocks to create the HUB:

• Login Status - used to allow people to login
• Campus Context Setter - used to allow someone to change the campus info they see on this page. The What's Happening section is displayed based on what is selected here.
• Workflow Entry - used to create a digital connection card. This launches connections from the options they choose.
• Two Content Channel View Blocks - one is for the latest message and the other is for the What's Happening section.
• Three HTML Blocks - The HTML Blocks are used to create links to next steps, giving and resources.

LOGIN BLOCK

This block is at the top of the page and enables people to login to the page and also link to their "My Account" page on your external site (or whatever you choose to link to).

CONTEXT SETTER BLOCK

By using the pre and post of the context setter block you can do more with the block than just have a button that sets the context of the page or website. In the pre section I am using lava to determine if the person is logged in and if they are show their image. If they are not logged in it shows the no photo image inside rock.  In the post section of the block I have the persons name, email address and shows the campuses campus pastor with an email link to email them directly. I will most likely change this to a form in the near future instead of having their email address on the site. Here is how to edit the pre/post code of pretty much every block:

Below is the code for the pre and post settings.

PRE

{% raw %}{% if CurrentPerson != null %}
    {% assign currentpersonpastor = CurrentPerson | Campus | Property:'LeaderPersonAliasId' %}
        <div class = 'col-md-3 margin-v-md'>
            {% if CurrentPerson.PhotoId == null %}
            <a href="/page/297"><img src="https://res.cloudinary.com/hfchurch/image/upload/f_auto,fl_lossy,q_auto/v1562014459/HUB_web_mrmnle.png" class="img-responsive img-circle padding-v-sm" alt="Person Image">
            {% else %}
            <img src="/GetImage.ashx?id={{ CurrentPerson.PhotoId }}" class="img-responsive img-circle padding-v-sm" alt="Person Image">
            {% endif %}
        </div>
        <div class ='col-md-9'>
{% else %}
        <div class = 'col-md-3'>
            <img src="https://hf.church/Assets/Images/person-no-photo-male.svg" class="img-responsive img-circle padding-v-sm" alt="No Image">
        </div>
        <div class ='col-md-9'>
{% endif %}
<div class= 'campus-btn'>{% endraw %}

POST

{% raw %}{% if CurrentPerson != null %}
    {% assign currentpersonpastor = CurrentPerson | Campus | Property:'LeaderPersonAliasId' %}
        <div style="clear: both;"></div><h3>{{CurrentPerson.NickName}} {{CurrentPerson.LastName}}</h3> {{CurrentPerson.Email}}
            <p>We have your campus as {{ CurrentPerson | Campus | Property:'Name' }} and your Campus Pastor is {{ currentpersonpastor | PersonByAliasId | Property:'FullName' }}. You can <a href="mailto:{{ currentpersonpastor | PersonByAliasId | Property:'Email' }}?subject=Email From Hub">email him here.</a>
            </p>
            <div class = 'col-md-6 padding-v-sm'>
                <a class="btn btn-default btn-block padding-all-vs" href="/MyAccount" role="button"><i class=""></i>Enable Text Messaging</a>
            </div>
            <div class = 'col-md-6 padding-v-sm'>
                <a class="btn btn-default btn-block padding-all-vs" href="/subscribe" role="button"><i class=""></i>Manage Email Lists</a>
            </div>
        </div>
    {% else %}
            <div style="clear: both;"></div>
                <p>Consider logging in/creating an account to get your campus information.</p> <a class="btn btn-default" href="/page/3" role="button"><i class="fa fa-angle-right fa-lg"></i>Login/Register</a>
            </div>
    {% endif %}
</div>{% endraw %}

Workflow Entry Block

Currently this is a Workflow User Entry Form that just collects their info and if they select one of the options it creates a connection request based on what they selected and the campus set on the campus context setter block above. Here is the PRE/POST that does that as well as creates the accordion like open/close of the about you section.

PRE

{% raw %}<div id='connect'>
</div>
<div class="col-md-12 padding-v-sm padding-h-md">
      <button type="button" class="btn-block hub-header-primary" data-toggle="collapse" data-target="#connectopen"><center>about you</center></button>
</div><div style="clear: both;"></div>
<div class = 'row'>
  <div id="connectopen" class="collapse">{% endraw %}

POST

{% raw %}<div id='backtotophub'><center><a href="#hubtop">Back to Top</a></center></div>

</div>
    </div>{% endraw %}

CONTENT CHILD VIEW ITEM

For this section I just copied my settings from my video page on external website and put it in the format section of the content channel item view block just like on your external website. That will display the video itself and I removed the description as it is needed on this section.  I used the PRE/POST HTML section just like the above sections to create the accordion pop up and add the button to the Bible App Notes that we use.

*Important Note: When naming each div use a different name for it or it will break the other sections.

The heaviest part of this page is creating the What's Happening section. We are using the external website ads to create this section. We added some item attributes to help accomplish what we were going for. We added Subtitle (text field), Redirect URL(text field), Call To Action Verbiage (Defined Type), Mediums (Defined Type), and Background Image URL (text). You can see in the image above where a few of those are used. The Mediums are choosing where this item goes. We have hub, homepage and TV (as we want to try to use this in the future with digital signage). The Call to Action Verbiage is a defined type that has Learn More, Sign Up, Register as the three choices and the url for the link comes from the Redirect URL. The code for that is:

<a href="{{ detailURL }}">{{ item.CTA }}</a>

Also it was tricky to only show the items that are for the campus from the campus context setter above. The content channel item view block does not have a way to recognize page context so we had to assign the campus GUID and filter the campus by that. Below is how I assigned the campus and used those in this section as well as the whole format section.

{% raw %}{% assign campusGuid = Context.Campus.Guid %}
{% assign campus = item | Attribute:'Campuses','RawValue' %}
<br>
{% if campusGuid == null %}
    {% assign campusGuid = '76882ae3-1ce8-42a6-a2b6-8c0b29cf8cf8' %}
{% endif %}
    {% for item in Items %}
    {% assign campus = item | Attribute:'Campuses','RawValue' %}     
    {% if campus contains campusGuid %}
        <div class="row">
        <div class='col-md-4 padding-h-md padding-v-md'>
            {% assign imageUrl = item | Attribute:'ImageURL','RawValue' %}
                {% if imageUrl and imageUrl != "" %}<img src="{{ imageUrl }}" class="img-responsive">
                {% else %}
                    {{ item | Attribute:'Image' }}
                {% endif %}
            {% assign itemsubtitle = item | Attribute:'SubTitle' %}
        </div>
        <div class='col-md-8 padding-h-md padding-v-md'>
            <span style="font-size: 36px; line-height: 1.00;"><p>{{ item.Title }}</span><br>
            {% if itemsubtitle != empty %}
                <span style="font-size: 24px; line-height: .75; font-weight: normal;"><strong>{{ item | Attribute:"SubTitle" }}</strong></span><br>
            {% else %}
            {% endif %}<!-- <span style="font-size: 24px; line-height: .75; font-weight: normal;"><strong>{{ item | Attribute:"SubTitle" }}</strong><br> -->
            <span style="font-size: 24px; line-height: .75; font-weight: normal;">{{ item | Attribute:"SummaryText" }}{% assign redirectURL = item | Attribute:'RedirectURL','RawValue' %}{% assign detailURL = '' %}
            {% if redirectURL and redirectURL != empty %}{% assign detailURL = redirectURL %}{% else %}{% capture detailURL %}{{ LinkedPages.DetailPage }}?Item={{ item.Id }}{% endcapture %}{% endif %}
            <a href="{{ detailURL }}">{{ item.CTA }}</a>

</span></p>
        </div>
        </div>
        {% endif %}
        {% endfor %}
      <!--   <div class="id-{{ item.Id }} col-sm-4 padding-h-none">
            {% assign redirectURL = item | Attribute:'RedirectURL','RawValue' %}{% assign detailURL = '' %}
            {% if redirectURL and redirectURL != empty %}{% assign detailURL = redirectURL %}{% else %}{% capture detailURL %}{{ LinkedPages.DetailPage }}?Item={{ item.Id }}{% endcapture %}{% endif %}
            <a href="{{ detailURL }}" class="img-overlay image-grid-entry-img">
                {% assign imageUrl = item | Attribute:'ImageURL','RawValue' %}
                {% if imageUrl and imageUrl != "" %}<img src="{{ imageUrl }}" class="img-responsive">{% else %}
                {{ item | Attribute:'Image' }}{% endif %}
                <span class="title"><h3>{{ item.Title }}</h3>{{ item | Attribute:"SubTitle" }}</span>
                <img src="/Themes/HLF/Assets/images/trans.png" class="spacer img-responsive">
            </a>
        </div>
        
    </div> -->{% endraw %}

I know this doesn't help answer every question or a complete from start to finish setup instructions so if you have any questions just hit me up on Rocket.Chat. My username is @timlem.