SPUserField2013 MakeReadOnly shows [object Object] instead of user's name

[kitmenke]

SPUserField2013 GetValue returns this.ClientPeoplePicker.GetAllUserInfo(); and MakeReadOnly uses this to set the label's text. Instead, it should pull out the user's name and display that in the label.

[boss-noss]

Hi, Any ideas when this issue will be resolved? I am experiencing this on all people picker fields. Thanks

[szykov]

I fixed this. do yourself instead of waiting, just add new prototype for SPUserField2013:

SPUserField2013.prototype.MakeReadOnly = function (value) {
        var tmpArray = new Array();

        $.each(this.GetValue(), function (key, val) {
            if (val['Key'] != null) { tmpArray.push(val['Key']) }
        });

        var SPUserField = this;


        var x = getUserId(tmpArray, SPUserField);

        x.done(function (result) {
            // result is an SP.List because that is what we passed to resolve()!
            var htmlText = "";
            for (i = 0; i < result.users.length; i++) {
                var user = result.users[i];
                if (htmlText != "") { htmlText += "; "; }
                htmlText += '<a href="/_layouts/15/userdisp.aspx?ID=' + user.get_id().toString() + '&amp;RootFolder=*">' + user.get_title() + '</a>';
            }

            return result.SPUserField._makeReadOnly(htmlText);

        });
        x.fail(function (result) {
            // result is a string because that is what we passed to reject()!
            var error = result;
            console.log(error);
        });



        function successCallback(d) {
            var o = { users: this.users, SPUserField: this.SPUserField };
            this.d.resolve(o);
        }

        function failCallback() {
            this.d.reject("Something went wrong...");
        }


        function getUserId(loginNames, SPUserField) {
            var d = $.Deferred();
            var context = new SP.ClientContext.get_current();

            var arrayLength = loginNames.length;
            var users = new Array();

            for (var i = 0; i < arrayLength; i++) {
                var user = context.get_web().ensureUser(loginNames[i]);
                context.load(user)
                users.push(user);
            }

            var o = { d: d, loginNames: loginNames, users: users, SPUserField: SPUserField };
            context.executeQueryAsync(Function.createDelegate(o, successCallback), Function.createDelegate(o, failCallback));
            return d.promise();
        };        

    };

I don't think it's clean, but if somebody would make it more perfect, plz contact me...

[kitmenke]

Hey guys, it isn't perfect but I put a small fix in place so that if you call MakeReadOnly on a field with an existing field it will work.

@szykov Thanks a lot for posting the code above. I'll see if I can incorporate it into more complete fix.

[ViktorHofer]

Fixed with my pull request :)

[szykov]

@ViktorHofer I wasn't able to test new version. but I think now it will show spuserfield as plain text? if yes, I would rather prefer as hyperlinks as it works in SP. SP shows spuserfield on disp form as hyperlinks.

[ViktorHofer]

Exactly! Displaying a hyperlink (with the status indicator) could be tough. Maybe you wanna look into it and submit a PR?

[szykov]

@ViktorHofer you can see my code above it's already implemented by me.

I used *csom * for querying ids of users. something like that: ctx.get_web().ensureUser(loginName)
with id of user you can create a hyperlink.

you can replace SPUserField2013.prototype.MakeReadOnly with the code above and you will see the magic ^_^

Okay, tomorrow I will try to create PR...

updated:
link of PR: #26