Customize the Knowledge page

Kevin_Stacey

Looking to see if it's possible to either modify the OOB 'Knowledge Base' (/View/0aef4765-0efa-4a65-84c1-324b09231223) to insert an HTML table like the image below? Or even if it was a new page with the table and the 'Search....' bar would suffice. We are looking to emulate our previous Sharepoint based knowledge base, we've found some users just like nice shiny buttons to push :0)

Thanks.

Shane_White

Hi Kevin!

I do not know the exact HTML you are trying to add in but I just made up a test HTML Table and added it into the OOB Knowledge Base Page using the below code, you would need to change the HTML after the kbElement.prepend to what it is you would like to add in and potentially mess around with formatting but this is the principle I believe you were going for:

$(document).ready(function () {

var mainPageNode = document.getElementById('main_wrapper');

var observer = new MutationObserver(function(mutations) {

var kbElement = $('.col-md-12.pad-bot-2');

//console.log(KBelement);

if (kbElement.length > 0) { //An Element Exists

kbElement.prepend('<div name="" class="col-md-12"> <table style="width:100%"> <tbody><tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </tbody></table> </div>')

observer.disconnect();

}

});

// configure the observer and start the instance.

var observerConfig = {attributes: true, childList: true, subtree: true, characterData: true };

observer.observe(mainPageNode, observerConfig);

});

Let me know if this helps!
Thanks,
Shane.

<Edit!> I forgot to say you need to add this to your Custom.Js file in your customspace folder

Shane_White

Hi Kevin!

I do not know the exact HTML you are trying to add in but I just made up a test HTML Table and added it into the OOB Knowledge Base Page using the below code, you would need to change the HTML after the kbElement.prepend to what it is you would like to add in and potentially mess around with formatting but this is the principle I believe you were going for:

$(document).ready(function () {

var mainPageNode = document.getElementById('main_wrapper');

var observer = new MutationObserver(function(mutations) {

var kbElement = $('.col-md-12.pad-bot-2');

//console.log(KBelement);

if (kbElement.length > 0) { //An Element Exists

kbElement.prepend('<div name="" class="col-md-12"> <table style="width:100%"> <tbody><tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </tbody></table> </div>')

observer.disconnect();

}

});

// configure the observer and start the instance.

var observerConfig = {attributes: true, childList: true, subtree: true, characterData: true };

observer.observe(mainPageNode, observerConfig);

});

Let me know if this helps!
Thanks,
Shane.

<Edit!> I forgot to say you need to add this to your Custom.Js file in your customspace folder

Kevin_Stacey

Thank you Shane, this does exactly what I was looking for! Though as you mentioned I have to work on the formatting within the HTML, it does place the table on the page so it's exactly what I needed.