Creating a Custom Donation Form in BBNC

Michael Multari

Hi All,



I am working on creating a custom donation form and designation search in BBNC. Hoever, I found documentation that is geared towards BBIS. Is it safe to move foward with the REST API and JavaScript SDK found here: http://developer.blackbaud.com/bbis/reference/javascript/ ?



If so, can we manually enter in the part id for the donation part? Has anyone been able to sucessfully submit a donation using the JavaScript SDK in BBNC?



Any insight would be greatly appreciated!!



Thanks!

Mike

Chris McGrane

Hello Michael,


Are you a hosted or self-hosted client? NetCommunity has only a small portion of it's API exposed, specifically acessing image information and creating users. However, you can use JS within an unformatted text part and try to work some magic. If you can explain in detail what you're attemping with an example, I'm happy to assist further.


Chris

Michael Multari

Hi Chris!


We are a hosted client. We are trying to create a type-ahead search for our funds like the one found on this page:https://twitter.github.io/typeahead.js/


The problem here is that we cannot determine the GUID for each of our Fund Designations. I thought of adding values to the drop-down via JavaScript, but the value of each option in the <select> element is different from the Fund ID in Raiser's Edge.


I did find this code snippet: BLACKBAUD.netcommunity.Cart.AddDonationToCart(amount, designationID, description);

Do you think that this is something we could use? If so, the user can select the designation that they would like and we could use an onclick() event to add the donation before the form is submitted.


Here is our current giving page:https://alumniandfriends.stonybrook.edu/campaign-for-stony-brook-giving-page

As you can see, I have encorporated a giving search, but using this search causes the page to refresh. We would like the search and donation process to be as seamless as possible.


Any insight you could provide would be greatly appreciated!


Thank you,

Michael

Chris McGrane

Hello Michael,


I'm not sure about the code snippet you found, that could possibly work although my methods have always been a little more hacky considering the limitations of NetCommunity.


I do have one idea. What if you were to create a new page with a blank layout and your search part? You could create an iframe that would show only the seach box, and upon submission, you could have the search results in the iframe. Then, since you wont have to wory about CORS because you're not doing anything cross-domain, you should be able to access the results in the iframe, grab the link that updates the designation and then reload the current page. You could even have the donation form and search both in iframes and update the donation frame once the correct designation is clicked.


You can target items within an iframe (on the same domain).

Example: var x =  $('iframe').contents().find('#link').attr('href');


If you're not understanding what I mean, I can provide a better example. Also, the following may prove useful. NetCommunity utilizes ASPNET Postbacks similarly to how AJAX requests work. The downside with postsbacks is that you cannot carry over URL paramters or other custom info upon a postback. You can set localstorage values, but this is super hacky. You can however work with postbacks and selectively submit them. I'm not sure how useful this is to you, but using JS, you can also target a postback directly rather than using onclick.

Here is a custom function to recognize Postbacks:

(function ($)
{
    $.fn.extend({
        postback: function ()
        {
            return this.each(function ()
            {
                if (this && "undefined" != typeof this.click)
                    this.click();
                else if (this && this.tagName.toLowerCase() == "a" && this.href.indexOf('javascript:') == 0)
                    eval(this.href.toString().replace('javascript:', ''));
            });
        }
    });    
})(jQuery);

Then, you can target a postback like so (I'm using jQuery btw)...

$(document).ready(function() {
$('[id$="PC2351_btn_Next"]').postback();
});


Hope some of this information is useful, I have some other tricks but I'm hoping this can help solve your problem.


Chris








 

Michael Multari

I was thinking about adding an iframe! Thank you so much. I will let you know how it goes!

David Seager

Hi Michael,


If you are looking to create a designation, or RE fund, search so the user can search for the fund they want to give to and then donate this is possible using a part called "Giving Search", you can see details in our user guides.


You can add search criteria from RE and also a query if the funds you want them to search on. You can also add the donation page you want them to be directed to after they choose a fund, screen shot here of the settings.


As an example here is a short video in my sample of how it works. Let me know if you have an questions.


David


 

Michael Multari

Thank you David. I am familiar with the Giving Search part, however, we are looking to incorporate the search along with a donation part.


Here's an example of the type-ahead search functionality that we would like to use: https://www.myiu.org/recurring-gift

Notice how you are able to continute to search and add funds to your donation. The dream scenario would be to have a form that included the following elements all on one page:

1. Giving Levels (including "Other")

2. Fund Designation Drop-down

3. Fund Designation Search


Is this possible?


Thanks,

Mike

 

David Seager

Hi Michael,


the page you referenced does share of the same core code with BBNC, buts its a software called Blackbaud CRM and is highly customizable with forms. NetCommunity sadly would not be able to accomplish that exact feature but you can iframe using the giving search, or similar workflow.


Most BBNC organization do start users in another area and then the land on the donation form with the fund completed like the Giving search part. Some want users to navigate to others pages and then make a choice. You can append the fund name to the URL and place it in the other field, unlike the search part where the GUID would have to known. With JS you can append items in the URL that NetCommunity can interpret if API is enabled


I will send you some examples of other NetCommunity sites.

Art Bryman 2

How would one append the fund name to the URL?  What would a URL look like?

Michael Multari

It looks something like this:

https://alumniandfriends.stonybrook.edu/campaign-for-stony-brook-giving-page?fid=U82EkR4p2kc=&amp;fdesc=Upv6ihF9W1b8vELAHCPeOEcYnJHsiahU/RMk3v8jnsI=


I obtained each of the Fund IDs using a Giving Search part and copying the results to a text editor. Then, I copied the links to a separate file using Regular Expressions.

Michael Multari

The giving page is live! Here is the final product: https://alumniandfriends.stonybrook.edu/campaign-for-stony-brook-giving-page


Comments and feedback are welcome and encouraged!


Thanks,

Mike

Chris McGrane

Looks awesome! Great use of the fullscreen img background. I would add a bottom margin to the form though since there is no footer. Also, I would make the payment part of the form wider. Besides that, really looks good!


CM