('');
+
+ // Get the inherited props from the parent to determine label settings
+ const inheritedProps = { ...getPConnect().getInheritedProps() };
+
+ const addRow = () => {
+ setNumRows(prevCount => {
+ const messageConfig = {
+ meta: props,
+ options: {
+ context: getPConnect().getContextName(),
+ pageReference: 'caseInfo.content',
+ referenceList: `.${embedDataRef}`,
+ viewName: getPConnect().options.viewName
+ }
+ };
+ const c11nEnv = (window as any).PCore.createPConnect(messageConfig);
+ c11nEnv.index = prevCount;
+ c11nEnv.getPConnect().getListActions().insert({}, prevCount);
+
+ return prevCount + 1;
+ });
+ setFields(prevFields => {
+ return prevFields.map((field: any) => {
+ const newField = { ...field };
+ // Add a new empty value
+ newField.value.push('');
+ return newField;
+ });
+ });
+ };
+
+ const deleteRow = (index: number) => {
+ setNumRows(prevCount => {
+ const messageConfig = {
+ meta: props,
+ options: {
+ context: getPConnect().getContextName(),
+ pageReference: 'caseInfo.content',
+ referenceList: `.${embedDataRef}`,
+ viewName: getPConnect().options.viewName
+ }
+ };
+ const c11nEnv = (window as any).PCore.createPConnect(messageConfig);
+
+ c11nEnv.getPConnect().getListActions().deleteEntry(index);
+
+ return prevCount - 1;
+ });
+ setFields(prevFields => {
+ return prevFields.map((field: any) => {
+ const newField = { ...field };
+ // Delete the value in index position
+ newField.value.splice(index, 1);
+ return newField;
+ });
+ });
+ };
+
+ const genField = (field: any, index: number, key: string) => {
+ const fieldInput: any = {
+ type: field.componentType,
+ config: {
+ value: field.propref,
+ label: field.label,
+ hideLabel: true,
+ classID: field.contextClass,
+ displayMode: ''
+ }
+ };
+ const messageConfig = {
+ meta: fieldInput,
+ options: {
+ context: getPConnect().getContextName(),
+ hasForm: true,
+ pageReference: `caseInfo.content.${embedDataRef}[${index}]`,
+ referenceList: `.${embedDataRef}`,
+ viewName: getPConnect().options.viewName
+ }
+ };
+ const c11nEnv = (window as any).PCore.createPConnect(messageConfig);
+
+ return | {c11nEnv.getPConnect().createComponent(fieldInput)} | ;
+ };
+
+ useEffect(() => {
+ const tmpFields = getAllFields(getPConnect);
+ if (tmpFields && tmpFields[0] && tmpFields[0].value) {
+ setEmbedDataRef(tmpFields[0].pageref);
+
+ /* New API added in 24.2 - not needed for 24.1 */
+ (window as any).PCore.getContextTreeManager().addPageListNode(
+ getPConnect().getContextName(),
+ 'caseInfo.content',
+ getPConnect().meta.name,
+ tmpFields[0].pageref
+ );
+
+ setNumRows(tmpFields[0].value.length);
+ /* This logic will load the DX Component if it is not already loaded */
+ tmpFields.forEach((child: any) => {
+ if (
+ child.componentType &&
+ !(window as any).PCore.getComponentsRegistry().getLazyComponent(child.componentType)
+ ) {
+ (window as any).PCore.getAssetLoader()
+ .getLoader('component-loader')([child.componentType])
+ .then(() => {
+ setNumFields(prevCount => prevCount + 1);
+ });
+ } else {
+ setNumFields(prevCount => prevCount + 1);
+ }
+ });
+ setFields(tmpFields);
+ }
+ }, [getPConnect]);
+
+ useEffect(() => {
+ /* We will wait until all the components are loaded before rendering the table */
+ if (fields && fields.length > 0 && numFields === fields.length) {
+ setTableId(createUID());
+ setLoading(false);
+ }
+ }, [numFields, fields]);
+
+ if (loading) {
+ return ;
+ }
+
+ return (
+
+
+
+
+
+
+ {inheritedProps.label}
+
+
+
+ {fields.map((field: any, idx: number) => {
+ return (
+ |
+ {field.label}
+ |
+ );
+ })}
+ Action |
+
+
+
+ {Array.from({ length: numRows }, (_, i) => i).map((_, i) => {
+ return (
+
+ {fields.map((field: any, j: number) => {
+ return genField(field, i, `${tableId}-row-${i}-${j}`);
+ })}
+ |
+
+ |
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default withConfiguration(PegaExtensionsEditableTableLayout);
diff --git a/src/components/Pega_Extensions_EditableTableLayout/styles.ts b/src/components/Pega_Extensions_EditableTableLayout/styles.ts
new file mode 100644
index 0000000..d9ddf93
--- /dev/null
+++ b/src/components/Pega_Extensions_EditableTableLayout/styles.ts
@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+ return css`
+ overflow: auto;
+ & table {
+ border-collapse: collapse;
+ border: 0.0625rem solid rgb(207, 207, 207);
+ }
+
+ & th {
+ outline: 0.0625rem solid rgb(207, 207, 207);
+ border: none;
+ padding: 0.25rem 0.5rem;
+ min-width: 30ch;
+ background: #ffffff;
+ }
+
+ & tr > th:first-child {
+ position: sticky;
+ top: 0;
+ left: 0;
+ z-index: 20;
+ }
+
+ & tr > td:first-child {
+ position: sticky;
+ left: 0;
+ z-index: 20;
+ }
+
+ & td {
+ outline: 0.0625rem solid rgb(207, 207, 207);
+ background: #ffffff;
+ padding: 0.25rem 0.5rem;
+ }
+
+ & caption {
+ padding: 0.5rem;
+ text-align: start;
+ height: 2rem;
+ }
+
+ & caption > h3 {
+ position: absolute;
+ left: 1rem;
+ top: 1rem;
+ }
+ `;
+});
diff --git a/src/components/Pega_Extensions_EditableTableLayout/utils.ts b/src/components/Pega_Extensions_EditableTableLayout/utils.ts
new file mode 100644
index 0000000..8e35395
--- /dev/null
+++ b/src/components/Pega_Extensions_EditableTableLayout/utils.ts
@@ -0,0 +1,46 @@
+/**
+ * Given the PConnect object of a Template component, retrieve the children
+ * metadata of all regions.
+ * @param {Function} pConnect PConnect of a Template component.
+ */
+export default function getAllFields(pConnect: any) {
+ const metadata = pConnect().getRawMetadata();
+ if (!metadata.children) {
+ return [];
+ }
+
+ let allFields = [];
+
+ const makeField = (f: any) => {
+ if (typeof f.config.value === 'string') {
+ return {
+ ...pConnect().resolveConfigProps(f.config),
+ type: f.type,
+ propref: `@P ${f.config.value.substring(f.config.value.lastIndexOf('.'))}`,
+ pageref: f.config.value.substring(
+ f.config.value.indexOf(' .') + 2,
+ f.config.value.indexOf('[].')
+ )
+ };
+ }
+ return {
+ ...pConnect().resolveConfigProps(f.config),
+ type: f.type
+ };
+ };
+
+ const hasRegions = !!metadata.children[0]?.children;
+ if (hasRegions) {
+ metadata.children.forEach((region: any) =>
+ region.children.forEach((field: any) => {
+ allFields.push(makeField(field));
+ if (field.type === 'Group' && field.children) {
+ field.children.forEach((gf: any) => allFields.push(makeField(gf)));
+ }
+ })
+ );
+ } else {
+ allFields = metadata.children.map(makeField);
+ }
+ return allFields;
+}
diff --git a/src/components/Pega_Extensions_FieldGroupAsRow/styles.ts b/src/components/Pega_Extensions_FieldGroupAsRow/styles.ts
index f93f0a6..1c678a4 100644
--- a/src/components/Pega_Extensions_FieldGroupAsRow/styles.ts
+++ b/src/components/Pega_Extensions_FieldGroupAsRow/styles.ts
@@ -7,12 +7,12 @@ export default styled.div(({ theme }: { theme: typeof themeDefinition }) => {
max-width: unset;
}
- & > div > div > div {
+ & fieldset > div > div > div > div > div > div > div:last-child > div {
display: flex;
flex-flow: row wrap;
}
- & > div > div > div > h3 {
+ & fieldset > div h1 {
display: none;
}
diff --git a/src/components/Pega_Extensions_KanbanBoard/demo.stories.tsx b/src/components/Pega_Extensions_KanbanBoard/demo.stories.tsx
index b78c577..a8a1aeb 100644
--- a/src/components/Pega_Extensions_KanbanBoard/demo.stories.tsx
+++ b/src/components/Pega_Extensions_KanbanBoard/demo.stories.tsx
@@ -1,6 +1,6 @@
import type { StoryObj } from '@storybook/react';
-import { FieldValueItem, DateTimeDisplay } from '@pega/cosmos-react-core';
-import { Details } from '@pega/cosmos-react-work';
+import { DateTimeDisplay, FieldValueItem } from '@pega/cosmos-react-core';
+import { Details, DetailsList } from '@pega/cosmos-react-work';
import { PegaExtensionsKanbanBoard } from './index';
export default {
@@ -128,24 +128,34 @@ const setPCore = () => {
];
return (
-
-
-
- }
- />
-
+
-
-
+