@pega/sdk 0.0.13 → 0.0.15

package/templates/react-sdk-reference/src/components/field/EmbeddedDataMulti/EmbeddedDataMulti.tsx

@@ -0,0 +1,121 @@
+import type { PConnProps } from '@pega/sdk-react';
+
+interface EmbeddedDataMultiProps extends PConnProps {
+  addEditAction?: string;
+  addEditView?: string;
+  displayAs?: string;
+  editAction?: string;
+  editMode?: string;
+  editType?: string;
+  editView?: string;
+  readOnly?: boolean;
+  repeatingView?: string;
+  targetObjectClass?: string;
+  useSeparateActionForEdit?: boolean;
+  useSeparateViewForEdit?: boolean;
+}
+
+export default function EmbeddedDataMulti(props: EmbeddedDataMultiProps) {
+  const {
+    getPConnect,
+    addEditAction,
+    addEditView,
+    displayAs,
+    editAction,
+    editMode,
+    editType,
+    editView,
+    readOnly = false,
+    repeatingView,
+    targetObjectClass,
+    useSeparateActionForEdit,
+    useSeparateViewForEdit,
+  } = props;
+
+  const pConn = getPConnect();
+  const rawMetadata = pConn.getRawMetadata() as any;
+  const rawMetadataConfig = rawMetadata?.config;
+
+  if (!rawMetadataConfig) {
+    return null;
+  }
+
+  const renderMode = readOnly ? 'ReadOnly' : 'Editable';
+
+  let columnsChildren;
+  if (displayAs === 'table' || displayAs === 'simpleTable') {
+    columnsChildren = [
+      {
+        children: rawMetadataConfig.columns || [],
+        name: 'Columns',
+        type: 'Region',
+      },
+    ];
+  }
+
+  let regionWithView: unknown[] = [];
+  if (displayAs === 'repeatingView') {
+    regionWithView = [
+      {
+        children: [
+          {
+            type: 'reference',
+            config: {
+              type: 'view',
+              name: repeatingView,
+            },
+          },
+        ],
+        name: 'view',
+        type: 'Region',
+      },
+    ];
+  }
+
+  const { pagelistValue } = rawMetadataConfig;
+  const authorContext = pagelistValue?.startsWith('@P') ? pagelistValue.substring(3) : pagelistValue;
+
+  const simpleTableComponent = pConn.createComponent({
+    type: 'View',
+    config: {
+      template: 'SimpleTable',
+      type: 'multirecordlist',
+      authorContext,
+      name: authorContext?.substring(1),
+      renderMode,
+      multiRecordDisplayAs: displayAs === 'repeatingView' ? 'fieldGroup' : displayAs,
+      referenceList: pagelistValue,
+      contextClass: targetObjectClass,
+      editMode,
+      editModeConfig: {
+        editType,
+        defaultView: addEditView,
+        defaultAction: addEditAction,
+        useSeparateViewForEdit,
+        useSeparateActionForEdit,
+        editView,
+        editAction,
+      },
+      label: rawMetadataConfig.label,
+      children: columnsChildren,
+      displayField: rawMetadataConfig.displayField,
+      uniqueField: rawMetadataConfig.uniqueField,
+      targetClassLabel: rawMetadataConfig.targetClassLabel,
+      targetClassLabelOption: rawMetadataConfig.targetClassLabelOption,
+      fieldHeader: rawMetadataConfig.repeatingViewHeadingSource,
+      heading: rawMetadataConfig.repeatingViewHeading,
+      allowActions: {
+        allowAdd: rawMetadataConfig.allowAdd ?? true,
+        allowEdit: rawMetadataConfig.allowEdit ?? true,
+        allowDelete: rawMetadataConfig.allowDelete ?? true,
+        allowDragDrop: rawMetadataConfig.allowDragDrop ?? true,
+      },
+      allowRowDelete: rawMetadataConfig.allowRowDelete ?? true,
+      allowRowEdit: rawMetadataConfig.allowRowEdit ?? true,
+      displayAs: displayAs === 'repeatingView' ? 'fieldGroup' : displayAs,
+    },
+    children: regionWithView,
+  } as any);
+
+  return <>{simpleTableComponent}</>;
+}

package/templates/react-sdk-reference/src/components/field/EmbeddedDataMulti/config-ext.json

@@ -0,0 +1,7 @@
+{
+  "name": "EmbeddedDataMulti",
+  "description": "Embedded Data Multi",
+  "type": "Field",
+  "subtype": "EMBEDDEDDATA",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/EmbeddedDataMulti/index.tsx

@@ -0,0 +1 @@
+export { default } from './EmbeddedDataMulti';

package/templates/react-sdk-reference/src/components/field/Integer/Integer.tsx

@@ -6,6 +6,7 @@ import { getComponentFromRegistry } from '@pega/sdk-react';
 import type { PConnFieldProps } from '@pega/sdk-react';
 
 interface IntegerProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on Integer here
 }
 
