What does your PC2 look like?

Casey Flinn

Hello TeamRaiser Clients,

Its winding down here at summit 2010 and one of the theme questions I have been fielding is "how are other clients customizing / what are they doing with PC2?" Well, I have the benefit of getting to see a good cross section of what everyone is doing with PC2, but I though It would be nice if everyone who is using PC2 could post a screenshot of their PC2 homepage for everyone to see.

I have been able to have a lot of conversations about "well let tell you about what is doing with their PC2..." but lets cut out the middle man (errrr....product manager) and share.

Any takers?

Casey Flinn

Product Strategy Manager

Dan Krumm

Casey,

This is grabed from the "Preview Participant Center" link of one of our recent PC2 deployments.

Dan

Casey Flinn

Dan Krumm:

Casey,

This is grabed from the "Preview Participant Center" link of one of our recent PC2 deployments.

Dan

Dan,

looks great!

I've attached a screenshot of my test page to point out a few things:

1) Ive enabled out Social Sharing integration with Gigya so the share components appear

2) I see that you added a quick links section in the admin defined content area...I totally heard everyone that the links on the right side were not easy to see so we updated the user interface in our latest fall release to call out the right hand nav quick links section better.

3) we also added an "enter a gift button" in the default version of PC2 in the latest fall release.

Brian Mucha

Casey Flinn:

Dan,

looks great!

I've attached a screenshot of my test page to point out a few things:

1) Ive enabled out Social Sharing integration with Gigya so the share components appear

2) I see that you added a quick links section in the admin defined content area...I totally heard everyone that the links on the right side were not easy to see so we updated the user interface in our latest fall release to call out the right hand nav quick links section better.

3) we also added an "enter a gift button" in the default version of PC2 in the latest fall release.

Dan, pretty inspirational.

So, how did you guys customize your PC2?

I'm making an effort to not copy the PC2 directory and break myself off from updates, but I can't find a way to add a link to my own style sheet to override the Convio styles.

Custom.css is site wide, so I really would like a way to add a different style sheet to each TR's PC2.

My first thought was the ] tag, but that doesn't seem to work from the Edit Participant Center Wrapper field in the PC2 config.

I also tried to add the link to my styles sheet right there, putting it (invalidly) in the body - which works great in everything except Internet Explorer.

Regards, Brian

Noel Beebe

Brian Mucha:

Dan, pretty inspirational.

So, how did you guys customize your PC2?

I'm making an effort to not copy the PC2 directory and break myself off from updates, but I can't find a way to add a link to my own style sheet to override the Convio styles.

Custom.css is site wide, so I really would like a way to add a different style sheet to each TR's PC2.

My first thought was the ] tag, but that doesn't seem to work from the Edit Participant Center Wrapper field in the PC2 config.

I also tried to add the link to my styles sheet right there, putting it (invalidly) in the body - which works great in everything except Internet Explorer.

Regards, Brian

Hey Brian,

Yes, I'm stalking you!  No, not really... I just get notified whenever someone comments on a TeamRaiser thread.  Just wanted to mention that with the latest release, you should now find that you have the ability to create custom styles and javascript for your Participant Center through the TeamRaiser admin interface.  You can also manage different Participant Centers for different events pretty easily.  To get there, go to Fundraising > TeamRaiser and notice there's a new "Participant Centers" tab. So, you should no longer have to copy the PC2 directory as you mention below.  Attaching a screenshot of where to find this.

Thanks,

Noel

Casey Flinn

Noel Beebe:

Hey Brian,

Yes, I'm stalking you!  No, not really... I just get notified whenever someone comments on a TeamRaiser thread.  Just wanted to mention that with the latest release, you should now find that you have the ability to create custom styles and javascript for your Participant Center through the TeamRaiser admin interface.  You can also manage different Participant Centers for different events pretty easily.  To get there, go to Fundraising > TeamRaiser and notice there's a new "Participant Centers" tab. So, you should no longer have to copy the PC2 directory as you mention below.  Attaching a screenshot of where to find this.

Thanks,

Noel

All,

Here is the Feature Summary Doc from our Fall 2010 release that reviewes all the features that make PC2 easier to customize: http://community.customer.convio.com/docs/DOC-3035

Casey Flinn

Convio Product Management

Brian Mucha

Casey Flinn:

All,

Here is the Feature Summary Doc from our Fall 2010 release that reviewes all the features that make PC2 easier to customize: http://community.customer.convio.com/docs/DOC-3035

Casey Flinn

Convio Product Management

Awesome. Excellent. Love it. Thanks guys!

