none
Do you have JavaScript/JQuery code to iterate through list columns and get list column names and their values? RRS feed

  • Question

  • Hi there

    Do you have JavaScript/JQuery code to iterate through list columns and get list column names and their values?

    Thanks.

    Friday, March 10, 2017 6:52 PM

Answers

  • Hi,

    No problem now is more clear, there is a way more elegant, you can use jslink directly on the editform.aspx without any additional web part  (CEWP).

    In order to do that, open the SharePoint list on the browser, click on an item to go in the editform.aspx and edit the page:

    Here click on edit web part and in the web part properties menu open the tab "Miscellaneous" fill in the js link field with the value "~sitecollection/SiteAssets/FieldVisibility.js":

    This is the js file that you have to upload on SiteAssets or where you want (fill in the js link field with the right path of this file):

    (function () {
        var visibleFieldCtx = {};
        visibleFieldCtx.Templates = {};
        visibleFieldCtx.Templates.Fields = {
            "visible": {
                "EditForm": HidevisibleTemplate
            }
        };
    
        visibleFieldCtx.Templates.OnPostRender = function (ctx) {
            document.querySelectorAll(".csrHiddenField").forEach(function(field){
                var elements = document.getElementsByClassName("csrHiddenField");
                for(var i = 0, length = elements.length; i < length; i++) {
                    elements[i].parentElement.parentElement.parentElement.style.display = 'none';
                }
                
            });
        };
    
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(visibleFieldCtx);
    })();
    
    function HidevisibleTemplate(ctx) {
        var visibleField = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        var visibleFieldId = visibleField.fieldSchema.Id;
        var visibleFieldName = visibleField.fieldName;
        var visibleFieldDiv = visibleFieldName + '_' + visibleFieldId;
        var result = '<div><input id='+ visibleField.fieldSchema.Id +' type="text" class="csrHiddenField" name='+
            visibleField.fieldName +' hidden="false" /></div>';
        if (ctx.CurrentFieldValue === "Yes") {
            return SPFieldText_Edit(ctx);
        }
        else {
            return result;
        }
    }

    You can do the steps above also with CSOM.

    In this step:

    if (ctx.CurrentFieldValue === "Yes") {
            return SPFieldText_Edit(ctx);
        }
        else {
            return result;
        }

    my column is a simple single line of text with the value "Yes" for some items or "" for the others, keep in mind that if you have a different type column "Lookup, Yes/No......" you need to return the right type, I mean in my case if the value is "Yes" I'll return a type single line of text, therefore change it with your type column check the following list:

                         Text': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldText_Edit,
                            'NewForm': SPFieldText_Edit
                        },
                        'Number': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldNumber_Edit,
                            'NewForm': SPFieldNumber_Edit
                        },
                        'Integer': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldNumber_Edit,
                            'NewForm': SPFieldNumber_Edit
                        },
                        'Boolean': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_DefaultNoEncode,
                            'EditForm': SPFieldBoolean_Edit,
                            'NewForm': SPFieldBoolean_Edit
                        },
                        'Note': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldNote_Display,
                            'EditForm': SPFieldNote_Edit,
                            'NewForm': SPFieldNote_Edit
                        },
                        'Currency': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldNumber_Edit,
                            'NewForm': SPFieldNumber_Edit
                        },
                        'File': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldFile_Display,
                            'EditForm': SPFieldFile_Edit,
                            'NewForm': SPFieldFile_Edit
                        },
                        'Calculated': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPField_FormDisplay_Empty,
                            'NewForm': SPField_FormDisplay_Empty
                        },
                        'Choice': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldChoice_Edit,
                            'NewForm': SPFieldChoice_Edit
                        },
                        'MultiChoice': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldMultiChoice_Edit,
                            'NewForm': SPFieldMultiChoice_Edit
                        },
                        'Lookup': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldLookup_Display,
                            'EditForm': SPFieldLookup_Edit,
                            'NewForm': SPFieldLookup_Edit
                        },
                        'LookupMulti': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldLookup_Display,
                            'EditForm': SPFieldLookup_Edit,
                            'NewForm': SPFieldLookup_Edit
                        },
                        'Computed': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPField_FormDisplay_Default,
                            'NewForm': SPField_FormDisplay_Default
                        },
                        'URL': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldUrl_Display,
                            'EditForm': SPFieldUrl_Edit,
                            'NewForm': SPFieldUrl_Edit
                        },
                        'User': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldUser_Display,
                            'EditForm': SPClientPeoplePickerCSRTemplate,
                            'NewForm': SPClientPeoplePickerCSRTemplate
                        },
                        'UserMulti': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldUserMulti_Display,
                            'EditForm': SPClientPeoplePickerCSRTemplate,
                            'NewForm': SPClientPeoplePickerCSRTemplate
                        },
                        'DateTime': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldDateTime_Display,
                            'EditForm': SPFieldDateTime_Edit,
                            'NewForm': SPFieldDateTime_Edit
                        },
                        'Attachments': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldAttachments_Default,
                            'EditForm': SPFieldAttachments_Default,
                            'NewForm': SPFieldAttachments_Default
                        }

    Here my final result (gif with animation):

    https://1drv.ms/i/s!AoSfe1OOFU_QkotobMVdyM2oufpZog

    I hope will be useful for you.


    Giuliano De Luca - MCSD SharePoint, MCSD Web Applications, MCPS, MS. www.delucagiuliano.com Twitter: @giuleon Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.





    Sunday, March 12, 2017 3:55 PM

