cx 23.11.0 → 23.11.1

package/dist/widgets.js

@@ -8808,12 +8808,18 @@ var LookupField = /*#__PURE__*/ (function (_Field) {
 			records = _instance$data.records,
 			values = _instance$data.values,
 			options = _instance$data.options;
-		if (isArray(records))
-			return records
-				.map(function (record) {
-					return record[_this3.valueTextField] || record[_this3.valueIdField];
-				})
-				.join(", ");
+		if (isArray(records)) {
+			var _this$onGetRecordDisp;
+			var valueTextFormatter =
+				(_this$onGetRecordDisp = this.onGetRecordDisplayText) != null
+					? _this$onGetRecordDisp
+					: function (record) {
+							return record[_this3.valueTextField] || record[_this3.valueIdField];
+					  };
+			return records.map(function (record) {
+				return valueTextFormatter(record, instance);
+			});
+		}
 		if (isArray(values)) {
 			if (isArray(options))
 				return values
@@ -8861,6 +8867,7 @@ LookupField.prototype.submitOnDropdownEnterKey = false;
 LookupField.prototype.pageSize = 100;
 LookupField.prototype.infinite = false;
 LookupField.prototype.quickSelectAll = false;
+LookupField.prototype.onGetRecordDisplayText = null;
 Localization.registerPrototype("cx/widgets/LookupField", LookupField);
 Widget.alias("lookupfield", LookupField);
 function getOptionKey(bindings, data) {
@@ -9294,6 +9301,13 @@ var LookupComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (this.props.multiple) {
 			var readOnly = data.disabled || data.readOnly;
 			if (isNonEmptyArray(data.records)) {
+				var _this$onGetRecordDisp2;
+				var valueTextFormatter =
+					(_this$onGetRecordDisp2 = this.onGetRecordDisplayText) != null
+						? _this$onGetRecordDisp2
+						: function (record) {
+								return record[_this9.valueTextField];
+						  };
 				text = data.records.map(function (v, i) {
 					return /*#__PURE__*/ jsxs(
 						"div",
@@ -9304,7 +9318,7 @@ var LookupComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 							children: [
 								/*#__PURE__*/ jsx("span", {
 									className: CSS.element(baseClass, "tag-value"),
-									children: v[widget.valueTextField],
+									children: valueTextFormatter(v, instance),
 								}),
 								!readOnly &&
 									/*#__PURE__*/ jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.11.0",
+   "version": "23.11.1",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/widgets/form/LookupField.d.ts

@@ -1,171 +1,174 @@
-import { Instance } from "./../../ui/Instance";
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-export interface LookupBinding {
-   local: string;
-   remote: string;
-   key?: boolean;
-}
-
-interface LookupFieldProps extends FieldProps {
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: Cx.BooleanProp;
-
-   /** Selected value. Used only if `multiple` is set to `false`. */
-   value?: Cx.Prop<number | string>;
-
-   /** A list of selected ids. Used only if `multiple` is set to `true`. */
-   values?: Cx.Prop<any[]>;
-
-   /** A list of selected records. Used only if `multiple` is set to `true`. */
-   records?: Cx.RecordsProp;
-
-   /** Text associated with the selection. Used only if `multiple` is set to `false`. */
-   text?: Cx.StringProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /** A list of available options. */
-   options?: Cx.RecordsProp;
-
-   /**
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
-    * No effect if `multiple` is used. Default value is `false`.
-    */
-   hideClear?: boolean;
-
-   /**
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
-    * No effect if `multiple` is used. Default value is `true`.
-    */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
-   baseClass?: string;
-
-   /* TODO: Check type */
-
-   /** Additional config to be applied to all items */
-   itemsConfig?: any;
-
-   /**
-    * An array of objects describing the mapping of option data to store data.
-    * Each entry must define `local`, `remote` bindings. `key: true` is used to indicate fields that are used in the primary key.
-    */
-   bindings?: LookupBinding[];
-
-   /** A delay in milliseconds between the moment the user stops typing and when tha query is made. Default value is `150`. */
-   queryDelay?: number;
-
-   /** Minimal number of characters required before query is made. */
-   minQueryLength?: number;
-
-   /** Set to `true` to hide the search field. */
-   hideSearchField?: boolean;
-
-   /**
-    * Number of options required to show the search field.
-    * If there are only a few options, there is no need for search. Defaults to `7`.
-    */
-   minOptionsForSearchField?: number;
-
-   /** Text to display while data is being loaded. */
-   loadingText?: string;
-
-   /** Error message displayed to the user if server query throws an exception. */
-   queryErrorText?: string;
-
-   /** Message to be displayed if no entries match the user query. */
-   noResultsText?: string;
-
-   /** Name of the field which holds the id of the option. Default value is `id`. */
-   optionIdField?: string;
-
-   /** Name of the field which holds the display text of the option. Default value is `text`. */
-   optionTextField?: string;
-
-   /**
-    * Available only in `multiple` selection mode and without custom `bindings`.
-    * Name of the field to store id of the selected value. Default value is `id`.
-    */
-   valueIdField?: string;
-
-   /**
-    * Available only in `multiple` selection mode.
-    * Name of the field to store display text of the selected value. Default value is `text`.
-    */
-   valueTextField?: string;
-
-   /**
-    * If `true` `onQuery` will be called only once to fetch all options.
-    * After that options are filtered client-side.
-    */
-   fetchAll?: boolean;
-
-   /**
-    * If this flag is set along with `fetchAll`, fetched options are cached for the lifetime of the widget.
-    * Otherwise, data is fetched whenever the dropdown is shown.
-    */
-   cacheAll?: boolean;
-
-   /** Close the dropdown after selection. Default is `true`. */
-   closeOnSelect?: boolean;
-
-   /** Mesasge to be displayed to the user if the entered search query is too short. */
-   minQueryLengthMessageText?: string;
-
-   /** Name of the icon to be put on the left side of the input. */
-   icon?: Cx.StringProp;
-
-   /** Query function. */
-   onQuery?: (
-      query: string | { query: string; page: number; pageSize: number },
-      instance: Instance
-   ) => Cx.Record[] | Promise<Cx.Record>;
-
-   /** Set to true to sort dropdown options. */
-   sort?: boolean;
-
-   /** Additional list options, such as grouping configuration, custom sorting, etc. */
-   listOptions?: Cx.Config;
-
-   /** Set to true to show the dropdown immediately after the component has mounted.
-    * This is commonly used for cell editing in grids. */
-   autoOpen?: Cx.BooleanProp;
-
-   /** Set to true to allow enter key events to be propagated. This is useful for submitting forms or closing grid cell editors. */
-   submitOnEnterKey?: Cx.BooleanProp;
-
-   /** Set to true to allow dropdown enter key events to be propagated. This is useful for submitting forms on dropdown enter key selection. */
-   submitOnDropdownEnterKey?: Cx.BooleanProp;
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp;
-
-   /** Set to `true` to enable loading of additional lookup options when the scroll is reaching the end. */
-   infinite?: boolean;
-
-   /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
-   pageSize?: number;
-
-   /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
-   quickSelectAll?: boolean;
-
-   /** Parameters that affect filtering. */
-   filterParams?: Cx.StructuredProp;
-
-   /** Callback to create a filter function for given filter params. */
-   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (record: Record) => boolean;
-}
-
-export class LookupField extends Cx.Widget<LookupFieldProps> {}
+import { Instance } from "./../../ui/Instance";
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+export interface LookupBinding {
+   local: string;
+   remote: string;
+   key?: boolean;
+}
+
+interface LookupFieldProps extends FieldProps {
+   /** Defaults to `false`. Set to `true` to enable multiple selection. */
+   multiple?: Cx.BooleanProp;
+
+   /** Selected value. Used only if `multiple` is set to `false`. */
+   value?: Cx.Prop<number | string>;
+
+   /** A list of selected ids. Used only if `multiple` is set to `true`. */
+   values?: Cx.Prop<any[]>;
+
+   /** A list of selected records. Used only if `multiple` is set to `true`. */
+   records?: Cx.RecordsProp;
+
+   /** Text associated with the selection. Used only if `multiple` is set to `false`. */
+   text?: Cx.StringProp;
+
+   /** The opposite of `disabled`. */
+   enabled?: Cx.BooleanProp;
+
+   /** Default text displayed when the field is empty. */
+   placeholder?: Cx.StringProp;
+
+   /** A list of available options. */
+   options?: Cx.RecordsProp;
+
+   /**
+    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property.
+    * No effect if `multiple` is used. Default value is `false`.
+    */
+   hideClear?: boolean;
+
+   /**
+    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property.
+    * No effect if `multiple` is used. Default value is `true`.
+    */
+   showClear?: boolean;
+
+   /**
+    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
+    */
+   alwaysShowClear?: boolean;
+
+   /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
+   baseClass?: string;
+
+   /* TODO: Check type */
+
+   /** Additional config to be applied to all items */
+   itemsConfig?: any;
+
+   /**
+    * An array of objects describing the mapping of option data to store data.
+    * Each entry must define `local`, `remote` bindings. `key: true` is used to indicate fields that are used in the primary key.
+    */
+   bindings?: LookupBinding[];
+
+   /** A delay in milliseconds between the moment the user stops typing and when tha query is made. Default value is `150`. */
+   queryDelay?: number;
+
+   /** Minimal number of characters required before query is made. */
+   minQueryLength?: number;
+
+   /** Set to `true` to hide the search field. */
+   hideSearchField?: boolean;
+
+   /**
+    * Number of options required to show the search field.
+    * If there are only a few options, there is no need for search. Defaults to `7`.
+    */
+   minOptionsForSearchField?: number;
+
+   /** Text to display while data is being loaded. */
+   loadingText?: string;
+
+   /** Error message displayed to the user if server query throws an exception. */
+   queryErrorText?: string;
+
+   /** Message to be displayed if no entries match the user query. */
+   noResultsText?: string;
+
+   /** Name of the field which holds the id of the option. Default value is `id`. */
+   optionIdField?: string;
+
+   /** Name of the field which holds the display text of the option. Default value is `text`. */
+   optionTextField?: string;
+
+   /**
+    * Available only in `multiple` selection mode and without custom `bindings`.
+    * Name of the field to store id of the selected value. Default value is `id`.
+    */
+   valueIdField?: string;
+
+   /**
+    * Available only in `multiple` selection mode.
+    * Name of the field to store display text of the selected value. Default value is `text`.
+    */
+   valueTextField?: string;
+
+   /**
+    * If `true` `onQuery` will be called only once to fetch all options.
+    * After that options are filtered client-side.
+    */
+   fetchAll?: boolean;
+
+   /**
+    * If this flag is set along with `fetchAll`, fetched options are cached for the lifetime of the widget.
+    * Otherwise, data is fetched whenever the dropdown is shown.
+    */
+   cacheAll?: boolean;
+
+   /** Close the dropdown after selection. Default is `true`. */
+   closeOnSelect?: boolean;
+
+   /** Mesasge to be displayed to the user if the entered search query is too short. */
+   minQueryLengthMessageText?: string;
+
+   /** Name of the icon to be put on the left side of the input. */
+   icon?: Cx.StringProp;
+
+   /** Query function. */
+   onQuery?: (
+      query: string | { query: string; page: number; pageSize: number },
+      instance: Instance
+   ) => Cx.Record[] | Promise<Cx.Record>;
+
+   /** Set to true to sort dropdown options. */
+   sort?: boolean;
+
+   /** Additional list options, such as grouping configuration, custom sorting, etc. */
+   listOptions?: Cx.Config;
+
+   /** Set to true to show the dropdown immediately after the component has mounted.
+    * This is commonly used for cell editing in grids. */
+   autoOpen?: Cx.BooleanProp;
+
+   /** Set to true to allow enter key events to be propagated. This is useful for submitting forms or closing grid cell editors. */
+   submitOnEnterKey?: Cx.BooleanProp;
+
+   /** Set to true to allow dropdown enter key events to be propagated. This is useful for submitting forms on dropdown enter key selection. */
+   submitOnDropdownEnterKey?: Cx.BooleanProp;
+
+   /** Defaults to `false`. Used to make the field read-only. */
+   readOnly?: Cx.BooleanProp;
+
+   /** Set to `true` to enable loading of additional lookup options when the scroll is reaching the end. */
+   infinite?: boolean;
+
+   /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
+   pageSize?: number;
+
+   /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
+   quickSelectAll?: boolean;
+
+   /** Parameters that affect filtering. */
+   filterParams?: Cx.StructuredProp;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateVisibleOptionsFilter?: (filterParams: any, instance?: Instance) => (record: Record) => boolean;
+
+   /** Used in multiple selection lookups in combination with records, to construct the display text out of multiple fields or when additional formatting is needed. */
+   onGetRecordDisplayText?: (record: any, instance?: Instance) => string;
+}
+
+export class LookupField extends Cx.Widget<LookupFieldProps> {}

package/src/widgets/form/LookupField.js

@@ -204,8 +204,11 @@ export class LookupField extends Field {
       if (!this.multiple) return super.formatValue(context, instance);
 
       let { records, values, options } = instance.data;
-      if (isArray(records))
-         return records.map((record) => record[this.valueTextField] || record[this.valueIdField]).join(", ");
+      if (isArray(records)) {
+         let valueTextFormatter =
+            this.onGetRecordDisplayText ?? ((record) => record[this.valueTextField] || record[this.valueIdField]);
+         return records.map((record) => valueTextFormatter(record, instance));
+      }
 
       if (isArray(values)) {
          if (isArray(options))
@@ -254,6 +257,7 @@ LookupField.prototype.submitOnDropdownEnterKey = false;
 LookupField.prototype.pageSize = 100;
 LookupField.prototype.infinite = false;
 LookupField.prototype.quickSelectAll = false;
+LookupField.prototype.onGetRecordDisplayText = null;
 
 Localization.registerPrototype("cx/widgets/LookupField", LookupField);
 
@@ -586,6 +590,7 @@ class LookupComponent extends VDOM.Component {
       if (this.props.multiple) {
          let readOnly = data.disabled || data.readOnly;
          if (isNonEmptyArray(data.records)) {
+            let valueTextFormatter = this.onGetRecordDisplayText ?? ((record) => record[this.valueTextField]);
             text = data.records.map((v, i) => (
                <div
                   key={i}
@@ -593,7 +598,7 @@ class LookupComponent extends VDOM.Component {
                      readonly: readOnly,
                   })}
                >
-                  <span className={CSS.element(baseClass, "tag-value")}>{v[widget.valueTextField]}</span>
+                  <span className={CSS.element(baseClass, "tag-value")}>{valueTextFormatter(v, instance)}</span>
                   {!readOnly && (
                      <div
                         className={CSS.element(baseClass, "tag-clear")}