How To Customize the Participant Center HTML/JS Files

Options
Michael Turner
Michael Turner
Ninth Anniversary First Comment
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions
Hi all,


I'm working on modernizing and revamping our participant center. Thus far I've been able to make CSS changes just fine through the "Edit Custom Styles" in the PC editor within Luminate Online.


However, when I go to edit the custom.js file none of my scripts run at all.


Similarly with the HTML files on the FTP server. I've made some changes to the dashboard.html file and when I reload my participant center expecting to the new code there is nothing there. It's as if the PC has cached the old HTML file and doesn't recognize that a new version exists.


Does anyone have any experience/debug suggestions I could utilize to get these JS/HTML changes working properly.


Much appreciated!
Tagged:

Comments

  • Brian Mucha
    Brian Mucha
    Ancient Membership 2500 Comments 250 Likes Name Dropper
    Yea, I just did this project a little bit ago.


    I tried to keep it in the style from the examples, which was interesting. It sure was hard not to give up on YAHOO and revert to JQuery!


    This one does three things.
    • It adds an 'alert' box to the dashboard and email view/tab. 
    • It adds a new "My Events" view/tab, which uses the API to get all the events the participant has been registered for. 
    • It also adds the Boundless Fundraising "Go Social" tab for Charity Dynamics, along with their lightbox. You probably don't use their service so you'll want to remove those parts, but I left it in so you could see how to add as many views/tabs as you want. 
    I added the CSS I use in case you want to steal the My Events tab.


    BPM
  • Brian Mucha
    Brian Mucha
    Ancient Membership 2500 Comments 250 Likes Name Dropper
    So right at the top are the key entry points.

    var loadCustom = function() {


        YAHOO.Convio.PC2.Utils.require('pc2:registrationLoaded', 'pc2:constituentLoaded', 'pc2:configurationLoaded', 'pc2:wrapperLoaded', function() {

            customViews();

             addAlert();

        });


    };


    var loadCustomHandlers = function() {


        YAHOO.Convio.PC2.Utils.require('pc2:registrationLoaded', 'pc2:constituentLoaded', 'pc2:configurationLoaded', 'pc2:wrapperLoaded', function() {

            customHandlers();

        });

    };


    The Participant Center calls these two functions. (There are other examples commented out in the default content.)


    So the PC calls loadCustom. And in there I wait for the required items to be loaded, and my customViews function is called. Same story for CustomHandlers. 


    You can also see where I stuck addAlert in loadCustom- which is just a function to insert a DIV and some copy into an existing view.


    The customViews function defines new tabs for the Navigation, the actual new Views, and any Sidebars in those views.


    The customHandlers are bound to navigation events. So when the user navigates to the new Go Social tab, I make a call to the API to actually populate the view. And the My Events event handler shows how to handle sidebar clicks.



    BPM

Categories