Volunteer Service List View on separate pages

My goal is to have our church use the Volunteer Service module in Arena much more fully and allow our congregation to interact with the scheduling. We will be hiring a new Hospitality person soon and this provides an opportunity to sell this module again. I want a fresh look for the Members Responsive Portal that is uncomplicated.  mentioned that it would be helpful to have the Your serving opportunities and Future serving opportunities tabs separated and set on different pages. I agree. 

Here are the parts that work perfectly. The Volunteer Service List View Module is set on three pages. Below that an Advance HTML Module is added and a css style or css and javascript are saved.

1. To show only the Blackout Calendar and the Open Calendar Details button on a page copy and paste in Advance HTML Module:

<style>
[id$='RadAjaxPanel1'] > div > div > div:nth-child(3), div.row.col-lg-12, div.tab-content {
display: none;
}
</style>

2. To show only the Your serving opportunities on a page copy and paste in Advance HTML Module:

<style>
[id$='RadAjaxPanel1'] > div > div > div:nth-child(-n+3), div.row.col-lg-12 > ul > li:nth-child(2), div[id$='RadGrid2'] {
display: none;
}
</style>

3. To show only the date range date pickers and the Future serving opportunities on a page copy and paste in Advance HTML Module: 

<style>
[id$='RadAjaxPanel1'] > div > div > div:nth-child(-n+2), div.row.col-lg-12 > ul > li:nth-child(1), div[id$='RadGrid1'] {
display: none;
}
</style>

<script type="text/javascript">
// Show second tab on page load
$("div[id$=RadAjaxPanel1] > div > div > div.row.col-lg-12 > ul > li:nth-child(1)").removeClass("active");
$("div[id$=RadAjaxPanel1] > div > div > div.row.col-lg-12 > ul > li:nth-child(2)").addClass("active");

// Show second tab-pane on page load
$("div[id$=RadAjaxPanel1] > div > div > div.tab-content > div#yourServing").addClass("fade out").removeClass("active");
$("div[id$=RadAjaxPanel1] > div > div > div.tab-content > div#futureServing").addClass("fade in").addClass("active");
</script>

The one challenge I haven't solved is keeping the future tab as active after dates are picked. As long as a person stays on the current month it looks great. 

Parents
  • Thanks to the page showing just the Future serving opportunities tab and the date range pickers is set! He added the function that maintains the page through post back actions when people filter for dates or sign up to serve. Here is the full script for the Future serving opportunities page:

    <style>

    /*Hide add to calendar link*/
    a[title="Add To Your Calendar"] {
    display:none;
    }

    /*Hide blackout calendar, my serving tab and calendar link on page load*/
    [id$='RadAjaxPanel1'] > div > div > div:nth-child(-n+2), div.row.col-lg-12 > ul > li:nth-child(1), div[id$='RadGrid1'] {
    display: none;
    }

    </style>


    <script type="text/javascript">
    // Call myFunction on page load to do the initial hide to show second tab and pane on page load

    myFunction();

    // Get the pages request manager, add_endRequest listens for postback and when it happens it recalls myFunction

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function (s, e) {
    console.log('postback on Volunteer Service List');
    myFunction();
    });

    // Defines Javascript Function

    function myFunction(){
    $("div[id$=RadAjaxPanel1] > div > div > div.row.col-lg-12 > ul > li:nth-child(1)").removeClass("active");
    $("div[id$=RadAjaxPanel1] > div > div > div.row.col-lg-12 > ul > li:nth-child(2)").addClass("active");
    $("#yourServing").addClass("tab-pane fade").removeClass("active");
    $("#futureServing").addClass("tab-pane fade active in").addClass("active");
    }
    </script>

    - I don't know if you decided to separate your volunteer pages or not. I am glad you said that the module would function best broken down into three pages. It does look good. Thanks!

Reply Children
No Data
More Content