none
Not able to render actual Rich HTML content in SharePoint List Column RRS feed

  • Question

  • Hi,

    Recently I am facing problem to render data as HTML Rich text field in SharePoint list.I am adding <HTML><DIV><P><b>This is the test data to render in SPO</b></P></DIV></HTML> in list.When I am going to put the HTML format in multi line Rich Text field in SharePoint list.Then it is displaying the same string format.HTML tags are not rendered in display page.

    Please provide the way that I can display the Rich Text into actual HTML output in display page.I am using SharePoint 2013 Online with E3 licenses.If I am adding the same code in Script Editor then it working perfectly.But my requirement is not put the every record manually in Script Editor.

    Wednesday, February 1, 2017 7:23 AM

Answers

  • Hi Rakesh,

    We can use jQuery and REST API to set the field value.

    The following code for your reference, modify list name and field name in the code below and add it into a script editor web part in the list view page.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">   
    function AddListItem(){
    
    	var listName="CustomList13";
    	var itemType = GetItemTypeForListName(listName);
        var item = {
            "__metadata": { "type": itemType },
            "Title": "Test"+new Date(),
    		"RichTextField":"<HTML><DIV><P><b>This is the test data to render in SPO</b></P></DIV></HTML>"
        };
        
        $.ajax({
            url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
            type: "POST",
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(item),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
            success: function (data) {
                alert('Success');
                window.location.href=window.location.href;
            },
            error: function (data) {
                alert("Error");
            }
        });
    }
    
    // Get List Item Type metadata
    function GetItemTypeForListName(name) {
        return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
    }    
    </script>
    
    <input type="button" onclick="AddListItem()" value="AddListItem"/>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by Rakesh Varma1 Monday, February 6, 2017 8:02 AM
    Friday, February 3, 2017 8:33 AM
    Moderator

All replies

  • Hi,

    Please follow the steps below:

    1. New/Edit list item.

    2. Focus the Rich text field.

    3. You can see the ribbon below.

    4. Click "Edit Source" in ribbon.

    5. Copy your HTML code into the box, and click "OK" to save it.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, February 2, 2017 2:33 AM
    Moderator
  • Hi,

    Can you please let us know the browser you are using? There may be issues if you are not using the latest versions of browsers. Preferably, IE 9 & above. 


    Cheers,
    Maruthu
    Please click the 'Mark as Answer' if this post solves your problem or "Vote As Helpful" if it was useful! :)
    Explore the SharePoint

    Thursday, February 2, 2017 4:01 AM
  • Hi Dennis,

    Thank you very much for your response.This is the manual steps that we can put the HTML code in Edit Source control.Can we achieve this using the coding (Preferred Jquery) ? Since I am using SharePoint 2013 online.I do not need to perform this task manually.

    1- Shall we call the script editor by Jquery Code and insert the HTML code in Edit Source editor. (I do not perform steps manually).If yes then how we can get the Edit Source editor object by code.

    Your response will be highly appreciated.

    Regards,

    Rakesh

    Friday, February 3, 2017 7:52 AM
  • Hi Rakesh,

    We can use jQuery and REST API to set the field value.

    The following code for your reference, modify list name and field name in the code below and add it into a script editor web part in the list view page.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">   
    function AddListItem(){
    
    	var listName="CustomList13";
    	var itemType = GetItemTypeForListName(listName);
        var item = {
            "__metadata": { "type": itemType },
            "Title": "Test"+new Date(),
    		"RichTextField":"<HTML><DIV><P><b>This is the test data to render in SPO</b></P></DIV></HTML>"
        };
        
        $.ajax({
            url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
            type: "POST",
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(item),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
            success: function (data) {
                alert('Success');
                window.location.href=window.location.href;
            },
            error: function (data) {
                alert("Error");
            }
        });
    }
    
    // Get List Item Type metadata
    function GetItemTypeForListName(name) {
        return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
    }    
    </script>
    
    <input type="button" onclick="AddListItem()" value="AddListItem"/>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by Rakesh Varma1 Monday, February 6, 2017 8:02 AM
    Friday, February 3, 2017 8:33 AM
    Moderator
  • Hi Dennis,

    Thank you very much for your quick response.It is helpful for me.

    Regards,

    Rakesh

    Monday, February 6, 2017 8:04 AM