Introduction

The new Prayer Card Viewer block in v13+ is fantastic! I love the flexibility that the lava template gives you, but the best part is the far superior sorting options in the block settings. Not only is this new block super mobile friendly, but the Prayer Team now sees and prays for the requests that they'd prefer to as they can see more than one at a time, unlike the old Prayer Session block. The only nit I have with the new block is that you lose the core Prayer Comment functionality built into the original Prayer Session block which has existed for years. Let's fix that!

Step 1

Create a new page along side your existing Prayer Team page to use as an iFrame for your pop-up modal.

The new page's Advanced Settings needs a page route which includes the parameter for the prayer request Id as well as a Context Parameter Name in order for the Notes Entry block to pick up on.

prayer-comment/PrayerRequestId/{prayerRequestId}

prayerRequestId

Step 2

Add a Notes Entry block to the new Prayer Comments page. Ensure that the Context Entity Type setting at the bottom of the block settings is set to: 

Prayer Request

Step 3

Modify the Prayer Card View Display Lava Template to include a new button and modal launcher in the prayer request for loop. Here is an example that you may modify for your needs that I put into the card-footer div:

    
{% assign prayerId = item.Id %}
{% assign requestor = item.FirstName | Append:' ' | Append:item.LastName %}

<button type="button" class="btn btn-primary btn-sm ml-3" data-toggle="modal" data-target="#iframe-prayer-comment-{{ prayerId }}"><i class="fa fa-pray"></i> Comment</button>
    
<div class="modal fade" id="iframe-prayer-comment-{{ prayerId }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" 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"><i class="fas fa-times-circle"></i></span>
                </button>
                <h4 class="modal-title" id="myModalLabel"><i class="fas fa-praying-hands" style="padding-right: 5px;"></i>Add Prayer Comment for {{ requestor }}</h4>
            </div>
            <div class="modal-body" style="height: 500px !important;">
                <iframe src='{{ 'Global' | Attribute:'PublicApplicationRoot' }}prayer-comment/PrayerRequestId/{{ prayerId }}' style="height:100%;width:100%;"></iframe>
            </div>
        </div>
    </div>
</div>

Bonus 1

You can include a bunch of things that aren't in the base Prayer Card View block, like entered date, how many prayers a particular request has already received, any attribute associated with the prayer, etc. Here are some additonal snippets that you're welcome to use and modify for your needs:

Add the Prayers received count into the for loop card footer div (adjust the thresholds as you see fit):

    {% if item.PrayerCount < 3 or item.PrayerCount == empty %}
            <span class="label label-danger"><b>Prayers received:</b> {{ item.PrayerCount }}</span>
        {% elseif item.PrayerCount >= 3 and item.PrayerCount < 7 %}
            <span class="label label-info"><b>Prayers received:</b> {{ item.PrayerCount }}</span>
        {% elseif item.PrayerCount >= 7 and item.PrayerCount < 1000 %}
            <span class="label label-success"><b>Prayers received:</b> {{ item.PrayerCount }}</span>
        {% else %}
            <span class="label label-danger"><b>Prayers received:</b> 0</span>
    {% endif %}
    

Bonus 2

Add the prayer request Date Entered: into the for loop card footer div:

    {% if item.EnteredDateTime %}
        <span><b>Date Entered:</b> {{ item.EnteredDateTime | Date:'M/d/yyyy' }}</span>
    {% endif %}

Bonus 3

Add a prayer request attribute type into the for loop card footer div (example shows custom Entry Type):

    {% for prayerRequestAttribute in item.AttributeValues %}
        {% if prayerRequestAttribute.Value != '' %}
            <strong>{{ prayerRequestAttribute.AttributeName }}:</strong> {{ prayerRequestAttribute.ValueFormatted }}
        {% endif %}
    {% endfor %}

Bonus 4

Add a prayer requestor Photo into the for loop card footer div:

    {% if item.RequestedByPersonAlias %}
        <img src='{{ item.RequestedByPersonAlias.Person.PhotoUrl }}' class='pull-right margin-l-md img-thumbnail mt-0' width=75 />
    {% endif %}

Bonus 5

Add fancy quotes around the request text:

    
        <p class="card-text mb-2">
            <i class="fa fa-quote-left mr-2"></i>
                <span class="p-2 text-semibold leading-relaxed">{{ item.Text }}</span>
            <i class="fa fa-quote-right ml-2"></i>
        </p>
    

Wrap-up

To see all of the changes between the default core Prayer Card View Display Lava Template and these modifications, check out this DiffChecker.com code