Customize the Knowledge page

Answers

• Options

  Shane_White Cireson Support Super IT Monkey ✭✭✭✭✭

  April 2019 edited April 2019 Answer ✓

  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

  5
• Options

  Kevin_Stacey Customer IT Monkey ✭

  April 2019

  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.
  

  1