Can I customize BBNC Grow?

Hey Sara,



I've seen people use jquery without the API. I don't think you'd need it. I hope that helps!



Thanks!


Karen

Hey Sara,



I've never seen that, but I also think you don't need it. After to upload an image to NetCommunity when you go into that image you can click a button to replace it with a new image. Since the URL doesn't change that's how people would update the slides. I hope that makes sense.



Thanks!


Karen

Sara - we did release a new framework for building design driven (e.g. jQuery/Javascript/HTML) customizations we termed "custom content parts" in this past spring's 6.53 release.



This is currently being used by many customers who have either built or worked with our Blackbaud design teams to build slideshows, sliders, tabbed displays, and more. This framework allows you to be creative and works with all levels of BBNC (Spark, Grow, Pro) and BBIS and for fully hosted customers.



The beauty of this is that an experienced designer can create a part editor that makes it very easy for novice users to change content, rotate new images in, or generally manipulate without having to know jQuery/Javascript/HTML.



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.



As an example, our Blackbaud design team of ninjas has built an amazing responsive slideshow part which can be easily updated by novice users who just need to swap in new pictures and captions.

Sara - that slideshow and others custom content parts have been deployed on individual sites through work with Blackbaud design teams. It's an open framework though that customers could share with the community if they produce an interesting custom content part.



If you'd like to discuss deploying a slideshow solution for your site, you can email me (justin.morrow@blackbaud.com) or your account manager for more infomation.



In the longer term, we're going to evaluate how some "best practice" examples could be shipped by default for everyone though...

Sara,



Sure, he's another great example with code supporting it. Let's say you wanted to create a "tabbed" display custom content part where clicking on different tabs will show different content.



To do this, you can create a custom content part using the scripts below....







Paste this into the "editor" section for Custom Content Parts:



.FieldLabel {


width:70px;


}



Tabs



Use this part to create tabbed content with as many tabs as desired. The content for each tab can include HTML in order to create


rich content with images, links, and formatting.







Add Tab





")


tabInfo.attr('class', 'TabInfo');


tabInfo.append(CreateTabTextBox("Name", name));


tabInfo.append(CreateTabTextArea("Content", content));


tabInfo.append(CreateRemoveButton());


$(".MyEditorWrapper .Tabs").append(tabInfo)


}



function CreateTabTextBox(name, value) {


var textBox = $("");


textBox.val(value);



var label = $('')


label.html(name + ": ");



var field = $("
");


field.attr('class', name);


field.append(label);


field.append(textBox);



return field;


}



function CreateTabTextArea(name, value) {


var textBox = $("");


textBox.val(value);



var label = $('')


label.html(name + ": ");



var field = $("
");


field.attr('class', name);


field.append(label);


field.append(textBox);



return field;


}



function CreateRemoveButton() {


var r = $("
X


");


r.click(function () { $(this).parent().remove(); });


return r;


}



function SaveSettings() {


var settings = {};


settings.Tabs = [];



$(".ValidationWrapper").html("")



var isValid = true;



$('.MyEditorWrapper .Tabs .TabInfo').each(function () {


var name = $(this).find('.Name').find('input').val();


var content = $(this).find('.Content').find('textarea').val();


var tab = { name: name, content: content };


if (name && name.length > 0) {


settings.Tabs[settings.Tabs.length] = tab;


} else {


isValid = false;


}


});



if (isValid) {


BLACKBAUD.api.customPartEditor.settings = settings;


} else {


$(".ValidationWrapper").html("Name is required on all tabs.")


}


return isValid


}



function LoadFromSettings(settings) {


var validSettings = false;


if (settings) {


if (settings.Tabs) {


validSettings = true;


for (var i = 0; i < settings.Tabs.length; i++) {


var tab = settings.Tabs[i];


CreateTabInfo(tab.name, tab.content);


}


}


}


if (!validSettings) {


CreateTabInfo();


}


}


//END HELPER FUNCTIONS



//Bind Events


$(".AddTab").click(function () { CreateTabInfo(); });


BLACKBAUD.api.customPartEditor.onSave = SaveSettings;



//Load from previous settings


LoadFromSettings(BLACKBAUD.api.customPartEditor.settings);


})



--------------------------------------------------------------------------------------------


Paste this into Web page Display:



");


link.attr("href", "#" + label);


link.html(tab.name);


var header = $("");


header.append(link);


headers.append(header);



var content = $("");


content.attr("id", label);


content.html(tab.content);


wrapper.append(content);


}



function CreateTabsContent(parent, tabs) {


var headers = $("

");

var wrapper = $("");


wrapper.append(headers);



for (var i = 0; i < tabs.length; i++) {


CreateTabContent(headers, wrapper, tabs[i], i);


}



parent.append(wrapper);


return wrapper;


}


//END HELPER FUNCTIONS



var settings = args.settings;


if (settings) {


var tabs = settings.Tabs;



if (tabs && tabs.length > 0) {


var parent = $('#' + args.elementId);


var tabsContainer = CreateTabsContent(parent, tabs);


tabsContainer.tabs();


}


}


});


}

