@pega/dx-component-builder-sdk 0.23.14 → 0.23.16

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/pega-dxil-my-form.component.scss

@@ -1,27 +1,31 @@
 .psdk-default-form-one-column {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-two-column {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-three-column {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
 }
 
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
 }
 
 .template-title-container {
@@ -29,3 +33,8 @@
   font-weight: 600;
   margin: 10px 0px;
 }
+
+.psdk-default-form-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/field-group/field-group.component.html

@@ -0,0 +1,21 @@
+<div class="field-group-container">
+  <div *ngIf="name" class="field-group-heading">
+    <span *ngIf="collapsible; else no_collapse" id="field-group-header" class="field-group-header" (click)="headerClickHandler()">
+      <mat-icon *ngIf="collapsed; else down_arrow" aria-hidden="false" aria-label="Arrow Right" fontIcon="keyboard_arrow_right"></mat-icon>
+      <ng-template #down_arrow>
+        <mat-icon aria-hidden="false" aria-label="Arrow Down" fontIcon="keyboard_arrow_down"></mat-icon>
+      </ng-template>
+      <b>{{ name }}</b>
+    </span>
+    <ng-template #no_collapse>
+      <span>{{ name }}</span>
+    </ng-template>
+  </div>
+
+  <div *ngIf="instructions && instructions !== 'none'" class="field-group-instructions">
+    <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
+  </div>
+  <div *ngIf="!collapsed" class="field-group-content">
+    <ng-container [ngTemplateOutlet]="childrenTemplate"></ng-container>
+  </div>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/field-group/field-group.component.scss

@@ -0,0 +1,18 @@
+.field-group-container {
+  .field-group-heading {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    font-weight: bold;
+
+    .field-group-header {
+      gap: 5px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+
+  .field-group-instructions {
+    padding: 5px 0;
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/field-group/field-group.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FieldGroupComponent } from './field-group.component';
+
+describe('FieldGroupComponent', () => {
+  let component: FieldGroupComponent;
+  let fixture: ComponentFixture<FieldGroupComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FieldGroupComponent]
+    });
+    fixture = TestBed.createComponent(FieldGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/field-group/field-group.component.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, TemplateRef } from '@angular/core';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-field-group',
+  templateUrl: './field-group.component.html',
+  styleUrls: ['./field-group.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatGridListModule, MatIconModule]
+})
+export class FieldGroupComponent {
+  @Input() name?: string;
+  @Input() collapsible = false;
+  @Input() instructions: string;
+  @Input() childrenTemplate: TemplateRef<any>;
+
+  collapsed = false;
+
+  headerClickHandler() {
+    this.collapsed = !this.collapsed;
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -1,8 +1,14 @@
 <div id="details-fields-list">
   <div *ngFor="let field of arFields$">
-    <div *ngIf="field.type === 'reference'; else showDetails">
-      <component-mapper name="View" [props]="{ pConn$: field.pConn }"></component-mapper>
+    <div *ngIf="field.type === 'group'; else noGroup">
+      <component-mapper name="Group" [props]="{ pConn$: field.pConn }"></component-mapper>
     </div>
+    <ng-template #noGroup>
+      <div *ngIf="field.type === 'reference'; else showDetails">
+        <component-mapper name="View" [props]="{ pConn$: field.pConn }"></component-mapper>
+      </div>
+    </ng-template>
+
     <ng-template #showDetails>
       <div class="psdk-grid-filter" *ngIf="field.config.label">
         <div class="psdk-details-fields-label">

package/tests/assets/sdk-a/components/createAll/override-sdk/field/check-box/check-box.component.html

@@ -1,5 +1,9 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper
+    *ngIf="bVisible$ !== false"
+    name="FieldValueList"
+    [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
+  ></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">

package/tests/assets/sdk-a/components/createAll/override-sdk/field/check-box/check-box.component.ts

@@ -13,6 +13,8 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // Everything from PConnFieldProps except value and change type of value to boolean
   value: boolean;
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 @Component({
@@ -45,6 +47,8 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
+  trueLabel$?: string;
+  falseLabel$?: string;
 
   fieldControl = new FormControl('', null);
 
@@ -116,6 +120,8 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
 
     this.caption$ = this.configProps$.caption;
     this.helperText = this.configProps$.helperText;
+    this.trueLabel$ = this.configProps$.trueLabel;
+    this.falseLabel$ = this.configProps$.falseLabel;
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {

package/tests/assets/sdk-a/components/createAll/override-sdk/field/date/date.component.html

@@ -1,5 +1,9 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper
+    *ngIf="bVisible$ !== false"
+    name="FieldValueList"
+    [props]="{ label$, value$: getFormattedValue(), displayMode$ }"
+  ></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">

package/tests/assets/sdk-a/components/createAll/override-sdk/field/date/date.component.ts

@@ -14,6 +14,7 @@ import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface DateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
@@ -242,4 +243,10 @@ export class DateComponent implements OnInit, OnDestroy {
     }
     return errMessage;
   }
+
+  getFormattedValue() {
+    return format(this.value$, 'date', {
+      format: this.theDateFormat.dateFormatString
+    });
+  }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/field/group/config-ext.json

@@ -0,0 +1,8 @@
+{
+    "componentKey": "Group",
+    "name": "Group",
+    "label": "Field Group",
+    "description": "Field Group",
+    "type": "Group",
+    "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/group/group.component.html

@@ -0,0 +1,25 @@
+<ng-container *ngIf="visibility$">
+  <component-mapper
+    name="FieldGroup"
+    [props]="{
+      name: showHeading$ ? heading$ : undefined,
+      collapsible: collapsible$,
+      instructions: instructions$,
+      childrenTemplate: childrenTemplate
+    }"
+  >
+  </component-mapper>
+
+  <ng-template #childrenTemplate>
+    <div *ngFor="let kid of arChildren$">
+      <component-mapper
+        [name]="kid.getPConnect().getComponentName()"
+        [props]="{
+          pConn$: kid.getPConnect(),
+          formGroup$: formGroup$
+        }"
+        errorMsg="Field Group wants component not yet available: {{ kid.getPConnect().getComponentName() }}"
+      ></component-mapper>
+    </div>
+  </ng-template>
+</ng-container>

package/tests/assets/sdk-a/components/createAll/override-sdk/field/group/group.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GroupComponent } from './group.component';
+
+describe('GroupComponent', () => {
+  let component: GroupComponent;
+  let fixture: ComponentFixture<GroupComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [GroupComponent]
+    });
+    fixture = TestBed.createComponent(GroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/createAll/override-sdk/field/group/group.component.ts

@@ -0,0 +1,84 @@
+import { CommonModule } from '@angular/common';
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+
+interface GroupProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Group here
+  showHeading: boolean;
+  heading: string;
+  instructions: string;
+  collapsible: boolean;
+}
+
+@Component({
+  selector: 'app-group',
+  templateUrl: './group.component.html',
+  styleUrls: ['./group.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class GroupComponent implements OnInit {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  arChildren$: any[];
+  visibility$?: boolean;
+  showHeading$?: boolean;
+  heading$: string;
+  instructions$: string;
+  collapsible$: boolean;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: GroupProps;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.checkAndUpdate();
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf(): void {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as GroupProps;
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.visibility$ = this.configProps$.visibility;
+    this.showHeading$ = this.configProps$.showHeading;
+    this.heading$ = this.configProps$.heading;
+    this.instructions$ = this.configProps$.instructions;
+    this.collapsible$ = this.configProps$.collapsible;
+
+    if (this.configProps$.displayMode === 'LABELS_LEFT') {
+      if (this.configProps$.visibility === undefined) this.visibility$ = true;
+
+      this.arChildren$.forEach(child => {
+        const pConn = child.getPConnect();
+        pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+        pConn.setInheritedProp('readOnly', true);
+
+        return child;
+      });
+    }
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/template/app-shell/app-shell.component.ts

@@ -143,7 +143,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
           this.sErrorMessages = this.sErrorMessages.concat(errorMessages.actionMessage).concat('\n');
 
           if (this.bOkDisplayError) {
-            const config = { panelClass: ['snackbar-newline'] };
+            const config = { panelClass: ['snackbar-newline'], duration: 5000 };
             this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);
           }
         }
@@ -159,7 +159,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
         this.bOkDisplayError = true;
 
         if (this.bOkDisplayError) {
-          const config = { panelClass: ['snackbar-newline'] };
+          const config = { panelClass: ['snackbar-newline'], duration: 5000 };
           this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);
         }
         // this.snackBarRef.afterDismissed().subscribe( info => {

package/tests/assets/sdk-a/components/createAll/override-sdk/template/case-view/case-view.component.ts

@@ -223,7 +223,7 @@ export class CaseViewComponent implements OnInit, OnDestroy {
     const actionsAPI = this.pConn$.getActionsApi();
     const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
 
-    openLocalAction(editAction.ID, { ...editAction });
+    openLocalAction(editAction.ID, { ...editAction, containerName: 'modal', type: 'express' });
   }
 
   _menuActionClick(data) {

package/tests/assets/sdk-a/components/createAll/override-sdk/template/default-form/default-form.component.scss

@@ -1,27 +1,31 @@
 .psdk-default-form-one-column {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-two-column {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-three-column {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
 }
 
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
 }
 
 .template-title-container {

package/tests/assets/sdk-a/components/createAll/override-sdk/template/details/details.component.ts

@@ -76,7 +76,7 @@ export class DetailsComponent implements OnInit, OnDestroy {
       fields?.forEach(field => {
         const thePConn = field.getPConnect();
         const theCompType = thePConn.getComponentName().toLowerCase();
-        if (theCompType === 'reference') {
+        if (theCompType === 'reference' || theCompType === 'group') {
           const configProps = thePConn.getConfigProps();
           configProps.readOnly = true;
           configProps.displayMode = 'LABELS_LEFT';
@@ -89,6 +89,7 @@ export class DetailsComponent implements OnInit, OnDestroy {
           };
           const viewContConfig = {
             meta: {
+              ...thePConn.getMetadata(),
               type: theCompType,
               config: configProps
             },

package/tests/assets/sdk-a/components/createAll/override-sdk/template/list-view/utils.ts

@@ -680,10 +680,12 @@ export const readContextResponse = async (context, params) => {
     const dataViewName = PCore.getDataTypeUtils().getSavableDataPage(classID);
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach(item => (item.isAlternateKeyStorage ? compositeKeys.push(item.linkedField) : compositeKeys.push(item.keyName)));
-    if (compositeKeys.length) {
+    if (compositeKeys.length && otherContext) {
       otherContext.setCompositeKeys(compositeKeys);
     }
-    otherContext.fetchRowActionDetails = null;
+    if (otherContext) {
+      otherContext.fetchRowActionDetails = null;
+    }
   }
 
   const presetArray = [];

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof PegaDxilMyTestText> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyTestText>;
 
-export const BasePegaDxilMyTestText: Story = (args) => {
+export const BasePegaDxilMyTestText: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -34,8 +34,12 @@ export const BasePegaDxilMyTestText: Story = (args) => {
         }
       };
     },
-    onChange: (event) => { setValue(event.target.value); },
-    onBlur: () => { return configProps.value; }
+    onChange: event => {
+      setValue(event.target.value);
+    },
+    onBlur: () => {
+      return configProps.value;
+    }
   };
 
   return <PegaDxilMyTestText {...props} {...args} />;
@@ -51,5 +55,5 @@ BasePegaDxilMyTestText.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/index.tsx

@@ -14,7 +14,6 @@ interface PegaDxilMyTestTextProps extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
@@ -81,21 +80,21 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
 
   return (
     <StyledPegaDxilMyTestTextWrapper>
-    <TextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={handleChange}
-      onBlur={!readOnly ? handleBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={inputValue}
-      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
-    />
+      <TextField
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={inputValue}
+        InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+      />
     </StyledPegaDxilMyTestTextWrapper>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,12 +1,16 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 
 // FieldGroupProps is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
 interface FieldGroupProps {
   // If any, enter additional props that only exist on this component
-  name: string | object;
+  name?: string;
+  collapsible?: boolean;
+  instructions?: string;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -23,12 +27,22 @@ const useStyles = makeStyles(theme => ({
   },
   fullWidth: {
     width: '100%'
+  },
+  fieldGroupHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '5px',
+    cursor: collapsible => (collapsible ? 'pointer' : 'auto')
+  },
+  instructionText: {
+    padding: '5px 0'
   }
 }));
 
 export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
-  const { children, name } = props;
-  const classes = useStyles();
+  const { children, name, collapsible = false, instructions } = props;
+  const classes = useStyles(collapsible);
+  const [collapsed, setCollapsed] = useState(false);
 
   const descAndChildren = (
     <Grid container>
@@ -36,15 +50,30 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
     </Grid>
   );
 
+  const headerClickHandler = () => {
+    setCollapsed(current => !current);
+  };
+
   return (
     <Grid container spacing={4} justifyContent='space-between'>
       <Grid item style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
-            <b>{props.name}</b>
+            {collapsible ? (
+              <span id='field-group-header' className={classes.fieldGroupHeader} onClick={headerClickHandler}>
+                {collapsed ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
+                <b>{name}</b>
+              </span>
+            ) : (
+              <b>{name}</b>
+            )}
           </div>
         )}
-        {descAndChildren}
+        {instructions && instructions !== 'none' && (
+          // eslint-disable-next-line react/no-danger
+          <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
+        )}
+        {!collapsed && descAndChildren}
       </Grid>
     </Grid>
   );

package/tests/assets/sdk-r/components/create/override-sdk/field/Checkbox/Checkbox.tsx

@@ -10,6 +10,8 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   value?: boolean;
   // eslint-disable-next-line react/no-unused-prop-types
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 export default function CheckboxComponent(props: CheckboxProps) {
@@ -18,7 +20,6 @@ export default function CheckboxComponent(props: CheckboxProps) {
 
   const {
     getPConnect,
-    label,
     value = false,
     readOnly,
     testId,
@@ -28,7 +29,9 @@ export default function CheckboxComponent(props: CheckboxProps) {
     helperText,
     validatemessage,
     displayMode,
-    hideLabel
+    hideLabel,
+    trueLabel,
+    falseLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -45,11 +48,11 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
   }
 
   const handleChange = event => {