How to display the name of the person instead of the HTML format in SharePoint 2013. SharePoint Designer is not used

Question

During SharePoint migration from SP 2010 to 2013, the value of the column is displayed in HTML format instead of the person name as shown in the figure. enter link description here

this field has the following properties How to get the name of the person

We have not used SharePoint designer.

When we add an item ,owner of the role tab is displaying the current username by default and displaying in proper format but after saving the item, column value is shown in HTML format.

The code you sent below is working when in AllItems view and there is no Group By

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" 
  type="text/javascript"></script>
  <script type="text/javascript">
  SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function(ctx) {
            var fieldIndex=0;
            var fieldName="Owner of the role";           
            $(".ms-listviewtable tr th").each(function(i){ 
                if($(this).find("a").text().indexOf(fieldName)!=-1){
                    fieldIndex=i;
                }           
            });
            $(".ms-listviewtable>tbody>tr").each(function(){
                var tdObj=$(this).children("td").eq(fieldIndex);
                tdObj.html(tdObj.html().replace(/&lt;/g, '<').replace(/&gt;/g, 
   '>'));
            });

        }
     });
 });
 </script>

But now when the AllItems view is Grouped By a column("Role"),then the script shared by you mentioned above is not working, After F12,we have observered that there is a differnece in internal Javascript after group by field("Role"). Please find the internal javascript script screenshot(Not full script)

Answer 1

As a workaround, we can add the following code into a script editor web part in the list view page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function(ctx) {
            var fieldIndex=0;
            var fieldName="Owner of the role";           
            $(".ms-listviewtable tr th").each(function(i){ 
                if($(this).find("a").text().indexOf(fieldName)!=-1){
                    fieldIndex=i;
                }           
            });
            $(".ms-listviewtable>tbody>tr").each(function(){
                var tdObj=$(this).children("td").eq(fieldIndex);
                tdObj.html(tdObj.html().replace(/&lt;/g, '<').replace(/&gt;/g, '>'));
            });

        }
    });
});
</script>

If this field is a custom column, I suggest you check the source code of this custom column.

In SharePoint 2013, if you want to show the current user in user field by default in new item form. we can using the code below to achieve it. Create a new user field, copy the data from the issue field to the new field, add the code into script editor web part in new form page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    var userid = _spPageContextInfo.userId;
    function GetCurrentUser() {
        var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";
        var requestHeaders = { "accept" : "application/json;odata=verbose" };
        $.ajax({
            url : requestUri,
            contentType : "application/json;odata=verbose",
            headers : requestHeaders,
            success : onSuccess,
            error : onError
        });
    }
    function onSuccess(data, request){
        var loginName = data.d.Title;
        SetUserFieldValue("Owner of the role",loginName);
    }
    function onError(error) {
    //alert(error);
    }
    function SetUserFieldValue(fieldName, userName) {
        var _PeoplePicker = $("div[title='" + fieldName + "']");
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        var _PeoplePickerEditor = $("input[title='" + fieldName + "']");
        _PeoplePickerEditer.val(userName);
        var _PeoplePickerObject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
        _PeoplePickerObject.AddUnresolvedUserFromEditor(true);
    }
    GetCurrentUser();
});
</script> 

If you add list view web part in home page, save the code below into a js file "convertHTML.js", and upload the file into Site Assets library, then reference the file in Web Part property JS LINK(~site/SiteAssets/convertHTML.js).

(function () { 

    // jQuery library is required in this sample 
    // Fallback to loading jQuery from a CDN path if the local is unavailable 
    (window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.12.4.min.js"><\/script>')); 
    // Create object that have the context information about the field that we want to change it's output render  
    var convertHTMLContext = {};
    convertHTMLContext.Templates = {};  
    convertHTMLContext.Templates.OnPostRender = convertHTMLOnPostRender; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(convertHTMLContext); 

})();

// This function provides the rendering logic 
function convertHTMLOnPostRender(ctx) {
    var fieldIndex=0;
    var fieldName="Owner of the role";           
    $(".ms-listviewtable tr th").each(function(i){ 
        if($(this).find("a").text().indexOf(fieldName)!=-1){
            fieldIndex=i;
        }           
    });
    $(".ms-listviewtable>tbody>tr").each(function(){
        var tdObj=$(this).children("td").eq(fieldIndex);
        tdObj.html(tdObj.html().replace(/&lt;/g, '<').replace(/&gt;/g, '>'));
    }); 
}

Answer 2

Open the list or view page in the designer & you will found the XSL code for the particular people editor showed

<xsl:value-of select=”@Column_x0020_Name”/>

You have to add another parameter disable-output-escaping=”yes” to that line. Now your code read for that line will be

<xsl:value-of select=”@Column_x0020_Name” disable-output-escaping=”yes”/>

Then after you will get desired output in your browser.

Answer 3

When you edit your web Part, Under Miscellaneous, select the Server Render Checkbox. It is working fine for me.