1

I have a number of team pages in the Pages library.

Each Page has a Content Editor Web Part that contain Intro text formatted with HTML/CSS like so:

<div>
  <h1>Intro Heading</h1>
  <p>Intro Text...</p>
</div>

I want users to be able to edit the headings and intros but I don't want them to destroy the HTML formatting.

Ideally I would like to use a list where users could edit/add/delete text in that list and the HTML would pull in that list data thus preserving the formatting. The list would look something like this:

  • 1 Single Line Of Text column
  • 1 Multi-line Text, plain text column

Then I would use inserts in the HTML to pull that information into the elements e.g.:

<div>
  <h1>[List Name:ID1:Heading]</h1>
  <p>[List Name:ID1:Intro]</p>
</div>

Thank you in advance!

Improve this question

2 Answers 2

Reset to default
1

I would create a custom page layout.

First, create a new content type based on the Page content type. Next, add your custom columns to the page layout content type. Then, create a Page Layout based on your new content type. Add your fields to the page layout where desired. Finally, add your new content type to your Pages library, and create pages based on it. For existing pages, change the content type and fill in the missing fields.

Hope this helps!

Improve this answer
1
  • Just re-reading this and it looks intriguing. I will test this out as it may be an excellent OOTB option!
    – neptr
    Dec 28, 2018 at 12:12
1

I found my answer in SPServices which is demonstrated beautifully here by Zakir HC:

Export contents of a sharepoint list to a html table

You can use SPServices jQuery Library and CAML query to get data from a SharePoint List and display that retrieved data in Content Editor Web Part where you would write your html table code.

To learn more about SPServices refer this: SPServices CodePlex

Before writing the below code in Content Editor Web Part make sure you download jquery-1.4.2.min.js from https://code.jquery.com/jquery/ and SPServices library from http://spservices.codeplex.com/releases/view/119578 and upload both in a document library.

In below code, "GetListItems" operation will get the list items.

Example:

<html>
<head>
<SCRIPT type=text/javascript src="http://MySPSite.com/sites/test/DocLib/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://MySPSite.com/sites/test/DocLib/jquery.SPServices-0.7.2.min.js></SCRIPT>
</head>

<body>
<table id="myHTMLTable" border=1 width="90%" align="center">
                    <tr align='left'>
                    <td><B>ID</B></td>
                    <td><B>EmpName</B></td>
                    <td><B>JobTitle</B></td>
                    <td><B>Department</B></td>
                    </tr>
</table>

<SCRIPT type=text/javascript>

getMyListData() ;

function getMyListData()
{                     
        var method = "GetListItems";                 
        var webURL =  $().SPServices.SPGetCurrentSite() ;                     
        var list = "MyCustomList";                      
        var fieldsToRead = "<ViewFields>"+"<FieldRef Name='Name' />" +"</ViewFields>";
        var query = "<Query><OrderBy><FieldRef Name='ID'  Ascending='True' /></OrderBy></Query>";                       

        $().SPServices
        ({
                    operation: method,
                    async: false, 
                    webURL: webURL,
                    listName: list,
                    CAMLViewFields: "<ViewFields Properties='True' />",
                    CAMLQuery: query,                                                                                     
                    completefunc: function (xData, Status)
                     {
                         $(xData.responseXML).SPFilterNode("z:row").each(function() 
                         {
                              var ID = $(this).attr("ows_ID");
                              var empName = $(this).attr("ows_EmpName");
                              var jobtitle =  $(this).attr("ows_JobTitle");
                              var dept =  $(this).attr("ows_Department"); 

                              $("#myHTMLTable").append("<tr align='middle'>" +
                               "<td align='left'>"+ID+"</td>" +
                               "<td align='left'>"+empName+"</td>" +
                               "<td align='left'>"+jobtitle+"</td>"  +                                    

                               "<td align='left'>"+dept+"</td>" +
                               "</tr>");
                           });
                   }
       });
       };

      </script>
      </body>
      </html>
Improve this answer
3
  • 1
    A drive-by suggestion - when you build pages like this, wrap your text fields with STSHtmlEncode(fieldname) - this will prevent XSS (cross site scripting) errors. SharePoint itself is safe on all of their forms and pages, but when you build a page up yourself, you need to encode text. You can test this by putting an alert('hi'); in one of your text fields - if it does, you aren't safe. Even if your site is internal it's a good thing to do.
    – Robin in Or
    Oct 17, 2017 at 19:44
  • @RobininOr How would I incorporate STSHtmlEncode in the example code I provided? I can't seem to get it to work.
    – neptr
    Dec 27, 2018 at 10:32
  • 1
    Sorry I didn't catch your query before now. I'd do this: var empName = STSHtmlEncode($(this).attr("ows_EmpName")); var jobtitle = STSHtmlEncode($(this).attr("ows_JobTitle")); var dept = STSHtmlEncode($(this).attr("ows_Department"));
    – Robin in Or
    Jan 11, 2019 at 17:50

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.