@pega/dx-component-builder-sdk 25.1.16 → 26.1.10

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyInteger/index.tsx

@@ -4,11 +4,19 @@ import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyIntegerWrapper from './styles';
 
 interface PegaDxilMyIntegerProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -26,20 +34,29 @@ export default function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
 
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const [inputValue, setInputValue] = useState('');
 
@@ -48,22 +65,14 @@ export default function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function intOnChange(event) {
     // console.log(`Integer intOnChange inValue: ${event.target.value}`);
@@ -102,7 +111,10 @@ export default function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
         label={label}
         value={inputValue}
         type='text'
-        inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
+        slotProps={{
+          htmlInput: { inputMode: 'numeric', pattern: '[0-9]*', ...testProps }
+        }}
+        sx={getFieldSx(status)}
       />
     </StyledPegaDxilMyIntegerWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyParagraph/index.tsx

@@ -4,12 +4,20 @@ import { TextField } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyParagraphWrapper from './styles';
 
 interface PegaDxilMyParagraphProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
   fieldMetadata?: any;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -26,22 +34,31 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     fieldMetadata,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
   const maxLength = fieldMetadata?.maxLength;
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   const [inputValue, setInputValue] = useState('');
 
   let readOnlyProp = {};
@@ -51,11 +68,7 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (readOnly) {
@@ -64,11 +77,7 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -97,7 +106,10 @@ export default function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
         error={status === 'error'}
         label={label}
         value={inputValue}
-        InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+        slotProps={{
+          input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
+        }}
+        sx={getFieldSx(status)}
       />
     </StyledPegaDxilMyParagraphWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/index.tsx

@@ -6,6 +6,8 @@ import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyPercentageWrapper from './styles';
 
@@ -18,6 +20,12 @@ interface PegaDxilMyPercentageProps extends PConnFieldProps {
   currencyISOCode?: string;
   showGroupSeparators?: string;
   decimalPrecision?: number;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -32,7 +40,6 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     // onChange,
     // onBlur,
     readOnly,
@@ -43,7 +50,9 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
     hideLabel,
     placeholder,
     showGroupSeparators,
-    decimalPrecision
+    decimalPrecision,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const [values, setValues] = useState(value.toString());
@@ -51,7 +60,15 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
@@ -67,18 +84,14 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
   }
 
   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') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrDec = theSymbols.theDecimalIndicator;
@@ -114,7 +127,8 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
         thousandSeparator={showGroupSeparators ? theCurrSep : ''}
         decimalScale={decimalPrecision}
         suffix='%'
-        InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+        slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+        sx={getFieldSx(status)}
         customInput={TextField}
       />
     </StyledPegaDxilMyPercentageWrapper>

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPhone/index.tsx

@@ -4,11 +4,19 @@ import { MuiTelInput } from 'mui-tel-input';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyPhoneWrapper from './styles';
 
 interface PegaDxilMyPhoneProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -25,14 +33,15 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     onChange,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
@@ -42,16 +51,20 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
   const [inputValue, setInputValue] = useState(value);
   useEffect(() => setInputValue(value), [value]);
 
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
-  let testProp = {};
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   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') {
@@ -78,10 +91,11 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
             slotProps={{
               input: {
                 readOnly: true,
-                ...testProp,
+                ...testProps,
               },
             }}
             disableDropdown={disableDropdown}
+            sx={getFieldSx(status)}
           />
         </StyledPegaDxilMyPhoneWrapper>
       </div>
@@ -115,7 +129,8 @@ export default function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
         error={status === 'error'}
         label={label}
         value={inputValue}
-        slotProps={{ input: { ...testProp } }}
+        slotProps={{ input: { ...testProps } }}
+        sx={getFieldSx(status)}
       />
     </StyledPegaDxilMyPhoneWrapper>
   );

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPicklist/index.tsx

@@ -7,6 +7,8 @@ import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/d
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyPicklistWrapper from './styles';
 
@@ -58,6 +60,12 @@ interface PegaDxilMyPicklistProps extends PConnFieldProps {
   datasourceMetadata?: any;
   parameters?: any;
   columns: any[];
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -74,7 +82,6 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     helperText,
@@ -83,7 +90,9 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
     datasourceMetadata,
     hideLabel,
     onRecordChange,
-    fieldMetadata
+    fieldMetadata,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
   let { placeholder = '' } = props;
   const context = getPConnect().getContextName();
@@ -91,7 +100,8 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
   placeholder = placeholder || 'Select...';
   const [options, setOptions] = useState<IOption[]>([]);
   const [theDatasource, setDatasource] = useState<any[] | null>(null);
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
@@ -99,6 +109,13 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
   const className = thePConn.getCaseInfo().getClassName();
   const refName = propName?.slice(propName.lastIndexOf('.') + 1);
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   if (!isDeepEqual(datasource, theDatasource)) {
     // inbound datasource is different, so update theDatasource (to trigger useEffect)
     setDatasource(datasource);
@@ -135,7 +152,7 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
       const optionsList = [...list];
       optionsList.unshift({
         key: placeholder,
-        value: thePConn.getLocalizedValue(placeholder)
+        value: thePConn.getLocalizedValue(placeholder, '', '')
       }); // 2nd and 3rd args empty string until typedef marked correctly
       setOptions(optionsList);
     }
@@ -154,7 +171,14 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
           };
           optionsData.push(obj);
         });
