// // API Item Picker // var baseAPIUrl = "http://localhost:3000" var ChooseProductCustomField = function () { /// <summary>The type definition of this Agility Custom Field Type.</summary> var self = this; /// <field name="Label" type="String">The display name of the Custom Field Type</field> self.Label = "Choose Product"; /// <field name="ReferenceName" type="String">The internal reference name of the Custom Field Type. Must not contain any special characters.</field> self.ReferenceName = "ChooseProduct"; /// <field name="Render" type="Function">This function runs every time the field is rendered</field> self.Render = function (options) { /// <summary> /// The Render handler for this field. Create any elements and bindings that you might need, pull down resources. /// This method will be called everytime to the field value changes. /// </summary> /// <param name="options" type="ContentManager.Global.CustomInputFieldParams">The options used to render this field.</param> //get our base element var $pnl = $(".product-picker-field", options.$elem); if ($pnl.size() == 0) { var htmlContent = ` <style> .prod-img { display:inline-block; height: 40px; border-radius: 10px; width: 40px; background-size: cover; background-repeat: no-repeat; } .prod-img-small { margin-top: 2px; display:inline-block; height: 20px; border-radius: 5px; width: 20px; background-size: cover; background-repeat: no-repeat; } .prod-text { display:inline-block; margin-left: 5px; line-height: 20px; } </style> <input class='product-picker-field' type='hidden' style='width:100%' data-bind='value:selectedValue,select2:select2'>`; //pull down the html template and load it into the element options.$elem.append(htmlContent) $pnl = $(".product-picker-field", options.$elem); //bind our viewmodel to this var viewModel = function () { /// <summary>The KO ViewModel that will be binded to your HTML template.</summary> /// <param name="options" type="Object"> /// <field name="$elem" type="jQueryElem">The .field-row jQuery Dom Element.</field> /// <field name="contentItem" type="ContentItem Object">The entire Content Item object including Values and their KO Observable properties of all other fields on the form.</field> /// <field name="fieldBinding" type="KO Observable">The value binding of thie Custom Field Type. Get and set this field's value by using this property.</field> /// <field name="fieldSetting" type="Object">Object representing the field's settings such as 'Hidden', 'Label', and 'Description'</field> /// <field name="readonly" type="boolean">Represents if this field should be readonly or not.</field> /// </param> var self = this; self.ajaxRequest = null; self.selectedValue = options.fieldBinding.extend({ throttle: 500 }); self.formatResult = function (item) { return $(`<div class='prod-img' style="background-image:url('${item.node.featuredImage.transformedSrc}')"/></div><div class='prod-text'>${item.node.title}</div>`); //return item.node.title; }; self.formatSelection = function (item) { return $(`<div class='prod-img-small' style="background-image:url('${item.node.featuredImage.transformedSrc}')"/></div><div class='prod-text'>${item.node.title}</div>`); }; self.ajaxRequest = null; self.select2 = { label: 'Product', readOnly: false, value: options.fieldBinding, multiple: false, maximumSelectionSize: 1, minimumInputLength: 0, placeholder: 'Find product...', formatResult: self.formatResult, formatSelection: self.formatSelection, templateResult: self.templateResult, matcher: function (term, text) { return true; }, id: function (obj) { //set content of the Agility CMS Content Item //options.contentItem.Values.ExternalID(obj.ID) //options.contentItem.Values.MyField1(obj.Value1) //options.contentItem.Values.MyField2(obj.Value2) //etc... //save the whole thing as JSON return JSON.stringify(obj.node) }, ajax: { // instead of writing the function to execute the request we use Select2's convenient helper url: `${baseAPIUrl}/api/search-products`, dataType: 'json', type: "get", quietMillis: 250, originalValue: ko.unwrap(options.fieldBinding), term: "", data: function (term, page, params) { return { filter: term, // search term }; }, results: function (data, page) { return { results: data }; }, current: function (data) { }, cache: true }, initSelection: function (element, callback) { //use the hidden "product name" field var json = ko.unwrap(options.fieldBinding); console.log({ json }) if (json && json.length > 0) { var node = JSON.parse(json) console.log({ node }) callback({ node }) } // console.log(val) // var label = ko.unwrap(options.contentItem.Values.ProductName); // if (val && label) { // var data = { // node: { // id: val, // title: label // } // }; // callback(data); // } }, allowClear: false, dropdownCssClass: "bigdrop" }; } ko.applyBindings(viewModel, $pnl.get(0)); } } } ContentManager.Global.CustomInputFormFields.push(new ChooseProductCustomField());