Regards, Brian

Brian Mucha

Brian Mucha:

Awesome. Excellent. Love it. Thanks guys!

Regards, Brian

So, here's a weird thing. If I set the width of the PC2 center to 100% then all versions of Internet Explorer show a funny character in front of the currency symbol on the PC2 home page.

So if I add this to my custom.css...

.yui-skin-ux #doc2

{

    width: 100%;

}

...then explorer shows...

Â$600.00

That  character appears in both the Raised and Goal amount.

The actual html code for those values seems to be populated via innerHTML in a script or something, as it doesn't appear in the actual generated page source. That makes this hard to figure out!

Why would these two things be related? Google mentions Character Encoding as a cause of this in other circumstances, but the encoding meta tag seems correct (UTF-8.) BUT, if I change the character encoding from UTF-8 to Central European using the view menu in firefox then I see that same character there too.

Why does setting the width of a div break character encoding?

Regards, Brian

Noah Cooper

Brian Mucha:

So, here's a weird thing. If I set the width of the PC2 center to 100% then all versions of Internet Explorer show a funny character in front of the currency symbol on the PC2 home page.

So if I add this to my custom.css...

.yui-skin-ux #doc2

{

    width: 100%;

}

...then explorer shows...

Â$600.00

That  character appears in both the Raised and Goal amount.

The actual html code for those values seems to be populated via innerHTML in a script or something, as it doesn't appear in the actual generated page source. That makes this hard to figure out!

Why would these two things be related? Google mentions Character Encoding as a cause of this in other circumstances, but the encoding meta tag seems correct (UTF-8.) BUT, if I change the character encoding from UTF-8 to Central European using the view menu in firefox then I see that same character there too.

Why does setting the width of a div break character encoding?

Regards, Brian

Brian,

This is a known bug in PC2.

You can workaround this with a little JavaScript in custom.js:

YAHOO.Convio.PC2.Utils.formatCurrency=function (amount) { //workaround for bug #50981
     YAHOO.log("formatCurrency: Cents=" + amount, "info", "convio_utils.js");
     var currencyLocale = YAHOO.Convio.PC2.Config.getCurrencyLocale();
     var retVal;
     if (!dojo.currency) {
          YAHOO.log("Dojo currency module was unexpectedly not available.", "error", "convio_utils.js");
     } else {
          if (currencyLocale === "en_US") {
               retVal = dojo.currency.format(amount / 100, {locale: "en-us", currency: "USD"});
          } else if (currencyLocale === "en_CA") {
               retVal = dojo.currency.format(amount / 100, {locale: "en-ca", currency: "CAD"});
               retVal = retVal.replace("CA$", "$");
          } else if (currencyLocale === "en_GB") {
               retVal = dojo.currency.format(amount / 100, {locale: "en-gb", currency: "GBP"});
          } else if (currencyLocale === "es_US") {
               retVal = dojo.currency.format(amount / 100, {locale: "en-us", currency: "USD"});
               retVal = retVal.replace("$", "US$");
          } else if (currencyLocale === "fr_CA") {
               retVal = dojo.currency.format(amount / 100, {locale: "fr-ca", currency: "CAD"});
               retVal = retVal.replace("$CA", "$");
          } else {
               retVal = dojo.currency.format(amount / 100, {locale: "en-us", currency: "USD"});
          }
          retVal = retVal.replace(/\\xa0/g, " ").replace(/\\u00C2/g,'');
     }
     YAHOO.log("formatCurrency: String=" + retVal, "info", "convio_utils.js");
     return retVal;
}

Brian Mucha

Noah Cooper:

Brian,

This is a known bug in PC2.

You can workaround this with a little JavaScript in custom.js:

YAHOO.Convio.PC2.Utils.formatCurrency=function (amount) { //workaround for bug #50981
     YAHOO.log("formatCurrency: Cents=" + amount, "info", "convio_utils.js");
     var currencyLocale = YAHOO.Convio.PC2.Config.getCurrencyLocale();
     var retVal;
     if (!dojo.currency) {
          YAHOO.log("Dojo currency module was unexpectedly not available.", "error", "convio_utils.js");
     } else {
          if (currencyLocale === "en_US") {
               retVal = dojo.currency.format(amount / 100, {locale: "en-us", currency: "USD"});
          } else if (currencyLocale === "en_CA") {
               retVal = dojo.currency.format(amount / 100, {locale: "en-ca", currency: "CAD"});
               retVal = retVal.replace("CA$", "$");
          } else if (currencyLocale === "en_GB") {
               retVal = dojo.currency.format(amount / 100, {locale: "en-gb", currency: "GBP"});
          } else if (currencyLocale === "es_US") {
               retVal = dojo.currency.format(amount / 100, {locale: "en-us", currency: "USD"});
               retVal = retVal.replace("$", "US$");
          } else if (currencyLocale === "fr_CA") {
               retVal = dojo.currency.format(amount / 100, {locale: "fr-ca", currency: "CAD"});
               retVal = retVal.replace("$CA", "$");
          } else {
               retVal = dojo.currency.format(amount / 100, {locale: "en-us", currency: "USD"});
          }
          retVal = retVal.replace(/\\xa0/g, " ").replace(/\\u00C2/g,'');
     }
     YAHOO.log("formatCurrency: String=" + retVal, "info", "convio_utils.js");
     return retVal;
}