+        optionsData.unshift({
+          key: placeholder,
+          value: thePConn.getLocalizedValue(placeholder, '', '')
+        });
         setOptions(optionsData);
+      })
+      .catch(e => {
+        console.error(e);
       });
     }
   }, []);
@@ -176,6 +200,7 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
         <FieldValueList
           name={hideLabel ? '' : label}
           value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          variant={props.variant}
         />
       );
     }
@@ -201,9 +226,7 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
+  const testProps: any = {
     'data-test-id': testId
   };
 
@@ -232,7 +255,10 @@ export default function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
         label={label}
         value={value === '' && !readOnly ? placeholder : value}
         select
-        InputProps={{ ...readOnlyProp, ...testProp }}
+        slotProps={{
+          input: { ...readOnlyProp, ...testProps }
+        }}
+        sx={getFieldSx(status)}
       >
         {options.map((option: any) => (
           <MenuItem key={option.key} value={option.key}>

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyRadiobuttons/index.tsx

@@ -5,6 +5,8 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFormControlSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMyRadiobuttonsWrapper from './styles';
 
@@ -20,6 +22,11 @@ interface PegaDxilMyRadiobuttonsProps extends PConnFieldProps {
   imageSize?: string;
   showImageDescription?: boolean;
   datasource?: any;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
 }
 
 // Duplicated runtime code from React SDK
@@ -37,7 +44,6 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
     readOnly,
     validatemessage,
     helperText,
-    status,
     required,
     inline,
     displayMode,
@@ -49,7 +55,9 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
     datasource,
     imagePosition,
     imageSize,
-    showImageDescription
+    showImageDescription,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -57,9 +65,17 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
   const theConfigProps = thePConn.getConfigProps();
   const actionsApi = thePConn.getActionsApi();
   const propName = (thePConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
   const className = thePConn.getCaseInfo().getClassName();
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   let configProperty = (thePConn.getRawMetadata() as any)?.config?.value || '';
   configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
   configProperty = configProperty.startsWith('.') ? configProperty.substring(1) : configProperty;
@@ -113,7 +129,7 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
     return (
       <div>
         <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+        <div id='selectable-card' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
           <SelectableCard
             hideFieldLabels={hideFieldLabels}
             additionalProps={additionalProps}
@@ -139,7 +155,7 @@ export default function PegaDxilMyRadiobuttons(props: PegaDxilMyRadiobuttonsProp
   }
   return (
     <StyledPegaDxilMyRadiobuttonsWrapper>
-      <FormControl variant='standard' error={status === 'error'} required={required}>
+      <FormControl variant='standard' error={status === 'error'} required={required} sx={getFormControlSx(status)}>
         <FormLabel component='legend'>{label}</FormLabel>
         <RadioGroup value={theSelectedButton} onChange={handleChange} onBlur={!readOnly ? handleBlur : undefined} row={inline}>
           {theOptions.map(theOption => {

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MySearchbox/index.tsx

@@ -8,6 +8,8 @@ import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/d
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 import StyledPegaDxilMySearchboxWrapper from './styles';
 
@@ -44,13 +46,18 @@ interface PegaDxilMySearchboxProps extends PConnFieldProps {
   displayMode?: string;
   deferDatasource?: boolean;
   datasourceMetadata?: any;
-  status?: string;
   onRecordChange?: any;
   additionalProps?: object;
   listType: string;
   parameters?: any;
   datasource: any;
   columns: any[];
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -73,10 +80,11 @@ export default function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
     displayMode,
     deferDatasource,
     datasourceMetadata,
-    status,
     helperText,
     hideLabel,
-    onRecordChange
+    onRecordChange,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const context = getPConnect().getContextName();
@@ -85,12 +93,20 @@ export default function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
   const [options, setOptions] = useState<IOption[]>([]);
   const [theDatasource, setDatasource] = useState(null);
   let selectedValue: any = '';
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
   const propName = (thePConn.getStateProps() as any).value;
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   if (!isDeepEqual(datasource, theDatasource)) {
     // inbound datasource is different, so update theDatasource (to trigger useEffect)
     setDatasource(datasource);
@@ -156,11 +172,7 @@ export default function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
   }, []);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
-  }
-
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (value) {
@@ -217,6 +229,7 @@ export default function PegaDxilMySearchbox(props: PegaDxilMySearchboxProps) {
             error={status === 'error'}
             label={label}
             data-test-id={testId}
+            sx={getFieldSx(status)}
           />
         )}
       />