Here's what I did to get tabs working on our BBNC site. Hope it helps. Unfortunately no warranty or support provided ; - )



......



http://stalbansschool.org/page.aspx?p...







Here’s what they need to do to make it work:



1. Add this small line of CSS to the end of your custom stylesheet:



/* Add the code below to make custom tabs behave as expected in conjunction with jquery-ui.css which is hosted on https://ajax.googleapis.com/ajax/libs...


*/



.ui-tabs .ui-tabs-hide {


display: none !important;


}



2. Add this code to the various places for configuring a Custom Part for your OCC/ BBNC site. (NOTE: the headings for the various sections are in ALL caps and surrounded by /* */ like this: /*NAME:*/ -- obviously you don't enter these they just show you where to enter the code that follows.



/*NAME:*/


Tabs



/*DESCRIPTION:*/


Allows you to have tabbed content on page without reloading



/*INITIALIZE JAVASCRIPT FUNCTION:*/


CreateTabsPart



/*EDITOR:*/



.FieldLabel {


width:70px;


}



Tabs



Use this part to create tabbed content with as many tabs as desired. The content for each tab can include HTML in order to create


rich content with images, links, and formatting.







Add Tab





")


tabInfo.attr('class', 'TabInfo');


tabInfo.append(CreateTabTextBox("Name", name));


tabInfo.append(CreateTabTextArea("Content", content));


tabInfo.append(CreateRemoveButton());


$(".MyEditorWrapper .Tabs").append(tabInfo)


}



function CreateTabTextBox(name, value) {


var textBox = $("");


textBox.val(value);


var label = $('')


label.html(name + ": ");


var field = $("
");


field.attr('class', name);


field.append(label);


field.append(textBox);


return field;


}



function CreateTabTextArea(name, value) {


var textBox = $("");


textBox.val(value);


var label = $('')


label.html(name + ": ");


var field = $("
");


field.attr('class', name);


field.append(label);


field.append(textBox);


return field;


}



function CreateRemoveButton() {


var r = $("
X


");


r.click(function () { $(this).parent().remove(); });


return r;


}



function SaveSettings() {


var settings = {};


settings.Tabs = [];


$(".ValidationWrapper").html("")


var isValid = true;



$('.MyEditorWrapper .Tabs .TabInfo').each(function () {


var name = $(this).find('.Name').find('input').val();


var content = $(this).find('.Content').find('textarea').val();


var tab = { name: name, content: content };


if (name && name.length > 0) {


settings.Tabs[settings.Tabs.length] = tab;


} else {


isValid = false;


}


});



if (isValid) {


BLACKBAUD.api.customPartEditor.settings = settings;


} else {


$(".ValidationWrapper").html("Name is required on all tabs.")


}


return isValid



}



function LoadFromSettings(settings) {


var validSettings = false;


if (settings) {


if (settings.Tabs) {


validSettings = true;


for (var i = 0; i < settings.Tabs.length; i++) {


var tab = settings.Tabs[i];


CreateTabInfo(tab.name, tab.content);


}


}


}



if (!validSettings) {


CreateTabInfo();


}


}



//END HELPER FUNCTIONS



//Bind Events



$(".AddTab").click(function () { CreateTabInfo(); });


BLACKBAUD.api.customPartEditor.onSave = SaveSettings;



//Load from previous settings



LoadFromSettings(BLACKBAUD.api.customPartEditor.settings);


})



/*WEB PAGE DISPLAY:*/



");


link.attr("href", "#" + label);


link.html(tab.name);


var header = $("");


header.append(link);


headers.append(header);


var content = $("");


content.attr("id", label);


content.html(tab.content);


wrapper.append(content);


}



function CreateTabsContent(parent, tabs) {


var headers = $("

");

var wrapper = $("");


wrapper.append(headers);


for (var i = 0; i < tabs.length; i++) {


CreateTabContent(headers, wrapper, tabs[i], i);


}



parent.append(wrapper);


return wrapper;


}



//END HELPER FUNCTIONS



var settings = args.settings;


if (settings) {


var tabs = settings.Tabs;


if (tabs && tabs.length > 0) {


var parent = $('#' + args.elementId);


var tabsContainer = CreateTabsContent(parent, tabs);


tabsContainer.tabs();


}


}


});


}

Grrrr. Can't edit my REPLY had to comment here are files



Yikes. It looks like this forum strips out a lot of the necessary code you need.



Here are links to two .TXT files:



Custom CSS here:


https://www.dropbox.com/s/59ivdurr5t4...



Custom Part Info here:


https://www.dropbox.com/s/1dyqi5swpzp...