Excellent. Thanks Noah!

Regards, Brian

Brian Mucha

Okay, here's what I came up with. (Thanks to Dan for the rounded buttons idea.)

Regards, Brian

Casey Flinn

Brian Mucha:

Okay, here's what I came up with. (Thanks to Dan for the rounded buttons idea.)

Regards, Brian

Brian,

Thanks for posting.

I see that you put PC2 into a pagewrapper - how did that work for you any feedback would be appreciated.

Thanks,

Casey Flinn

Convio Product Management

Brian Mucha

Casey Flinn:

Brian,

Thanks for posting.

I see that you put PC2 into a pagewrapper - how did that work for you any feedback would be appreciated.

Thanks,

Casey Flinn

Convio Product Management

Love it. I think it really makes it look more finished and part of the parent site.

Thanks to everyone on this thread for the nudge.

Regards, Brian

Brian Mucha

Brian Mucha:

Love it. I think it really makes it look more finished and part of the parent site.

Thanks to everyone on this thread for the nudge.

Regards, Brian

I have a little trick for the AdditionalHTMLTags for the PageWrapper.

<link rel="stylesheet" type="text/css" href="../_wrappers/marathonteam/2011/layout-defaults.css" />

]:onation2::

<link rel="stylesheet" type="text/css" href="../_wrappers/marathonteam/2011/layout-tweaks-donate.css" />

::

]::TellAFriend::

<link rel="stylesheet" type="text/css" href="../_wrappers/marathonteam/2011/layout-tweaks-taf.css" />

::

]:g=entry::

<link rel="stylesheet" type="text/css" href="../_wrappers/marathonteam/2011/layout-tweaks-home.css" />

::

]:g=personal::

<link rel="stylesheet" type="text/css" href="../_wrappers/marathonteam/2011/layout-tweaks-personal.css" />

::

]:g=team::

<link rel="stylesheet" type="text/css" href="../_wrappers/marathonteam/2011/layout-tweaks-team.css" />

::

]::sid=1170::

<link rel="stylesheet" type="text/css" href="../_wrappers/marathonteam/2011/layout-tweaks-pc2.css" />

::

<link rel="stylesheet" type="text/css" href="../_wrappers/marathonteam/2011/layout-tweaks-inside.css" />

]]]]]]]]]]]]

Basically, all this does is look at the current page's url to see which section of the TeamRaiser is displaying, and loads a style sheet for that section. This way my single PageWrapper can change pretty substancially as needed. For instance, I hide the sidebar and side navigation to make room for the PC2 and Tell-A-Friend. I change the masthead and move or hide just about everything else when on the entry page, and so on.

Neat. Nothing too amazing.

http://www.childrensmemorial.org/marathon

Regards, Brian

Dan Krumm

Casey Flinn:

Dan,

looks great!

I've attached a screenshot of my test page to point out a few things:

1) Ive enabled out Social Sharing integration with Gigya so the share components appear

2) I see that you added a quick links section in the admin defined content area...I totally heard everyone that the links on the right side were not easy to see so we updated the user interface in our latest fall release to call out the right hand nav quick links section better.

3) we also added an "enter a gift button" in the default version of PC2 in the latest fall release.

Casey,

We have been playing with embedding PC2 in a wrapper and are pretty excited about the results we are having thus far.  In the end, I am hoping to integrate the various PC2 pages directly into the site nav -  is a suggested method of linking from the wrapper to a specific "page" in the part center?

Thanks

Dan

Noah Cooper

Dan Krumm:

Casey,

We have been playing with embedding PC2 in a wrapper and are pretty excited about the results we are having thus far.  In the end, I am hoping to integrate the various PC2 pages directly into the site nav -  is a suggested method of linking from the wrapper to a specific "page" in the part center?

Thanks

