Donation Progress bar on Luminate API forms

Options
Ian Banks 2
Ian Banks 2 ✭
Tenth Anniversary Facilitator 1 Name Dropper Photogenic
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions
As year end is approaching/here, we're looking to implement a progress bar on our API forms as part of the strategy to meet our year end goal.


I'm looking for a way to somehow gather the amount of donations that come in from several campaigns (there are 5 active campaigns that all contribute towards that year end goal) and display that in a dynamic progress bar I'll be creating on the API forms. Ideally I'd love use AJAX to do live updates of the amount coming in.


Is this even possible? I haven't seen any donation methods to get the amounts brought in via donation forms...just that users can donate. Would this potentially be a datasync API implementation? Something else? If I can just get donation amounts accross all campaigns from X date to Y date I can handle everything else myself.
Tagged:

Comments

  • Will Hull
    Will Hull Blackbaud Employee
    Ancient Membership Facilitator 1 Photogenic

    Ian Banks:

    As year end is approaching/here, we're looking to implement a progress bar on our API forms as part of the strategy to meet our year end goal.


    I'm looking for a way to somehow gather the amount of donations that come in from several campaigns (there are 5 active campaigns that all contribute towards that year end goal) and display that in a dynamic progress bar I'll be creating on the API forms. Ideally I'd love use AJAX to do live updates of the amount coming in.


    Is this even possible? I haven't seen any donation methods to get the amounts brought in via donation forms...just that users can donate. Would this potentially be a datasync API implementation? Something else? If I can just get donation amounts accross all campaigns from X date to Y date I can handle everything else myself.

    Hey there, Ian.


    World T.E.A.M. Sports uses a custom progress meter on a Pagebuilder page that is dedicated to the fundraising campaign to display the results.  You can look at it here: http://support.worldteamsports.org/site/PageServer?pagename=2016_ATCCO_Main


    In the head of their Pagewrapper they have the script below.  Please notice the [[S15:1301:goal]].  This is the S15 S-Tag with the campaign ID number and then calling out the goal for that fundraising campaign set at the donation campaign level under Fundraising > Donation Management > Edit your Campaign > Step 2 where you can set the campaign goal.  In this case the "1301" in the code above is the ID number for the campaign.  This may help if you can embed your progress meter on a Pagebuilder page.


    The "amountRaised" variable can also be an S15 tag instead of the S42 tag that you see below, which relates to a TeamRaiser amount raised.


    You may then possibly use the S130 Reverse Polish Notation S-Tag to combine several campaigns together to get a final number of what is ultimately raised across multiple fundraising campaigns.

     


    <script type="text/javascript">

    var amountRaised = "[[E42:[[?x1x9x::x[[S4]]x::[[S334:fr_id]]::[[S42:0:fr-id]]]]:dollars]]";

    amountRaised = amountRaised.replace(/[^0-9\\.]+/g, "");

    amountRaised = amountRaised *100

    var goalAmount = "[[S15:1301:goal]]";


    var actualPercentage = (amountRaised/goalAmount) * 100;

    var percentage = (amountRaised/goalAmount) * 790;

    //percentage is now in pixels


    if (percentage < 1) percentage = 1;


      function commaSeparateNumber(x){

        x = x.toFixed(2);

        return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",");

      }


    function updatePercentages() {


    var items = document.getElementsByClassName('update-with-percentage');


    if (items.length > 0) {


    var theItem;


    for (var x in items) {

    theItem = items[x];

    if (theItem && theItem.style)

    theItem.style.width = percentage + "px";

    }


    }


    var percentWrapper = document.getElementById('total-percent');

    var moneyWrapper = document.getElementById('total-number');


    if (percentWrapper) {

    percentWrapper.firstChild.nodeValue = actualPercentage.toFixed(0);

    }


    if (actualPercentage.toFixed(0) > 70) {

    document.getElementById("total").style.display = "none";

    }


    if (moneyWrapper) {

    moneyWrapper.firstChild.nodeValue = commaSeparateNumber(amountRaised/100);

    }


    }


    </script>


     


    Finally, you can use APIs on Pagebuilder pages or on a website external to the platform and for more documentation, please take a look at http://open.convio.com/


    I hope you find this reply useful in what you are seeking to do. 


    Thanks and Happy Thanksgiving.


    Will Hull

    Internet Solutions Consultant (Luminate Online Deployments)
    will.hull@blackbaud.com

     

  • Kyle Booth
    Kyle Booth ✭
    Fifth Anniversary Facilitator 1 Name Dropper Photogenic
    Is there an API method for getting the total raised for a donation form? (Looking through the API docs and not seeing it.)

    Thanks!
  • Will Hull
    Will Hull Blackbaud Employee
    Ancient Membership Facilitator 1 Photogenic
    Hey there, Kyle Booth‍.  What you're looking for is Donation Campaign information. Unfortunately, at the donation form level, it is unable to track against a goal.  However, outside of the donation form, at the campaign level, it is possible.  There is some documentation that I know of that uses Angular.js to populate a progress meter that you might want to look at at https://www.npmjs.com/package/angular-luminate-utils#evaluating-template-tags-with-luminatetemplatetag

    14bf987144b115c6b6bea535fbd8d235-huge-sc



    My colleague Noah Cooper‍ was the person who put this page together and might have more insight into what code, specifically, you might need to get a progress meter like this to populate for you on your site via angular.js and APIs.


    Also, if you are hosting this on a Luminate Online page to get the total raised, you can look at the S48, S43 and S42 codes for a TeamRaiser if that is what this total raised is for.  Here is an S-Tag quick reference for you to view possible S-Tags that can populate information on a Luminate Online hosted page: https://www.blackbaud.com/files/support/helpfiles/luminate-online/help/luminateonline.html#../Subsystems/S-Tags/Content/S-Tags/S-Tags_Quick_Reference.html


    E.g. for a TeamRaiser personal page, you might use the [[E48:[[S334:fr_id]]-[[S334:px]]:dollars]] code to generate the total raised for a personal page.

    For a Team page, [[S43:0:goal-dollars]] will display the total amount raised by a team on the team page.


    I hope you find this information helpful.


    Thanks,

    Will
  • Kyle Booth
    Kyle Booth ✭
    Fifth Anniversary Facilitator 1 Name Dropper Photogenic
    Thank you much Will Hull. I had not known about the angular package. Great stuff!

Categories