I have a CAML query that grabs among other things a field with Multiple Lines of Text data type (used to hold an address) but when I put it out to HTML it is displayed as a single line.

Is there any sort of built-in method I can use (similar to the nl2br() function in PHP) either in CAML or Sp.js to render it on multiple lines, as it would appear when looking at the list directly through the standard interface?

Full code below - the bits this question relates to are the 'company' rather than 'contact' functions, specifically the thisCompanyAddress variable which is the one that needs rendered as multiline in thisCompanyMarkupBlock.

<div id="contactsSpace">Change me</div>
<p />
<div id="companiesSpace">Change me</div>
<p />
<div id="thisCompanySpace"></div>

<script type="text/javascript">
var clientContext;
var oWeb;
var contactsList;
var companiesList;
var allContacts;
var allCompanies;
var thisCompany;
var thisCompanyEnum;
var contactEnum;
var contactsMarkupBlock = "<b>Contacts</b><br /><select id='contactsDropdown'>";
var companiesMarkupBlock = "<b>Companies</b><br /><select id='companiesDropdown'>"

function loadCompany() {
  var companySelector = document.getElementById('companiesDropdown');
  var currentCompanyId = companySelector.options[companySelector.selectedIndex].value;
  var camlQuery = new SP.CamlQuery();
  var camlQueryString = "<View><Query><Where><Eq><FieldRef Name=\"ID\" /><Value Type=\"Counter\">";
  camlQueryString += currentCompanyId;
  camlQueryString += "</Value></Eq></Where></Query></View>";
  thisCompany = companiesList.getItems(camlQuery);

function getThisCompany() {
  thisCompanyEnum = thisCompany.getEnumerator();
  while (thisCompanyEnum.moveNext()) {
      var currentCompany = thisCompanyEnum.get_current();
      var thisCompanyName = currentCompany.get_item('companyName');
      var thisCompanyPhone = currentCompany.get_item('companyPhone');
      var thisCompanyUrl = currentCompany.get_item('companyUrl');
      var thisCompanyLogo = currentCompany.get_item('companyLogo');
      thisCompanyLogo = thisCompanyLogo.get_url();
      var thisCompanyAddress = currentCompany.get_item('companyAddress');
      var thisCompanyMarkupBlock = "<table><tr><td colspan=2><b>";
      thisCompanyMarkupBlock += thisCompanyName;
      thisCompanyMarkupBlock += "</b></td></tr><tr><td colspan=1 valign=top><img height=100 width=100 src='";
      thisCompanyMarkupBlock += thisCompanyLogo;
      thisCompanyMarkupBlock += "' /></td><td colspan=1 valign=top>";
      thisCompanyMarkupBlock += thisCompanyAddress;
      thisCompanyMarkupBlock += "<p /><i>";
      thisCompanyMarkupBlock += thisCompanyPhone;
      thisCompanyMarkupBlock += "</i><br /><a href=";
      thisCompanyMarkupBlock += thisCompanyUrl;
      thisCompanyMarkupBlock += ">Visit company website</a></td></tr></table>";

      document.getElementById('loadDetailsSpace').innerHTML = thisCompanyMarkupBlock;

function loadContact() {
  var contactSelector = document.getElementById('contactsDropdown');
  var currentContactId = contactSelector.options[contactSelector.selectedIndex].value;
  document.getElementById('userDataSlot2').innerHTML = currentContactId;

function getCurrentList(listName) {
      thisList = oWeb.get_lists().getByTitle(listName);
      return thisList;

function runOnFail() {
    alert("Failed to get client context");

function runOnSuccess() {
    var camlQuery = new SP.CamlQuery();
    var camlQueryString = "<Query><OrderBy><FieldRef Name='ID' /></OrderBy></Query>";
    allContacts = contactsList.getItems(camlQuery);
    allCompanies = companiesList.getItems(camlQuery);

function runOnSecondFail() {
    alert("Failed to issue CAML query");

function runOnSecondSuccess() {
  var contactEnum = allContacts.getEnumerator();
  while (contactEnum.moveNext()) {
      var currentContact = contactEnum.get_current();
      var thisContactId = currentContact.get_item('ID');
      var thisContactEmail = currentContact.get_item('primaryEmail');
      contactsMarkupBlock += "<option value='";
      contactsMarkupBlock += thisContactId;
      contactsMarkupBlock += "'>";
      contactsMarkupBlock += thisContactEmail;
      contactsMarkupBlock += "</option>";

  var companyEnum = allCompanies.getEnumerator();
  while (companyEnum.moveNext()) {
      var currentCompany = companyEnum.get_current();
      var thisCompanyId = currentCompany.get_item('ID');
      var thisCompanyName = currentCompany.get_item('companyName');
      companiesMarkupBlock += "<option value='";
      companiesMarkupBlock += thisCompanyId;
      companiesMarkupBlock += "'>";
      companiesMarkupBlock += thisCompanyName;
      companiesMarkupBlock += "</option>";

  companiesMarkupBlock += "</select><input id='loadCompanyId' type='button' value='Load' onClick='loadCompany();' />";
  contactsMarkupBlock += "</select><input id='loadContactId' type='button' value='Load' onClick='loadContact();' />";

  document.getElementById('contactsSpace').innerHTML = contactsMarkupBlock;
  document.getElementById('companiesSpace').innerHTML = companiesMarkupBlock;

function getContacts() {
    clientContext = SP.ClientContext.get_current(); 
    oWeb =  clientContext.get_web();
    contactsList = getCurrentList('Contacts');
    companiesList = getCurrentList('Companies');

  • 1
    can you share the code snippet that you are using to fetch multiple lines of text ? Commented Jul 24, 2017 at 13:13
  • Edited and added... the code is quite big as it does some other stuff, but the relevant bits are in the 'getThisCompany' function (specifically the thisCompanyAddress value). Commented Jul 24, 2017 at 13:25
  • Can you update your question with the response from the server, particularly the Response Body? Commented Jul 25, 2017 at 4:17


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.