Dynamically Changing Text in Blackbaud NetCommunity Using JavaScript

Posted by Whitt Meyer to Blackbaud NetCommunity on June 26th, 2012

Many of the elements in Blackbaud NetCommunity are rendered on the fly and then have a dynamically generated CSS ID applied to them:

<span id=”PC972_lblPersonal”>Donation Information</span>

Many of these objects can be altered by using the Language tab available in the part editor itself; however, there are instances where an item of text will persist and cannot be altered with the language tab itself. This is especially prominent in parts that do not have language tabs such as the Event Registration Form part and the Membership Form Part. Using JavaScript we can single out certain items and do a text replacement on them with a process called ‘getElementById’.

This tutorial assumes two things: one, that you are currently on Blackbaud NetCommunity 6.35 or greater, and two, that you already have a basic knowledge of JavaScript itself. Don’t let the second part deter you – this tutorial will do its best to help with that.

Assuming we already have our first part on the page (Formatted Text, Event Reg, Donation Form, etc.) we will first need to find our target ID. For this lesson we will be using this mock example:

<p id=”IWillChange”>I will change!</p>

Our statement above has a few main parts, the first being the type of HTML tag it is, <p> Paragraph, a unique id “IWillChange”, and finally the text within the tag. To change this we will want to create an unformatted text part (available in Blackbaud NetCommunity 6.35 and higher) and enter the following JavaScript.

Function changeText(){ <~ Defines our function
var IWillChange = document.getElementById(‘IWillChange’); <~ creates a Variable based on our ID
IWillChange.innerHTML = “I Have Changed!”; <~ Dictates what the new text will be
}

Window.onload = changeText; <~ When the page loads run our function

</script>

When the page loads, the initial “I will change!” should now read “I Have Changed!” Changing does not stop just at text however. By altering the innerHTML line we can also change styling as well

IWillChange.innerHTML = ‘<h2>I Have Changed!</h2>’; <~ notice the change to ‘from’ and the addition of HTML components.

While this small snippet of information only changed one item, this design practice could be used to change entire content sections on the fly. Blackbaud offers multiple services to assist in the building of projects as well as take your ideas and develop them into realities. We have options that range from Advanced Design Training all the way to fully localized customizations. Please contact Blackbaud Sales at (800) 443-9441 or your Account Executive for more information.

You can keep up with us on Twitter by following @bbsupport; we use the hashtag #bbnc when we discuss Blackbaud NetCommunity. Take a look at our Twitter Guide for more information.

http://twitter.com/paulmorriss Paul Morriss

This is a useful article. You could also describe how to do it using jQuery as from a recent version of NetCommunity (I can’t remember which) jQuery is included in every page anyway, and it’s a little bit neater when it comes to writing code to change text. I’ve come across differences between IE and other browsers and jQuery hides all that away.
http://twitter.com/BigCarpLilPond Art Bryman

This tutorial was very helpful. Once the unformatted text part is created, where on the page should it be inserted? Above the part that we want to change (let’s say the email user preferences part), or below?
Margaret Chidgey

I could not get this to work, using the exact examples that you gave in this article. I also note that your screen shots show function changeValue but your initial script uses function changeText. Which is correct?
And where should the unformatted text go – in the body tag with the part, in the header, or at the end of the body tag?