@@ -43,7 +44,7 @@ export default function Integer(props: IntegerProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {

package/templates/react-sdk-reference/src/components/field/Location/Location.tsx

@@ -198,7 +198,7 @@ export default function Location(props: LocationProps) {
 
   const map = (
     <div style={{ opacity: disabled ? 0.7 : 1 }}>
-      <Box mt={1} style={{ flex: 1 }}>
+      <Box sx={{ mt: 1 }} style={{ flex: 1 }}>
         <GoogleMap
           mapContainerStyle={mapContainerStyle}
           center={mapCenter}

package/templates/react-sdk-reference/src/components/field/Multiselect/Multiselect.tsx

@@ -44,13 +44,30 @@ export default function Multiselect(props) {
       },
     ];
     let secondaryColumns: any = [];
-    if (secondaryFields) {
-      secondaryColumns = secondaryFields.map((secondaryField) => ({
-        value: secondaryField,
+    // Raw metadata keeps property paths ("@P .pyLabel"); resolved props would hold data values instead
+    const columnsFormatter = (getPConnect().getRawMetadata()?.config as any)?.columnsFormatter;
+    const secondaryFieldsFromFormatter = columnsFormatter
+      ? columnsFormatter
+          .map((item) => {
+            const property = item?.config?.value;
+            if (typeof property === 'string') {
+              if (property.startsWith('@USER ')) return property.substring(6);
+              if (property.startsWith('@P ')) return property.substring(3);
+              return property;
+            }
+            return undefined;
+          })
+          .filter(Boolean)
+      : undefined;
+    const updatedSecondaryFields = secondaryFieldsFromFormatter || secondaryFields;
+    if (updatedSecondaryFields) {
+      secondaryColumns = updatedSecondaryFields.map((secondaryField) => ({
+        value: typeof secondaryField === 'string' ? secondaryField : undefined,
         display: 'true',
         secondary: 'true',
         useForSearch: 'true',
       }));
+      secondaryColumns = secondaryColumns.filter((col) => col.value);
     } else {
       secondaryColumns = [
         {
@@ -106,11 +123,11 @@ export default function Multiselect(props) {
   );
 
   const displayFieldMeta = listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.columns) : null;
-  const getCaseListBasedOnParamsDebounced: any = useRef();
+  const getCaseListBasedOnParamsDebounced: any = useRef(null);
   const pConn = getPConnect();
   const contextName = pConn.getContextName();
   const listActions = pConn.getListActions();
-  const dataApiObj: any = useRef();
+  const dataApiObj: any = useRef(null);
 
   // main search function trigger
   const getCaseListBasedOnParams = async (
@@ -120,20 +137,6 @@ export default function Multiselect(props) {
     currentItemsTree,
     isTriggeredFromSearch = false,
   ) => {
-    if (referenceList && referenceList.length > 0) {
-      selectedRows = await listActions.getSelectedRows(true);
-
-      selectedRows =
-        selectedRows &&
-        selectedRows.map((item) => {
-          return {
-            id: item[selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey],
-            primary: item[primaryField.startsWith('.') ? primaryField.substring(1) : primaryField],
-          };
-        });
-      setSelectedItems(selectedRows);
-    }
-
     // if items tree is null or text search is triggered then always should use fresh data object, we use the original object
     const initalItemsTree = isTriggeredFromSearch || !currentItemsTree ? [...itemsTreeBaseData] : [...currentItemsTree];
     const res = await doSearch(
@@ -148,6 +151,20 @@ export default function Multiselect(props) {
       selectedRows || [],
     );
     setItemsTree(res);
+    if (referenceList && referenceList.length > 0) {
+      selectedRows = await listActions.getSelectedRows(true);
+      selectedRows =
+        selectedRows &&
+        selectedRows.map((item) => {
+          const id = item[selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey];
+          let primary = item[primaryField.startsWith('.') ? primaryField.substring(1) : primaryField];
+          if (primary === undefined) {
+            primary = res.find((r) => r.id === id)?.primary;
+          }
+          return { id, primary, selected: true };
+        });
+      setSelectedItems(selectedRows);
+    }
   };
 
   useEffect(() => {
@@ -169,6 +186,9 @@ export default function Multiselect(props) {
           if (!isGroupData) {
             getCaseListBasedOnParamsDebounced.current(inputValue ?? '', '', [...selectedItems], [...itemsTree]);
           }
+        })
+        .catch((e) => {
+          console.error(e);
         });
     }
   }, [dataConfig, listType, dataConfig.columns, inputValue, dataConfig.groupColumnsConfig, showSecondaryInSearchOnly]);
@@ -227,7 +247,7 @@ export default function Multiselect(props) {
       fullWidth
       options={itemsTree}
       disableCloseOnSelect
-      // getOptionSelected={(option: any, val: any) => option?.primary === val?.primary}
+      isOptionEqualToValue={(option: any, val: any) => option?.id === val?.id}
       getOptionLabel={(option: any) => option?.primary}
       onChange={handleChange}
       value={selectedItems}