@pega/sdk 0.0.13 → 0.0.15

package/templates/react-sdk-reference/src/components/field/ObjectReference/utils.ts

@@ -2,9 +2,13 @@ import { Utils } from '../../helpers/utils';
 
 export const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
-const getLeafNameFromPropertyName = (property) => property?.substr(property.lastIndexOf('.'));
+const getLeafNameFromPropertyName = (property: string) => property?.substr(property.lastIndexOf('.') + 1);
 
-const isSelfReferencedProperty = (param, referenceProp) => param === referenceProp?.split('.', 2)[1];
+const isSelfReferencedProperty = (param: string, referenceProp: string) => {
+  const propName = getPropertyValue(param);
+  const propNameAfterDot = propName.substring(propName.indexOf('.') + 1);
+  return referenceProp?.includes(propNameAfterDot);
+};
 
 export const AT_FILTEREDLIST = '@FILTERED_LIST';
 export const AT_PROPERTY = '@P';
@@ -17,13 +21,13 @@ export const PAGELIST = '!PL!';
 export const PERIOD = '.';
 const AT = '@';
 
-export function updatePageListPropertyValue(value) {
+export function updatePageListPropertyValue(value: string) {
   value =
     value.substring(0, value.indexOf(SQUARE_BRACKET_START)) + value.substring(value.indexOf(SQUARE_BRACKET_END) + 1);
   return value;
 }
 
-export function getPropertyValue(value) {
+export function getPropertyValue(value: string) {
   if (value.startsWith(AT)) {
     value = value.substring(value.indexOf(' ') + 1);
     if (value.startsWith(PERIOD)) value = value.substring(1);
@@ -34,25 +38,38 @@ export function getPropertyValue(value) {
   return value;
 }
 
-const getCompositeKeys = (c11nEnv, property) => {
+const getReferenceProp = (config: any) => {
+  if (config.mode === SELECTION_MODE.MULTI) {
+    return config?.pagelistValue?.substring(4) ?? '';
+  }
+  const property = config.value;
+  const arr = property?.split('.') ?? [];
+  if (arr.length > 1) {
+    arr.pop();
+    return arr.slice(1).join('.');
+  }
+  return '';
+};
+
+const getCompositeKeys = (c11nEnv: any, property: string) => {
   const { datasource: { parameters = {} } = {} } = c11nEnv.getFieldMetadata(property) || {};
-  return Object.values(parameters).reduce((compositeKeys: any, param) => {
-    if (isSelfReferencedProperty(property, param)) {
+  return Object.values(parameters).reduce((compositeKeys: string[], param: any) => {
+    if (isSelfReferencedProperty(param, property)) {
       let propName = getPropertyValue(param);
-      propName = propName.substring(propName.indexOf('.'));
+      propName = propName.substring(propName.indexOf('.') + 1);
       compositeKeys.push(propName);
     }
     return compositeKeys;
   }, []);
 };
 
-export const generateColumns = (config, pConn, referenceType) => {
+export const generateColumns = (config: any, pConn: any, referenceType: string) => {
   const displayField = getLeafNameFromPropertyName(config.displayField);
-  const referenceProp = config.value.split('.', 2)[1];
-  const compositeKeys: any = getCompositeKeys(pConn, referenceProp);
-  let value = getLeafNameFromPropertyName(config.value);
+  const referenceProp = getReferenceProp(config);
+  const compositeKeys = getCompositeKeys(pConn, referenceProp);
+  let value = getLeafNameFromPropertyName(config.mode === SELECTION_MODE.MULTI ? config.selectionKey : config.value);
 
-  const columns: any = [];
+  const columns: any[] = [];
   if (displayField) {
     columns.push({
       value: displayField,
@@ -62,6 +79,9 @@ export const generateColumns = (config, pConn, referenceType) => {
     });
   }
   if (value && compositeKeys.indexOf(value) !== -1) {
+    if (!config.value) {
+      config.value = `@P .${referenceProp}.${value}`;
+    }
     columns.push({
       value,
       setProperty: 'Associated property',
@@ -69,7 +89,7 @@ export const generateColumns = (config, pConn, referenceType) => {
     });
   } else {
     const actualValue = compositeKeys.length > 0 ? compositeKeys[0] : value;
-    config.value = `@P .${referenceProp}${actualValue}`;
+    config.value = `@P .${referenceProp}.${actualValue}`;
     value = actualValue;
     columns.push({
       value: actualValue,
@@ -80,9 +100,9 @@ export const generateColumns = (config, pConn, referenceType) => {
 
   config.datasource = {
     fields: {
-      key: getLeafNameFromPropertyName(config.value),
-      text: getLeafNameFromPropertyName(config.displayField),
-      value: getLeafNameFromPropertyName(config.value),
+      key: `.${getLeafNameFromPropertyName(config.value)}`,
+      text: `.${getLeafNameFromPropertyName(config.displayField)}`,
+      value: `.${getLeafNameFromPropertyName(config.value)}`,
     },
   };
 
@@ -96,17 +116,88 @@ export const generateColumns = (config, pConn, referenceType) => {
   }
 
   compositeKeys.forEach((key) => {
+    const descriptorsFieldName = `.${key}`;
     if (value !== key)
       columns.push({
-        value: key,
+        value: descriptorsFieldName,
         display: 'false',
         secondary: 'true',
         useForSearch: false,
-        setProperty: `.${referenceProp}${key}`,
+        setProperty: `.${referenceProp}.${key}`,
       });
   });
 
   config.columns = columns;
 };
 
-export const getDataRelationshipContextFromKey = (key) => key.split('.', 2)[1];
+export const addCompositeKeysToConfig = (config: any, pConn: any) => {
+  const referenceProp = getReferenceProp(config);
+  const fieldMetadata = pConn.getFieldMetadata(referenceProp) || {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: string[] = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) {
+      compositeKeys.push(param);
+    }
+  });
+  config.compositeKeys = compositeKeys;
+};
+
+export const getDataRelationshipContextFromKey = (key: string) => {
+  const firstIndexOfDot = key.indexOf('.');
+  if (firstIndexOfDot > -1) {
+    const lastIndexOfDot = key.lastIndexOf('.');
+    if (lastIndexOfDot > firstIndexOfDot) {
+      return key.substring(firstIndexOfDot + 1, lastIndexOfDot);
+    }
+  }
+  return '';
+};
+
+export const createNewRecord = ({
+  referenceType,
+  disableStartingFieldsForReference,
+  pConn,
+  contextClass,
+  startingFields,
+  getPConnect,
+}: {
+  referenceType: string;
+  disableStartingFieldsForReference: boolean;
+  pConn: any;
+  contextClass: string;
+  startingFields: Record<string, any>;
+  getPConnect: any;
+}) => {
+  if (referenceType === 'Case') {
+    if (!disableStartingFieldsForReference) {
+      startingFields[
+        (PCore as any).getNameSpaceUtils?.()?.getDefaultQualifiedName('pyAddCaseContextPage') ?? 'pyAddCaseContextPage'
+      ] = {
+        pyID: pConn.getCaseInfo().getKey()?.split(' ')?.pop(),
+      };
+    }
+    return pConn.getActionsApi().createWork(contextClass, {
+      openCaseViewAfterCreate: false,
+      startingFields,
+    });
+  }
+  if (referenceType === 'Data') {
+    return getPConnect().getActionsApi().showDataObjectCreateView(contextClass);
+  }
+};
+
+export const getAdditionalInfo = (pConn: any, propertyName: string) => {
+  const parentFieldMetadata = pConn.getFieldMetadata(getDataRelationshipContextFromKey(propertyName));
+  return parentFieldMetadata?.additionalInformation
+    ? {
+        content: parentFieldMetadata.additionalInformation,
+      }
+    : undefined;
+};
+
+export const camelCase = (str: string) => {
+  return str
+    .replace(/[-_\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''))
+    .replace(/^[A-Z]/, (char) => char.toLowerCase());
+};

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

@@ -11,6 +11,7 @@ import { format } from '../../helpers/formatters';
 as per the locale.
 */
 interface PercentageProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on Percentage here
   currencyISOCode?: string;
   showGroupSeparators?: string;
@@ -42,7 +43,7 @@ export default function Percentage(props: PercentageProps) {
     decimalPrecision,
   } = props;
 
-  const [values, setValues] = useState(value.toString());
+  const [values, setValues] = useState(value?.toString() ?? '');
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -53,7 +54,7 @@ export default function Percentage(props: PercentageProps) {
   const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
 
   useEffect(() => {
-    setValues(value.toString());
+    setValues(value?.toString() ?? '');
   }, [value]);
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
@@ -63,7 +64,7 @@ export default function Percentage(props: PercentageProps) {
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {

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

@@ -6,6 +6,7 @@ import type { PConnFieldProps } from '@pega/sdk-react';
 import handleEvent from '../../helpers/event-utils';
 
 interface PhoneProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on Phone here
 }
 
@@ -46,7 +47,7 @@ export default function Phone(props: PhoneProps) {
   };
 
   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/SelectableCard/SelectableCard.tsx

@@ -180,7 +180,8 @@ export default function SelectableCard(props) {
                       }}
                     >
                       {field.name && <div>{field.name}</div>}
-                      <div>{field?.value?.props.value}</div>
+                      {/* sdk-react's component creator doesn't spread config props onto the element */}
+                      <div>{field?.value?.props.getPConnect?.().getConfigProps().value}</div>
                     </div>
                   ))}
                 </div>

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

@@ -6,6 +6,7 @@ import { getComponentFromRegistry } from '@pega/sdk-react';
 import type { PConnFieldProps } from '@pega/sdk-react';
 
 interface TextAreaProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on TextArea here
   fieldMetadata?: any;
 }
@@ -45,7 +46,7 @@ export default function TextArea(props: TextAreaProps) {
   }, [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/TextInput/TextInput.tsx

@@ -6,6 +6,7 @@ import { getComponentFromRegistry } from '@pega/sdk-react';
 import type { PConnFieldProps } from '@pega/sdk-react';
 
 interface TextInputProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on TextInput here
   fieldMetadata?: any;
 }
@@ -48,7 +49,7 @@ export default function TextInput(props: TextInputProps) {
   }, [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/Time/Time.tsx

@@ -7,6 +7,7 @@ import { getComponentFromRegistry } from '@pega/sdk-react';
 import type { PConnFieldProps } from '@pega/sdk-react';
 
 interface TimeProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on Time here
 }
 
@@ -34,7 +35,7 @@ export default function Time(props: TimeProps) {
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).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/URL/URL.tsx

@@ -6,6 +6,7 @@ import { getComponentFromRegistry } from '@pega/sdk-react';
 import type { PConnFieldProps } from '@pega/sdk-react';
 
 interface URLComponentProps extends PConnFieldProps {
+  variant?: string;
   // If any, enter additional props that only exist on URLComponent here
 }
 
@@ -45,7 +46,7 @@ export default function URLComponent(props: URLComponentProps) {
   }, [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/UserReference/UserReference.tsx

@@ -97,7 +97,7 @@ const UserReference = (props: UserReferenceProps) => {
   let userReferenceComponent: any = null;
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {

package/templates/react-sdk-reference/src/components/helpers/field-utils.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import type { SxProps } from '@mui/material';
+
+export type Status = 'error' | 'warning' | 'pending' | 'success' | undefined;
+
+export interface FormStatusProps {
+  showFieldMessage?: boolean;
+  messageVisibility?: boolean;
+  validatemessage?: string;
+  readOnly?: boolean;
+}
+
+export const useStatus = ({
+  showFieldMessage,
+  messageVisibility,
+  validatemessage,
+  readOnly,
+}: FormStatusProps = {}): Status => {
+  const [status, setStatus] = useState<Status>();
+
+  useEffect(() => {
+    if (validatemessage) {
+      setStatus('error');
+    } else if (showFieldMessage && messageVisibility && !readOnly) {
+      setStatus('warning');
+    } else {
+      setStatus(undefined);
+    }
+  }, [validatemessage, messageVisibility, readOnly, showFieldMessage]);
+
+  return status;
+};
+
+const WARNING_FIELD_SX: SxProps = {
+  '& .MuiFormHelperText-root': {
+    color: 'error.main',
+    marginLeft: '0px',
+  },
+};
+
+// Field warnings render as red helper text on TextField-based inputs
+export const getFieldSx = (status: Status): SxProps | undefined => {
+  return status === 'warning' ? WARNING_FIELD_SX : undefined;
+};

package/templates/react-sdk-reference/src/components/helpers/simpleTableHelpers.ts

@@ -116,9 +116,12 @@ const SUPPORTED_FIELD_TYPES = [
 export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex) => {
   let primaryFields: any = [];
   let configFields: any = [];
+  const safeRawFields = rawFields || [];
 
   if (primaryFieldsViewIndex > -1) {
-    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(PRIMARY_FIELDS);
+    // @ts-ignore
+    const qualifiedName = PCore.getNameSpaceUtils?.()?.getDefaultQualifiedName(PRIMARY_FIELDS);
+    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(qualifiedName);
     if (Array.isArray(primaryFieldVMD)) {
       primaryFieldVMD = primaryFieldVMD.find((primaryFieldView) => primaryFieldView.classID === contextClass);
       primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
@@ -132,9 +135,9 @@ export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex)
   }
 
   configFields = [
-    ...rawFields.slice(0, primaryFieldsViewIndex),
+    ...safeRawFields.slice(0, primaryFieldsViewIndex),
     ...primaryFields,
-    ...rawFields.slice(primaryFieldsViewIndex + 1),
+    ...safeRawFields.slice(primaryFieldsViewIndex + 1),
   ];
   // filter duplicate fields after combining raw fields and primary fields
   return configFields.filter(
@@ -215,9 +218,11 @@ export function getFieldLabel(fieldConfig) {
 export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex, pConnect, options) => {
   const labelsOfFields: any = [];
   const { columnsRawConfig = [] } = options;
+  // @ts-ignore
+  const qualifiedPrimaryFields = PCore.getNameSpaceUtils?.()?.getDefaultQualifiedName(PRIMARY_FIELDS);
   fields.forEach((field, idx) => {
     const rawColumnConfig = columnsRawConfig[idx]?.config;
-    if (field.config.value === PRIMARY_FIELDS) {
+    if (field.config.value === PRIMARY_FIELDS || field.config.value === qualifiedPrimaryFields) {
       labelsOfFields.push('');
     } else if (isFLProperty(rawColumnConfig?.label ?? rawColumnConfig?.caption)) {
       labelsOfFields.push(getFieldLabel(rawColumnConfig) || field.config.label || field.config.caption);
@@ -234,7 +239,7 @@ export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex,
         let label = configFields[i].config?.label;
         if (isFLProperty(label)) {
           label = getFieldLabel(configFields[i].config);
-        } else if (label.startsWith('@')) {
+        } else if (label?.startsWith('@')) {
           label = label.substring(3);
         }
         if (pConnect) {
@@ -259,12 +264,19 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
   });
 
   const fieldDefs = configFields.map((field, index) => {
+    let name = field.config.value;
+    if (name.startsWith('@')) {
+      name = name.substring(name.indexOf(' ') + 1);
+    }
+    if (name.startsWith('.')) {
+      name = name.substring(1);
+    }
     return {
       type: 'text',
       label: fieldsLabels[index],
       fillAvailableSpace: !!field.config.fillAvailableSpace,
       id: `${index}`,
-      name: field.config.value.substr(4),
+      name,
       cellRenderer: TABLE_CELL,
       sort: false,
       noContextMenu: true,
@@ -273,7 +285,7 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
         ...field,
       },
       // BUG-615253: Workaround for autosize in table with lazy loading components
-      width: getFieldWidth(field, fields[index].config.label),
+      width: getFieldWidth(field, fieldsLabels[index]),
     };
   });
 

package/templates/react-sdk-reference/src/components/infra/ModalViewContainer/DataViewActionButtons/DataViewActionButtons.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import type { PConnProps } from '@pega/sdk-react';
+
+function getActionLabel(action: unknown, constants: { RESOURCE_STATUS: { UPDATE?: unknown } }) {
+  return action === constants.RESOURCE_STATUS.UPDATE ? 'Update' : 'Submit';
+}
+
+interface DataViewActionButtonsProps extends PConnProps {
+  context: string;
+  classId: string;
+  dataObjectAction: string;
+  dataRecordKeys: string;
+  actionID: string;
+  closeActionsDialog: () => void;
+}
+
+export default function DataViewActionButtons(props: DataViewActionButtonsProps) {
+  const { getPConnect, context, classId, dataObjectAction, dataRecordKeys, actionID } = props;
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Data Object';
+  const actionsAPI = getPConnect().getActionsApi();
+  const constants = PCore.getConstants();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const resourceStatus = constants.RESOURCE_STATUS[dataObjectAction];
+  const actionName = localizedVal(getActionLabel(resourceStatus, constants), localeCategory);
+
+  function handleCancel() {
+    actionsAPI.cancelDataObject(context);
+  }
+
+  function handleSubmitAction() {
+    setIsLoading(true);
+    if (resourceStatus === constants.RESOURCE_STATUS.CREATE) {
+      actionsAPI
+        .createDataObject(context)
+        .then((data) => {
+          PCore.getPubSubUtils().publish(constants.PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_CREATED, {
+            classId,
+            data,
+          });
+        })
+        .catch(() => {
+          // Error messages are handled by the infrastructure via httpMessages/pageMessages
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    } else if (resourceStatus === constants.RESOURCE_STATUS.UPDATE) {
+      actionsAPI
+        .updateDataObject(context, JSON.parse(dataRecordKeys))
+        .then(() => {
+          PCore.getPubSubUtils().publish(constants.PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_UPDATED, {
+            classId,
+          });
+        })
+        .catch(() => {
+          // Error messages are handled by the infrastructure via httpMessages/pageMessages
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    } else if (resourceStatus === constants.RESOURCE_STATUS.OPEN_FLOW_ACTION) {
+      actionsAPI
+        .submitDataObjectAction(context, JSON.parse(dataRecordKeys), actionID)
+        .then(() => {
+          PCore.getPubSubUtils().publish(constants.PUB_SUB_EVENTS.DATA_EVENTS.DATA_OBJECT_UPDATED, {
+            classId,
+            actionID,
+          });
+        })
+        .catch(() => {
+          // Error messages are handled by the infrastructure via httpMessages/pageMessages
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }
+
+  return (
+    <div style={{ padding: '8px 24px 20px 24px' }}>
+      <Divider sx={{ my: '10px' }} />
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Button color="secondary" variant="contained" disabled={isLoading} onClick={handleCancel}>
+          {localizedVal('Cancel', localeCategory)}
+        </Button>
+        <Button color="primary" variant="contained" disabled={isLoading} onClick={handleSubmitAction}>
+          {actionName}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/infra/ModalViewContainer/DataViewActionButtons/index.tsx

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

package/templates/react-sdk-reference/src/components/infra/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import type { PConnProps } from '@pega/sdk-react';
+
+interface ListViewActionButtonsProps extends PConnProps {
+  context: string;
+  closeActionsDialog: () => void;
+}
+
+export default function ListViewActionButtons(props: ListViewActionButtonsProps) {
+  const { getPConnect, context, closeActionsDialog } = props;
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Data Object';
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  return (
+    <div style={{ display: 'flex', margin: '8px' }}>
+      <Button
+        sx={{ width: '50%', m: '4px' }}
+        variant="contained"
+        color="secondary"
+        onClick={() => {
+          getPConnect().getActionsApi().cancelDataObject(context);
+        }}
+      >
+        {localizedVal('Cancel', localeCategory)}
+      </Button>
+      <Button
+        sx={{ width: '50%', m: '4px' }}
+        variant="contained"
+        color="primary"
+        disabled={isDisabled}
+        onClick={() => {
+          setIsDisabled(true);
+          getPConnect()
+            .getActionsApi()
+            .submitEmbeddedDataModal(context)
+            .then(() => {
+              closeActionsDialog();
+            })
+            .catch((err) => {
+              console.log(err);
+            })
+            .finally(() => {
+              setIsDisabled(false);
+            });
+        }}
+      >
+        {localizedVal('Submit', localeCategory)}
+      </Button>
+    </div>
+  );
+}

package/templates/react-sdk-reference/src/components/infra/ModalViewContainer/ListViewActionButtons/index.tsx

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

package/templates/react-sdk-reference/src/components/template/AdvancedSearch/SearchGroups/SearchGroups.tsx

@@ -206,7 +206,7 @@ export default function SearchGroups(props) {
   );
 
   const actionButtons = (
-    <Box display="flex" gap={2}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <Button variant="outlined" onClick={resetFilterData}>
         {localizedVal('Reset', 'SimpleTable')}
       </Button>
@@ -256,7 +256,7 @@ export default function SearchGroups(props) {
   const childrenToRender = [searchDropdown, searchFieldsViewComp, actionButtons];
 
   return (
-    <Box display="flex" flexDirection="column" gap={2}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
       {childrenToRender.map((child, index) => (
         <React.Fragment key={index}>{child}</React.Fragment>
       ))}

package/templates/react-sdk-reference/src/components/template/CaseSummary/CaseSummary.tsx

@@ -64,7 +64,9 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
         const secondarySummaryFields = prepareCaseSummaryData(childPConn);
         arSecondaryFields = childPConnData.children;
         arSecondaryFields.forEach((field, index) => {
-          field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
+          field.config.displayLabel = secondarySummaryFields[index]?.value?.props
+            ?.getPConnect?.()
+            .getConfigProps().label;
         });
       }
     }