Utilizing "Custom CONTENT Parts" ?

Gina Padgett · August 2013

I am new to BBNC (and .NET in general), however I am pretty well versed in JavaScript/CSS/HTML. I am aware of how to create custom FRAMEWORK parts (using visual studio, C#/VB etc), however in our install of BBNC in the custom parts section their is a "custom content part", which appears to only use javascript/html for the admin half of the part as well as the end user half of the part. I completed the "hello world" tutorial located here: https://www.blackbaud.com/files/suppo... however, it doesnt really tell me how to pass data from the admin part to the end user part. Does anyone have a tutorial or a point in the right direction? From what I can tell the custom content part is a new-ish feature to bbnc, so maybe no one has just gotten around to it yet? I'm fairly sure I have searched the entire web.

Chad 2 · August 2013

Replying to own post, after weeks of scouring the internet for help/tutorial/api documentation, and coming up with nothing useful, I finally just tracked back code in the editor window to a that is automatically generated below the code I enter into the custom content part creator. Using javascript and an onclick event I changed the type to type="text", and played with entering values manually until I discovered that by entering serialized info into the box it will pass the object into the display end of the part. Prior to figuring out that I should change that value, the part was just passing a blank to the next page. It's actually a pretty simple thing, there just doesnt appear to be any documentation on the custom CONTENT part ability, although there is a ton of info about creating custom framework part.

Chad 2 · August 2013

Replying to self again. After many more hours of research, focus groups, keyboard to head banging, diet mountain dew, rubber band flipping, etc, I have discovered that, in the EDITOR window of custom content parts, there is an object in the DOM located at window.BLACKBAUD.api.customPartEditor.settings that if you assign values to, those values will be passed into the DISPLAY section of the custom part.

so for instance if you did the following in javascript in the editor section:

set the "initialize javascript function" to helloworld (in the custom content part editor screen)

and then in the "Web page display" section did:

Sara Chapman Johnston · August 2013

Chad,

I am similarly head banging and rubber-band flipping right now...this is SO close to the information I need - could you repost so that your code snippets show up?

I would really appreciate it!

Justin Morrow · August 2013

Check out some updates to another topic where custom content parts have come up...

You can learn more about this by visiting our docs guide which has details about this, a Hello World example to build, and will be updated with more soon.

Can I customize BBNC Grow?

Chad Kennedy · August 2013

Sara:

Some example code to demonstrate how the object is moved from the editor to the web page display:

enter these values in the 'custom content part' window:

Initialize javascript function:

helloworld

Editor:


<br /><br/><script type="text&#47;javascript" language="javascript">
<br /><br/>function savesettings(){
<br /><br/>window&#46;BLACKBAUD&#46;api&#46;customPartEditor&#46;settings&#46;alertme = new Object();
<br /><br/>window&#46;BLACKBAUD&#46;api&#46;customPartEditor&#46;settings&#46;alertme = "Hello World!";
<br /><br/>}
<br /><br /><br/>$(document)&#46;ready(function(){
<br /><br/>	savesettings();
<br /><br/>});
<br /><br/><&#47;script>
<br /><br /><br/>Web page display:
<br /><br /><br/><script type="text&#47;javascript" language="javascript">
<br /><br/>function helloworld(p){
<br /><br/>	alert(p&#46;settings&#46;alertme);
<br /><br/>}
<br /><br/><&#47;script>
<br /><br/>

Obviously this is a poor example, but it demonstrates how BB moves the customPartEditor object between the admin editor and the front end display. You can utilize this to move settings for things like slideshows to the front end.

You can also make use of built in API features like the link selector and image uploader / selector by using the API calls like onclick="launchSelectImage();"

Hope that helps!

*Edit* didnt realize my earlier posts had the code edited out by the messaging system, sorry about that lol.

FURTHER EDIT:

Justin,

While the helloworld tutorial was a good start, it never explained how to move data from the editor to the display.

Sara Chapman Johnston · August 2013

Thanks - I really appreciate it!

Utilizing "Custom CONTENT Parts" ?

Comments

Categories