0

I am using JSLink code to filter lookup column to show relevant values. The same code works well on a custom list's edit form but breaks on the document library's edit form. I checked the ID of lookup column and its consistent across document library and custom list. Below is the code I am using, can someone please help me out to determine why its not working on a library edit form.

<script type="text/javascript">


    var FilterLookupHandler = (function () {
        var handler = function (fieldInternalName, queryField) {
            this.internalName = fieldInternalName;
            this.showField = queryField;
            this.suggestions = [];
            this.listId = "";
            this.currentValue;
        }
        handler.prototype.render = function (rCtx, field) {
            var self = this;
            self.renderContext = rCtx;
            if (rCtx != null && rCtx.CurrentItem != null) {
                var stringValue = rCtx.CurrentItem[rCtx.CurrentFieldSchema.Name];
                //self.currentValue = new SP.FieldLookupValue();
                //if (stringValue) {
                //    self.currentValue.set_lookupId(stringValue.split(";#")[0])
                //    stringValue = stringValue.split(";#")[1]
                //}
                self.listId = rCtx.CurrentFieldSchema.LookupListId;
            }
            if (rCtx == null || rCtx.CurrentFieldValue == null)
                return '';
            var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(rCtx);
            if (formCtx == null || formCtx.fieldSchema == null)
                return '';
            self.formCtx = formCtx;
            self.registerCallbacks();
            var htmlString = "";
            htmlString += "<select id='" + self.internalName + "_select'></select>";

            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
                execCallFoItems(self);
            });
            return htmlString;
        }

        function execCallFoItems(handler) {
            handler.callForItems("Kensington Estates", "Eq");
        }
        handler.prototype.callForItems = function (filterValue, tag) {
            var self = this;
            var cctx = SP.ClientContext.get_current();
            var list = cctx.get_web().get_lists().getById(new SP.Guid(self.listId));
            var query = new SP.CamlQuery();
            query.set_viewXml('<View><Query><Where><' + tag + '><FieldRef Name=\'' + self.showField + '\'/>' +
                '<Value Type=\'Text\'>' + filterValue + '</Value></Geq></' + tag + '></Query><RowLimit>10</RowLimit></View>');
            self.suggestedItems = list.getItems(query);
            cctx.load(self.suggestedItems)
            cctx.executeQueryAsync(Function.createDelegate(self, self.suggestionsLoaded, Function.createDelegate(self, self.callFailed)))
        }
        handler.prototype.suggestionsLoaded = function (sender, args) {
            var self = this;
            var itemsEnumerator = self.suggestedItems.getEnumerator();
            self.suggestions = [];
            while (itemsEnumerator.moveNext()) {
                var item = itemsEnumerator.get_current();
                self.suggestions.push({
                    id: item.get_item("ID"),
                    value: item.get_item(self.internalName)
                })
            }
            self.updateSuggestions();
        }
        handler.prototype.updateSuggestions = function () {
            var self = this;
            var selectElement = document.getElementById(self.internalName + "_select");
            var optionsHtml = "";
            var liHtml = "";
            for (var i = 0; i < self.suggestions.length; i++) {
                var suggestion = self.suggestions[i];
                optionsHtml += "<option value='" + suggestion.id + "'>" + suggestion.value + "</option>";
                liHtml += "<li>" + suggestion.value + "</li>"
            }

            selectElement.innerHTML = optionsHtml;
            selectElement.onchange();
        }
        handler.prototype.callFailed = function (sender, args) {
            alert(args.get_message())
        }
        handler.prototype.registerCallbacks = function () {
            var self = this;
            self.formCtx.registerGetValueCallback(self.formCtx.fieldName, function () {
                return self.getCurrentValue();
            });
        }
        handler.prototype.getCurrentValue = function () {
            var selectedValue = document.getElementById(this.internalName + "_select").value;
            //this.currentValue.set_lookupId(selectedValue);
            //return this.currentValue;
            return selectedValue;
        }
        return handler;
    })();  


    (function () {
        if (typeof SPClientTemplates === 'undefined')
            return;
        var officeFieldHandler = new FilterLookupHandler("Company","Title");
        var OfficeFieldContext = {};
        OfficeFieldContext.Templates = {};
        OfficeFieldContext.Templates.Fields = {
            'Company1': {
                'EditForm': Function.createDelegate(officeFieldHandler, officeFieldHandler.render),
                'NewForm': Function.createDelegate(officeFieldHandler, officeFieldHandler.render)
            }
        };
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(OfficeFieldContext);
    })();  
</script>

thanks in advance.

1

Per my test, it works in library EditForm.aspx.

Are you using the same list as the source list of the lookup column?

The “Company1” from the code below is the column’s internal name. Ensure the internal name of your column in the document library is “Company1”.

OfficeFieldContext.Templates.Fields = {
            'Company1': {
                'EditForm': Function.createDelegate(officeFieldHandler, officeFieldHandler.render),
                'NewForm': Function.createDelegate(officeFieldHandler, officeFieldHandler.render)
            }
        };

To get the actual internal name for your column, browsing to the library Settings > Edit Column and look at the path.

The path will be like:

<site>/_layouts/15/FldEditEx.aspx?List=%7B<list GUID>%7D&Field=<column internal name>

enter image description here

  • I got it to work. The source list was residing at root site so I had to change to pass the root site url to get that context. One issue I have is duplicate values in the lookup column which is because of the source list, is there a way to change this so it only shows unique values by integrating some piece of code in this existing code? – mdevm Jul 30 '18 at 19:01
  • As it is new question, you can post a new thread for it. – JoannaW_MSFT Jul 31 '18 at 0:47
  • Just posted it as a new question – mdevm Jul 31 '18 at 1:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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