Dan

I've done this for one client using a series of iframes. Here's how it works ...

First, I created the PageBuilder that contains the participant center (in this case called participant_center), with some JavaScript added to detect if it's inside of a frame with a specific pagename (participant_center_shim) and if so reload the parent frame with the PC2 view and subview passed in the URL of the parent.

]
<script type="text/javascript"
if(parent.window.location.href&&parent.window.location.href.indexOf('pagename=participant_center_shim')!=-1)
     ]x::
          parent.window.location='UserLogin?NEXTURL='+escape(parent.window.location.href);
     ::
          parent.window.location='SPageServer?pagename=participant_center#pc2='+parent.window.location.href.split('view=').split('&')+'-'+parent.window.location.href.split('subview=').split('&');
     ]]
</script>

Then, I created the parent PageBuilder page (participant_center_shim). This page checks if the user not logged in, if so it redirects them to UserLogin. It then checks, if they are logged in, if they are a participant of the specific event. If so, the iframe loads the participant center (which then kicks in the JavaScript above). If not, the parent window is redirected to the participant center which then automatically redirects to the TeamRaiser greeting page with an error that they aren't registered.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
]x::
     <!--user is not logged in-->
     <script type="text/javascript">
     window.location='UserLogin?NEXTURL=]&subview=]&fr_id=]&pgwrap=n]]';
     </script>
::
]art-type]]x::
     <!--user is logged in but not registered for the specified event-->
     <script type="text/javascript">
     window.location='TRC?fr_id=]';
     </script>
::
     <!--user is logged in and registered for the specified event-->
     <iframe src="TRC?fr_id=]" style="display:none;"></iframe>
]]]]
</body>
</html>

The final URL ends up looking like SPageServer?pagename=participant_center_shim&view=survey&subview=edit&fr_id=1234&pgwrap=n.

Let me know if that didn't make sense (I confused myself typing it out).

Brian Mucha

Dan Krumm:

Casey,

We have been playing with embedding PC2 in a wrapper and are pretty excited about the results we are having thus far.  In the end, I am hoping to integrate the various PC2 pages directly into the site nav -  is a suggested method of linking from the wrapper to a specific "page" in the part center?

Thanks

Dan

If the S409 tag gave the iframe a proper NAME then you could deal with it just like a normal frame.

<iframe id="embeddedParticipantCenter" name="PC2" class="seamless" src ="../marathonteam2011/dashboard.html" width="1000" height="560" frameBorder="0" scrolling="no" >
   <p>Your browser does not support iframes.</p>
</iframe>

Then your links could target that iframe like...



<a href="https://secure3.convio.net/cmf/marathonteam2011/dashboard.html#pc2=email-compose" target="PC2">Email Center</a>

Noah, could we either manually add the iframe code and include the name (rather than using the S409 tag?) Or perhaps we could inject that name with a bit of jQuery?

Regards, Brian

Noah Cooper

Brian Mucha:

If the S409 tag gave the iframe a proper NAME then you could deal with it just like a normal frame.

<iframe id="embeddedParticipantCenter" name="PC2" class="seamless" src ="../marathonteam2011/dashboard.html" width="1000" height="560" frameBorder="0" scrolling="no" >
   <p>Your browser does not support iframes.</p>
</iframe>

Then your links could target that iframe like...



<a href="https://secure3.convio.net/cmf/marathonteam2011/dashboard.html#pc2=email-compose" target="PC2">Email Center</a>

Noah, could we either manually add the iframe code and include the name (rather than using the S409 tag?) Or perhaps we could inject that name with a bit of jQuery?

Regards, Brian

Brian,

That's not the issue -- it's not possible to link directly to https://secure3.convio.net/cmf/marathonteam2011/dashboard.html#email-compose if the user hasn't already visited PC2 in their session. You'll note that URL has no fr_id, thus it has no idea which TeamRaiser is being requested. The fr_id is set in a cookie when the user navigates to https://secure3.convio.net/cmf/site/TRC?fr_id=1234. Once they've done that, subsequent requests can read the fr_id from the cookie.

Casey Flinn

Dan Krumm:

Casey,

We have been playing with embedding PC2 in a wrapper and are pretty excited about the results we are having thus far.  In the end, I am hoping to integrate the various PC2 pages directly into the site nav -  is a suggested method of linking from the wrapper to a specific "page" in the part center?

Thanks

Dan

Dan,

I have to say thanks to Noah for answering your question. When it comes to the technical "how-to" questions he is the guru.

Thanks,

Casey

Noah Cooper

Noah Cooper:

I've done this for one client using a series of iframes. Here's how it works ...

First, I created the PageBuilder that contains the participant center (in this case called participant_center), with some JavaScript added to detect if it's inside of a frame with a specific pagename (participant_center_shim) and if so reload the parent frame with the PC2 view and subview passed in the URL of the parent.

]
<script type="text/javascript"
if(parent.window.location.href&&parent.window.location.href.indexOf('pagename=participant_center_shim')!=-1)
     ]x::
          parent.window.location='UserLogin?NEXTURL='+escape(parent.window.location.href);
     ::
          parent.window.location='SPageServer?pagename=participant_center#pc2='+parent.window.location.href.split('view=').split('&')+'-'+parent.window.location.href.split('subview=').split('&');
     ]]
</script>

Then, I created the parent PageBuilder page (participant_center_shim). This page checks if the user not logged in, if so it redirects them to UserLogin. It then checks, if they are logged in, if they are a participant of the specific event. If so, the iframe loads the participant center (which then kicks in the JavaScript above). If not, the parent window is redirected to the participant center which then automatically redirects to the TeamRaiser greeting page with an error that they aren't registered.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
]x::
     <!--user is not logged in-->
     <script type="text/javascript">
     window.location='UserLogin?NEXTURL=]&subview=]&fr_id=]&pgwrap=n]]';
     </script>
::
]art-type]]x::
     <!--user is logged in but not registered for the specified event-->
     <script type="text/javascript">
     window.location='TRC?fr_id=]';
     </script>
::
     <!--user is logged in and registered for the specified event-->
     <iframe src="TRC?fr_id=]" style="display:none;"></iframe>
]]]]
</body>
</html>

The final URL ends up looking like SPageServer?pagename=participant_center_shim&view=survey&subview=edit&fr_id=1234&pgwrap=n.

Let me know if that didn't make sense (I confused myself typing it out).

One thing to note -- this process really should be a lot simpler and shouldn't require all those frames. PC2 was designed such that, if you use the URL for a specific page in the classic participant center, Convio will automatically redirect to the corresponding view in PC2. So, for example, you'd link to TRC?fr_id=1234&pg=mtype for the Email page, or TRC?fr_id=1234&pg=progress for the Progress page. There is an open bug, however, that prevents this from working for custom participant centers (bug #51971); instead of redirecting to the custom participant center, these links will redirect the user to the baseline /pc2/ directory.

Brian Mucha

Noah Cooper:

Brian,

That's not the issue -- it's not possible to link directly to https://secure3.convio.net/cmf/marathonteam2011/dashboard.html#email-compose if the user hasn't already visited PC2 in their session. You'll note that URL has no fr_id, thus it has no idea which TeamRaiser is being requested. The fr_id is set in a cookie when the user navigates to https://secure3.convio.net/cmf/site/TRC?fr_id=1234. Once they've done that, subsequent requests can read the fr_id from the cookie.

Ahh, I see. That makes sense. So that kills the manually coding the iframe idea. I still wonder if you could add the name tag to the iframe that the ] tag generates?

I tried to fool with it for a couple of minutes and it appears to add the name, but I just can't get the links to target. They just open a new window.

<script type="text/javascript">

$(document).ready(function() {

    $('#embeddedParticipantCenter').attr('name', 'embeddedParticipantCenter');

});

</script>

I did a quick search and it appears that adding the name attribute is a bit buggy in some browsers, so I stopped trying for this angle.

Regards, Brian

Noah Cooper

Brian Mucha:

Ahh, I see. That makes sense. So that kills the manually coding the iframe idea. I still wonder if you could add the name tag to the iframe that the ] tag generates?

I tried to fool with it for a couple of minutes and it appears to add the name, but I just can't get the links to target. They just open a new window.

<script type="text/javascript">

$(document).ready(function() {

    $('#embeddedParticipantCenter').attr('name', 'embeddedParticipantCenter');

});

</script>

I did a quick search and it appears that adding the name attribute is a bit buggy in some browsers, so I stopped trying for this angle.

Regards, Brian

]" "<iframe" ] replaceall]]

Dan Krumm

Noah Cooper:

]" "<iframe" ] replaceall]]

Thanks for the reply Noah - I was thinking along the same line as Brian, using a little Jquery to add a name to to the iframe but never got it to work.  I have tried your code suggestions but have not had any luck.  The 130 mod to the 409 tag looks promising but it doesn't render the part center in my tests.  Was that to be placed in a stand alone page or is there more to that idea that I am not seeing.  Thanks again for all the thought you have put in to this.

Dan