All replies

  • Hi,

    I suggest the REST API check this link:

    https://msdn.microsoft.com/en-us/library/office/dn292552.aspx

    You can follow the sample below, is perfect for your case:

    https://tjendarta.wordpress.com/2014/02/20/create-retrieve-update-and-delete-sharepoint-list-item-using-rest-api-and-jquery/

    Kind regards,


    Giuliano De Luca - MCSD SharePoint, MCSD Web Applications, MCPS, MS. www.delucagiuliano.com Twitter: @giuleon Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    Friday, March 10, 2017 9:11 PM
  • Hi Giuliano

    Though a good link, but it does not have a way to get all list columns, do you happen to know the code to get all columns?

    Thanks a lot.

    Friday, March 10, 2017 9:57 PM
  • Hi,

    you can use the same approach, you need to modify the url like this sample:

    /_api/web/lists/getbytitle('<list title>')/fields

    and here the result that you will receive:

    <?xml version="1.0" encoding="utf-8"?>
    <feed xml:base="https://site.sharepoint.com/sites/demo/_api/" xmlns="http://www.w3.org/2005/Atom" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:georss="http://www.georss.org/georss" xmlns:gml="http://www.opengis.net/gml">
        <id>31b604b9-01de-4f12-9d72-aa8881835939</id>
        <title />
        <updated>2017-03-10T22:04:13Z</updated>
        <entry>
            <id>https://site.sharepoint.com/sites/demo/_api/Web/Lists(guid'725db66b-014e-45ab-9ddf-e27f65bbbcbb')/Fields(guid'1d22ea11-1e32-424e-89ab-9fedbadb6ce1')</id>
            <category term="SP.Field" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
            <link rel="edit" href="Web/Lists(guid'725db66b-014e-45ab-9ddf-e27f65bbbcbb')/Fields(guid'1d22ea11-1e32-424e-89ab-9fedbadb6ce1')" />
            <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/DescriptionResource" type="application/atom+xml;type=entry" title="DescriptionResource" href="Web/Lists(guid'725db66b-014e-45ab-9ddf-e27f65bbbcbb')/Fields(guid'1d22ea11-1e32-424e-89ab-9fedbadb6ce1')/DescriptionResource" />
            <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/TitleResource" type="application/atom+xml;type=entry" title="TitleResource" href="Web/Lists(guid'725db66b-014e-45ab-9ddf-e27f65bbbcbb')/Fields(guid'1d22ea11-1e32-424e-89ab-9fedbadb6ce1')/TitleResource" />
            <title />
            <updated>2017-03-10T22:04:13Z</updated>
            <author>
                <name />
            </author>
            <content type="application/xml">
                <m:properties>
                    <d:AutoIndexed m:type="Edm.Boolean">false</d:AutoIndexed>
                    <d:CanBeDeleted m:type="Edm.Boolean">false</d:CanBeDeleted>
                    <d:ClientSideComponentId m:type="Edm.Guid">00000000-0000-0000-0000-000000000000</d:ClientSideComponentId>
                    <d:DefaultValue m:null="true" />
                    <d:Description></d:Description>
                    <d:Direction>none</d:Direction>
                    <d:EnforceUniqueValues m:type="Edm.Boolean">false</d:EnforceUniqueValues>
                    <d:EntityPropertyName>ID</d:EntityPropertyName>
                    <d:Filterable m:type="Edm.Boolean">true</d:Filterable>
                    <d:FromBaseType m:type="Edm.Boolean">true</d:FromBaseType>
                    <d:Group>Custom Columns</d:Group>
                    <d:Hidden m:type="Edm.Boolean">false</d:Hidden>
                    <d:Id m:type="Edm.Guid">1d22ea11-1e32-424e-89ab-9fedbadb6ce1</d:Id>
                    <d:Indexed m:type="Edm.Boolean">false</d:Indexed>
                    <d:InternalName>ID</d:InternalName>
                    <d:JSLink m:null="true" />
                    <d:PinnedToFiltersPane m:type="Edm.Boolean">false</d:PinnedToFiltersPane>
                    <d:ReadOnlyField m:type="Edm.Boolean">true</d:ReadOnlyField>
                    <d:Required m:type="Edm.Boolean">false</d:Required>
                    <d:SchemaXml>&lt;Field ID="{1d22ea11-1e32-424e-89ab-9fedbadb6ce1}" ColName="tp_ID" RowOrdinal="0" ReadOnly="TRUE" Type="Counter" Name="ID" PrimaryKey="TRUE" DisplayName="ID" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="ID" FromBaseType="TRUE" /&gt;</d:SchemaXml>
                    <d:Scope>/sites/demo/Lists/demoWebHook</d:Scope>
                    <d:Sealed m:type="Edm.Boolean">false</d:Sealed>
                    <d:Sortable m:type="Edm.Boolean">true</d:Sortable>
                    <d:StaticName>ID</d:StaticName>
                    <d:Title>ID</d:Title>
                    <d:FieldTypeKind m:type="Edm.Int32">5</d:FieldTypeKind>
                    <d:TypeAsString>Counter</d:TypeAsString>
                    <d:TypeDisplayName>Counter</d:TypeDisplayName>
                    <d:TypeShortDescription>Counter</d:TypeShortDescription>
                    <d:ValidationFormula m:null="true" />
                    <d:ValidationMessage m:null="true" />
                </m:properties>
            </content>
        </entry>
    Kind regards,


    Giuliano De Luca - MCSD SharePoint, MCSD Web Applications, MCPS, MS. www.delucagiuliano.com Twitter: @giuleon Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    Friday, March 10, 2017 10:07 PM
  • That is great! And how will I get the values of those columns (when using this code in EditForm.aspx) please?

    Thank you so much, almost there Giuliano.

    Friday, March 10, 2017 10:11 PM
  • Hi,

    I presume that you are building a custom editform.aspx, anyway if you already know the columns name you can specify these in the Url separated by comma to have the correspondents values:

    https://site.sharepoint.com/sites/demo/_api/web/lists/getbytitle('<list name>')/items?$select=Id,Title

    Otherwise you need to collect the columns name with a first REST API call and a second one to retrieve the values.

    Kind regards,


    Giuliano De Luca - MCSD SharePoint, MCSD Web Applications, MCPS, MS. www.delucagiuliano.com Twitter: @giuleon Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    Friday, March 10, 2017 10:25 PM
  • (I want to use a second call to retrieve values) What exactly is the code (REST api) to get a column's value please?

    (I am using Out of Box EditForm.aspx).

    Thanks so much.


    • Edited by ran009 Friday, March 10, 2017 10:32 PM
    Friday, March 10, 2017 10:31 PM
  • Hi,

    I tested this code on my SharePoint Site in a script editor web part and works:

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
    var App = window.App || {};
    
    App.initializePage = function () {
        // This code runs when the DOM is ready
        $(document).ready(function () {
            App.Read();
        });
    }
    App.Read = function () {
        var listName = "test";
        var url = _spPageContextInfo.webAbsoluteUrl;
    
        getListItems(listName, url, function (data) {
            var items = data.d.results;
    
            // Add all the new items
            for (var i = 0; i < items.length; i++) {
                $('#_results').append(items[i].Id + ":" + items[i].Title + "<br>")
            }
        }, function (data) {
            alert("Ooops, an error occured. Please try again");
        });
        // READ operation
        // listName: The name of the list you want to get items from
        // siteurl: The url of the site that the list is in. 
        // success: The function to execute if the call is sucesfull
        // failure: The function to execute if the call fails
        function getListItems(listName, siteurl, success, failure) {
            $.ajax({
                url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items",
                method: "GET",
                headers: { "Accept": "application/json; odata=verbose" },
                success: function (data) {
                    success(data);
                },
                error: function (data) {
                    failure(data);
                }
            });
        }
    }
    
    ExecuteOrDelayUntilScriptLoaded(App.initializePage, "sp.js");
    </script>
    <div Id="_results"></div>

    Kind regards,


    Giuliano De Luca - MCSD SharePoint, MCSD Web Applications, MCPS, MS. www.delucagiuliano.com Twitter: @giuleon Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.


    Friday, March 10, 2017 10:57 PM
  • Hi Giuliano,

    You are a kind man - really appreciated!

    However this code seems to fetch all list itesm - while I just need code this:

    ----

    - SP List has several fields, one of them is "ShowHide" of type Yes/No
    - When user checks "ShowHide" field:
    - The code will iterate through all the column names in a loop
    --- Will check if the column name starts with "yes" and have a not null value
    ----- If so then hide this field

    -----------

    Thanks a lot.

    Friday, March 10, 2017 11:41 PM
  • Hi,

    In this case you can add a filter to your REST API and select only the items with the value equal at Yes:

     $.ajax({
                url: siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$filter=ColumnName Eq 'Yes'",
                method: "GET",
                headers: { "Accept": "application/json; odata=verbose" },
                success: function (data) {
                    success(data);
                },
                error: function (data) {
                    failure(data);
                }
            });

    Check this link how to manipulate the REST API to achieve your requirements:

    https://msdn.microsoft.com/en-us/library/office/fp142385.aspx

    Kind regards,


    Giuliano De Luca - MCSD SharePoint, MCSD Web Applications, MCPS, MS. www.delucagiuliano.com Twitter: @giuleon Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    Saturday, March 11, 2017 8:51 AM
  • Hi Giuliano

    I really feel a bit ashamed, but what line of code will go where to hide the columns that have column name starting with "hide"?

    Thanks so much.

    Saturday, March 11, 2017 8:35 PM
  • Hi,

    I understood that you have this kind of situation in a SharePoint list:

    Company Contact Country Visible for the user
    Alfreds Futterkiste Maria Anders Germany Yes
    Centro comercial Moctezuma Francisco Chang Mexico Yes
    Ernst Handel Roland Mendel Austria No
    Island Trading Helen Bennett UK No
    Laughing Bacchus Winecellars Yoshi Tannamuri Canada Yes
    Magazzini Alimentari Riuniti Giovanni Rovelli Italy Yes

    For example with the column "Visible for the user" do you want to handle the visibility for the end user for the single item ?

    if yes, like I said previously if you add in querystring the following url:

    ?$filter=ColumnName Eq 'Yes'"

    The REST API call will extract only the items with column name equal to Yes, the code works as is, you need to do only this modification.

    Eventually, you have also the possibility to select only specific columns, in fact you can add ever in querystring also this piece of url:

    ?$filter=ColumnName Eq 'Yes'"&$select=Company,Contact

    The result for the end user will be:

    Company Contact

    Alfreds Futterkiste Maria Anders

    Centro comercial Moctezuma Francisco Chang

    Laughing Bacchus Winecellars Yoshi Tannamuri

    Magazzini Alimentari Riuniti Giovanni Rovelli

    Let me know


    Giuliano De Luca - MCSD SharePoint, MCSD Web Applications, MCPS, MS. www.delucagiuliano.com Twitter: @giuleon Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.


    Saturday, March 11, 2017 11:27 PM
  • Again thanks so much, sorry I could not explain my question clearly.

    // On EditForm.aspx
    // I need some JS (that could go in CEWP) to do:
    foreach (splistcolumns)
    {
     if (SPListColumnValue is not NULL)
     {
       Hide this SPListColumn on EditForm.aspx;
      }
    }
    

    I hope above clarifies my question, I need code that can do this in JS using JQuery/SPUtlities/REST api etc.

    Thanks so much again. You are really a helping man. Appreciated!

    Sunday, March 12, 2017 12:05 AM
  • Hi,

    No problem now is more clear, there is a way more elegant, you can use jslink directly on the editform.aspx without any additional web part  (CEWP).

    In order to do that, open the SharePoint list on the browser, click on an item to go in the editform.aspx and edit the page:

    Here click on edit web part and in the web part properties menu open the tab "Miscellaneous" fill in the js link field with the value "~sitecollection/SiteAssets/FieldVisibility.js":

    This is the js file that you have to upload on SiteAssets or where you want (fill in the js link field with the right path of this file):

    (function () {
        var visibleFieldCtx = {};
        visibleFieldCtx.Templates = {};
        visibleFieldCtx.Templates.Fields = {
            "visible": {
                "EditForm": HidevisibleTemplate
            }
        };
    
        visibleFieldCtx.Templates.OnPostRender = function (ctx) {
            document.querySelectorAll(".csrHiddenField").forEach(function(field){
                var elements = document.getElementsByClassName("csrHiddenField");
                for(var i = 0, length = elements.length; i < length; i++) {
                    elements[i].parentElement.parentElement.parentElement.style.display = 'none';
                }
                
            });
        };
    
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(visibleFieldCtx);
    })();
    
    function HidevisibleTemplate(ctx) {
        var visibleField = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        var visibleFieldId = visibleField.fieldSchema.Id;
        var visibleFieldName = visibleField.fieldName;
        var visibleFieldDiv = visibleFieldName + '_' + visibleFieldId;
        var result = '<div><input id='+ visibleField.fieldSchema.Id +' type="text" class="csrHiddenField" name='+
            visibleField.fieldName +' hidden="false" /></div>';
        if (ctx.CurrentFieldValue === "Yes") {
            return SPFieldText_Edit(ctx);
        }
        else {
            return result;
        }
    }

    You can do the steps above also with CSOM.

    In this step:

    if (ctx.CurrentFieldValue === "Yes") {
            return SPFieldText_Edit(ctx);
        }
        else {
            return result;
        }

    my column is a simple single line of text with the value "Yes" for some items or "" for the others, keep in mind that if you have a different type column "Lookup, Yes/No......" you need to return the right type, I mean in my case if the value is "Yes" I'll return a type single line of text, therefore change it with your type column check the following list:

                         Text': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldText_Edit,
                            'NewForm': SPFieldText_Edit
                        },
                        'Number': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldNumber_Edit,
                            'NewForm': SPFieldNumber_Edit
                        },
                        'Integer': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldNumber_Edit,
                            'NewForm': SPFieldNumber_Edit
                        },
                        'Boolean': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_DefaultNoEncode,
                            'EditForm': SPFieldBoolean_Edit,
                            'NewForm': SPFieldBoolean_Edit
                        },
                        'Note': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldNote_Display,
                            'EditForm': SPFieldNote_Edit,
                            'NewForm': SPFieldNote_Edit
                        },
                        'Currency': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldNumber_Edit,
                            'NewForm': SPFieldNumber_Edit
                        },
                        'File': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldFile_Display,
                            'EditForm': SPFieldFile_Edit,
                            'NewForm': SPFieldFile_Edit
                        },
                        'Calculated': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPField_FormDisplay_Empty,
                            'NewForm': SPField_FormDisplay_Empty
                        },
                        'Choice': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldChoice_Edit,
                            'NewForm': SPFieldChoice_Edit
                        },
                        'MultiChoice': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPFieldMultiChoice_Edit,
                            'NewForm': SPFieldMultiChoice_Edit
                        },
                        'Lookup': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldLookup_Display,
                            'EditForm': SPFieldLookup_Edit,
                            'NewForm': SPFieldLookup_Edit
                        },
                        'LookupMulti': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldLookup_Display,
                            'EditForm': SPFieldLookup_Edit,
                            'NewForm': SPFieldLookup_Edit
                        },
                        'Computed': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPField_FormDisplay_Default,
                            'EditForm': SPField_FormDisplay_Default,
                            'NewForm': SPField_FormDisplay_Default
                        },
                        'URL': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldUrl_Display,
                            'EditForm': SPFieldUrl_Edit,
                            'NewForm': SPFieldUrl_Edit
                        },
                        'User': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldUser_Display,
                            'EditForm': SPClientPeoplePickerCSRTemplate,
                            'NewForm': SPClientPeoplePickerCSRTemplate
                        },
                        'UserMulti': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldUserMulti_Display,
                            'EditForm': SPClientPeoplePickerCSRTemplate,
                            'NewForm': SPClientPeoplePickerCSRTemplate
                        },
                        'DateTime': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldDateTime_Display,
                            'EditForm': SPFieldDateTime_Edit,
                            'NewForm': SPFieldDateTime_Edit
                        },
                        'Attachments': {
                            'View': RenderFieldValueDefault,
                            'DisplayForm': SPFieldAttachments_Default,
                            'EditForm': SPFieldAttachments_Default,
                            'NewForm': SPFieldAttachments_Default
                        }

    Here my final result (gif with animation):

    https://1drv.ms/i/s!AoSfe1OOFU_QkotobMVdyM2oufpZog

    I hope will be useful for you.


    Giuliano De Luca - MCSD SharePoint, MCSD Web Applications, MCPS, MS. www.delucagiuliano.com Twitter: @giuleon Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.





    Sunday, March 12, 2017 3:55 PM