Customising HTML

Options
Hey everyone,

I'm an experienced front-end developer and have been tasked with applying some fixes to an NC instance.


In all honesty, what's there right now is terrible. Those who have gone before me have been problem solvers for sure but it resembles something of spaghetti code that is only going to cause problems further down the road.


Rather than add to the spaghetti, it's far more pragmatic to rewrite things.


From what I could tell in my background reading, the only way to customise HTML is to overwrite the controls? Given I don't have access to the server, that's not possible.


So really looking for best way of doing things.


The idea behind NC is nice but it really doesn't fit into a modern web workflow.


Any help appreciated.


Steven

 
Tagged:

Comments

  • Hello Steven, I too am a developer who has struggled with NetCommunity's  poorly written platform. I have found a few alternative methods of extending NetCommunity, but nothing terrific.


    NetCommunity relies on ASP postbacks to process front-end data. You cannot pass data from one part of a page to another via JS, I have tried many methods of doing this. The only method that worked partially was creating localstorage values, but even that was unreliable. NetCommunity's API is poorly documented and the only publically exposed method is account creation as far as I know.


    If you're familiar with PHP or cURL, I have created some scripts that play well with the postbacks and also properlly pass hidden ASP form values with each request. So far I've been able to create a user, login a user / pull their info, submit forms, etc... If you'd like to try out these scripts I'm happy to share, though they are still in development.


    As a side note, you can inject JS / jQuery into unformatted parts, though due to the postback restrictions, you will not get very far.

    Feel free to shoot me an email: mail@chrismcgrane.com


    -Chris


     
  • Chris McGrane:

    Hello Steven, I too am a developer who has struggled with NetCommunity's  poorly written platform. I have found a few alternative methods of extending NetCommunity, but nothing terrific.


    NetCommunity relies on ASP postbacks to process front-end data. You cannot pass data from one part of a page to another via JS, I have tried many methods of doing this. The only method that worked partially was creating localstorage values, but even that was unreliable. NetCommunity's API is poorly documented and the only publically exposed method is account creation as far as I know.


    If you're familiar with PHP or cURL, I have created some scripts that play well with the postbacks and also properlly pass hidden ASP form values with each request. So far I've been able to create a user, login a user / pull their info, submit forms, etc... If you'd like to try out these scripts I'm happy to share, though they are still in development.


    As a side note, you can inject JS / jQuery into unformatted parts, though due to the postback restrictions, you will not get very far.

    Feel free to shoot me an email: mail@chrismcgrane.com


    -Chris


     

    Thanks Chris.


    I noticed that this page https://www.yorkspace.net/events/uk has much more customised markup for the event listing than the NC I'm working on. Ours currently uses a table but the York site is a series of divs.


    I can't see how I'd alter that as appropriate.


    In the main I don't really need anything particularly dynamic, just being able to change markup, add classes etc would suffice.


     

  • Hello Steven,


    The example you've provided shows a self-hosted NetCommunity site where they have modified the actual platform to use divs over tables. This is not something you will be able to accomplish easily with JS as a hosted client.


    Chris
  • As it transpires, we're self-hosted too, so this should be possible.
  • If you're self hosted than you can find where the tables are being generated pretty easily in the source.
  • Thanks Chris,

    Does that apply to general page templates and layouts then? Can these be done in your IDE/Text editor and then upload to the server rather than having to upload via the NC admin interface.
  • Wow - just created an empty template and it weighs in at just under 1Mb with about 3 different jQuery libraries and a ton of other scripts for various purposes.

     
  • You should be able to edit the core files and upload back to the server. I imagine it's some ASP script that is responsible for the abyss of nested tables.


    As a hosted client, I modify html structure with jQuery. The multiple references to jQuery are frustrating, even if you remove them with JS, they are still loaded as resources. I had to mess with some noConflict calls to properly inject custom JS globally. While our site is still in development, you can see an example of some heavy NC customization.
  • Lovely site. 


    I'm used to having a blank canvas when it comes to front-end dev, so having all of this junk is such a pain, never mind having to upload CSS/markup into a textarea - it just doesn't fit into a modern web workflow.
  • Thanks Steven! I agree, NetCommunity was not meant for developers, nor was it created by real developers. We do what we can to improve this system because Blackbaud does not seem to adopt any community feature requests for this platform. 


    Chris
  • Steven, we've been using NC since 2011 and it's been a rough go. Last year we did a redesign and since most of the NC forms are table-based, what I ended up doing was completely hiding them via CSS and then creating my own forms in an unformatted text part. I then used jQuery to connect my form fields with the hidden NC forms. So when someone fills out my custom 'FirstName' field, it is automatically filling out the NC form 'FirstName' field. And when the Submit button is clicked, it actually triggers the click event on the NC form.


    It takes extra time and effort, but doing it this way has allowed me to set up the website exactly how I want it (mostly).
  • By the way, maf.org is our site.

  • Lance, which forms on the MAF site are you referencing? I'm on the donation form and the inputs are still held within tables, breaking responsiveness. 

    84cee1c136cf039344129d219f515fd5-huge-ed


    Other than that, the site looks nice.

     
  • I was recently able to complete a transaction using Phantom, anyone consider using a headless browser to navigate postbacks?


    CM
  • Hi Chris,


    The Donate form parts are all custom. The Donation Checkout form is not, but I've used jQuery to manipulate the tables in order to put the labels above the form fields. I've thought about hiding the checkout form and building my own, but BBNC seems to pull other information into this page from the previous Donate pages, and since I have many donation forms there were enough unknowns that I didn't want to risk it.


    Lance

Categories