From 3f7efd5ab57d2dee424a3f0966e3d960337fc6a6 Mon Sep 17 00:00:00 2001 From: Gaelyn Cooper Date: Fri, 12 Apr 2024 17:35:17 -0600 Subject: [PATCH 1/9] Add dynamic theme and document --- .../dynamic-portal/workspace.tsx | 9 +- lib/dynamic/document.ts | 175 ++++++++++++++++++ lib/dynamic/theme.ts | 66 +++++++ 3 files changed, 248 insertions(+), 2 deletions(-) create mode 100644 lib/dynamic/document.ts create mode 100644 lib/dynamic/theme.ts diff --git a/app/(authenticated)/dynamic-portal/workspace.tsx b/app/(authenticated)/dynamic-portal/workspace.tsx index bc248f2..97d1e9e 100644 --- a/app/(authenticated)/dynamic-portal/workspace.tsx +++ b/app/(authenticated)/dynamic-portal/workspace.tsx @@ -17,6 +17,8 @@ import dynamic from "next/dynamic"; import { type ISpace } from "@flatfile/react"; import { SheetConfig } from "@flatfile/api/api"; import { listener } from "@/lib/dynamic/listener"; +import { theme } from "@/lib/dynamic/theme"; +import { document } from "@/lib/dynamic/document"; const DynamicEmbeddedSpace = dynamic( () => import("@/components/shared/embedded-space"), @@ -91,9 +93,9 @@ export default function Workspace({ publishableKey: process.env.NEXT_PUBLIC_FLATFILE_PUBLISHABLE_KEY, environmentId: process.env.NEXT_PUBLIC_FLATFILE_ENVIRONMENT_ID, name: "Dynamic Portal", - // themeConfig: theme("#71a3d2", "#3A7CB9"), + themeConfig: theme, listener, - // document, + document, workbook: generateConfig({ sheet, customFieldConfig, @@ -102,6 +104,9 @@ export default function Workspace({ // userId, }, sidebarConfig: { + defaultPage: { + documentId: "document", + }, showDataChecklist: false, showSidebar: true, }, diff --git a/lib/dynamic/document.ts b/lib/dynamic/document.ts new file mode 100644 index 0000000..c859d70 --- /dev/null +++ b/lib/dynamic/document.ts @@ -0,0 +1,175 @@ +export const document = { + title: "Welcome", + body: ` +
+ + +
+
+

Welcome!

+

We're excited to help you import your data to HCM Show.

+
+ +
+

Follow the steps below to get started:

+
+
+ +
+

1. Upload your file

+

Click "Files" in the left-hand sidebar, and upload the sample data you want to import into Flatfile. You can do this by clicking "Add files" or dragging and dropping the file onto the page.

+
+ +
+

2. Import the Benefit Elections Data

+

Click "Import" and select the benefit elections data. Follow the mapping instructions in Flatfile to complete the import. Once the data has been mapped, it will be loaded into Flatfile's table UI, where validations and transformations have been applied.

+
+ +
+

3. Validate and Transform Data

+

Make sure to verify that your data is correctly formatted and transformed by Flatfile. Flatfile will handle formatting dates, rounding amounts, and validating the existence of employees and benefit plans for you! If there are any issues or errors, you can easily address them within Flatfile's user interface.

+
+ +
+

4. Load Data into HCM.Show

+

Once the data has been validated and transformed, use the “Push records to HCM.show” button to load data into the HCM.Show application.

+
+ +
+

5. Return to HCM.Show

+

Once you have loaded the data from Flatfile to HCM Show, return to HCM.Show and navigate to the Data Templates section within the application to view the benefit elections data that you have just loaded.

+
+ + +
+ +
+
+

Flatfile features covered:

+
+
+ +
+
+ +

Event-based workflow

+
+ +
+ +

Plug-in functionality

+
+ +
+ +

Custom actions

+
+ +
+ +

External API Calls

+
+ +
+ +

Custom Theming

+
+ +
+ +

Data Hooks

+
+ +
+ +
+

View the code for this workflow on Github

+ View on Github + + + + + + + + + + + +
+ +
+ + + +

Remember, if you need any assistance, you can always refer back to this page by clicking "Welcome" in the left-hand sidebar!

+
+ + +
+ + +
+ + `, +}; diff --git a/lib/dynamic/theme.ts b/lib/dynamic/theme.ts new file mode 100644 index 0000000..00bf894 --- /dev/null +++ b/lib/dynamic/theme.ts @@ -0,0 +1,66 @@ +export const theme = { + root: { + primaryColor: "#3A7CB9", + warningColor: "#FF9800", + }, + sidebar: { + logo: `https://images.ctfassets.net/e8fqfbar73se/4c9ouGKgET1qfA4uxp4qLZ/e3f1a8b31be67a798c1e49880581fd3d/white-logo-w-padding.png`, + textColor: "#FFFFFF", + titleColor: "#FFFFFF", + focusBgColor: "#71a3d2", + focusTextColor: "#FFFFFF", + backgroundColor: "#3A7CB9", + footerTextColor: "#FFFFFF", + textUltralightColor: "#FF0000", + }, + table: { + inputs: { + radio: { + color: "rgb(8 117 225)", + }, + checkbox: { + color: "rgb(8 117 225)", + }, + }, + filters: { + color: "#808080", + active: { + backgroundColor: "rgb(8 117 225)", + }, + error: { + activeBackgroundColor: "#FA8072", + }, + }, + column: { + header: { + fontSize: "12px", + backgroundColor: "rgb(240 240 240)", + color: "#678090", + dragHandle: { + idle: "rgb(8 117 225)", + dragging: "#0000FF", + }, + }, + }, + fontFamily: "Arial", + indexColumn: { + backgroundColor: "rgb(240 240 240)", + selected: { + color: "rgb(240 240 240)", + backgroundColor: "rgb(200 200 200)", + }, + }, + cell: { + selected: { + backgroundColor: "rgb(235 245 255)", + }, + active: { + borderColor: "rgb(8 117 225)", + spinnerColor: "#808080", + }, + }, + loading: { + color: "rgb(240 240 240)", + }, + }, +}; From da8846afcd45c828f448c023802ade8663c1f059 Mon Sep 17 00:00:00 2001 From: Gaelyn Cooper Date: Mon, 15 Apr 2024 15:37:16 -0600 Subject: [PATCH 2/9] Move theme and doc to configureSpace --- app/(authenticated)/dynamic-portal/workspace.tsx | 9 ++------- lib/dynamic/space-configure.ts | 7 ++++--- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/app/(authenticated)/dynamic-portal/workspace.tsx b/app/(authenticated)/dynamic-portal/workspace.tsx index 97d1e9e..bc248f2 100644 --- a/app/(authenticated)/dynamic-portal/workspace.tsx +++ b/app/(authenticated)/dynamic-portal/workspace.tsx @@ -17,8 +17,6 @@ import dynamic from "next/dynamic"; import { type ISpace } from "@flatfile/react"; import { SheetConfig } from "@flatfile/api/api"; import { listener } from "@/lib/dynamic/listener"; -import { theme } from "@/lib/dynamic/theme"; -import { document } from "@/lib/dynamic/document"; const DynamicEmbeddedSpace = dynamic( () => import("@/components/shared/embedded-space"), @@ -93,9 +91,9 @@ export default function Workspace({ publishableKey: process.env.NEXT_PUBLIC_FLATFILE_PUBLISHABLE_KEY, environmentId: process.env.NEXT_PUBLIC_FLATFILE_ENVIRONMENT_ID, name: "Dynamic Portal", - themeConfig: theme, + // themeConfig: theme("#71a3d2", "#3A7CB9"), listener, - document, + // document, workbook: generateConfig({ sheet, customFieldConfig, @@ -104,9 +102,6 @@ export default function Workspace({ // userId, }, sidebarConfig: { - defaultPage: { - documentId: "document", - }, showDataChecklist: false, showSidebar: true, }, diff --git a/lib/dynamic/space-configure.ts b/lib/dynamic/space-configure.ts index 5747f48..fedac6b 100644 --- a/lib/dynamic/space-configure.ts +++ b/lib/dynamic/space-configure.ts @@ -1,17 +1,18 @@ import { configureSpace } from "@flatfile/plugin-space-configure"; import { blueprint } from "@/lib/dynamic/blueprint"; import { FlatfileListener } from "@flatfile/listener"; +import { theme } from "@/lib/dynamic/theme"; +import { document } from "@/lib/dynamic/document"; export function spaceConfigure(listener: FlatfileListener) { listener.use( configureSpace({ space: { metadata: { - theme: { - // add theme here - }, + theme, }, }, + documents: [document], workbooks: [ { name: "Field Services Import", From 83a5cc703f07fcb8328ec205318d35e5d9403b22 Mon Sep 17 00:00:00 2001 From: Gaelyn Cooper Date: Mon, 15 Apr 2024 16:03:20 -0600 Subject: [PATCH 3/9] Remove default page --- app/(authenticated)/dynamic-portal/workspace.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/(authenticated)/dynamic-portal/workspace.tsx b/app/(authenticated)/dynamic-portal/workspace.tsx index 97d1e9e..28f094c 100644 --- a/app/(authenticated)/dynamic-portal/workspace.tsx +++ b/app/(authenticated)/dynamic-portal/workspace.tsx @@ -104,9 +104,6 @@ export default function Workspace({ // userId, }, sidebarConfig: { - defaultPage: { - documentId: "document", - }, showDataChecklist: false, showSidebar: true, }, From 9c5cd7939180bb44b05ee04f11c85abc0df8b024 Mon Sep 17 00:00:00 2001 From: Gaelyn Cooper Date: Mon, 15 Apr 2024 16:08:00 -0600 Subject: [PATCH 4/9] Wrong spot --- lib/dynamic/space-configure.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/lib/dynamic/space-configure.ts b/lib/dynamic/space-configure.ts index fedac6b..eacc972 100644 --- a/lib/dynamic/space-configure.ts +++ b/lib/dynamic/space-configure.ts @@ -1,18 +1,15 @@ import { configureSpace } from "@flatfile/plugin-space-configure"; import { blueprint } from "@/lib/dynamic/blueprint"; import { FlatfileListener } from "@flatfile/listener"; -import { theme } from "@/lib/dynamic/theme"; -import { document } from "@/lib/dynamic/document"; export function spaceConfigure(listener: FlatfileListener) { listener.use( configureSpace({ space: { metadata: { - theme, + // add theme here }, }, - documents: [document], workbooks: [ { name: "Field Services Import", From 1a7561ddfb2ad0f67b012ec632e009d2c8b40e32 Mon Sep 17 00:00:00 2001 From: Gaelyn Cooper Date: Mon, 15 Apr 2024 16:08:48 -0600 Subject: [PATCH 5/9] Right spot --- app/(authenticated)/dynamic-portal/workspace.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/(authenticated)/dynamic-portal/workspace.tsx b/app/(authenticated)/dynamic-portal/workspace.tsx index bc248f2..28f094c 100644 --- a/app/(authenticated)/dynamic-portal/workspace.tsx +++ b/app/(authenticated)/dynamic-portal/workspace.tsx @@ -17,6 +17,8 @@ import dynamic from "next/dynamic"; import { type ISpace } from "@flatfile/react"; import { SheetConfig } from "@flatfile/api/api"; import { listener } from "@/lib/dynamic/listener"; +import { theme } from "@/lib/dynamic/theme"; +import { document } from "@/lib/dynamic/document"; const DynamicEmbeddedSpace = dynamic( () => import("@/components/shared/embedded-space"), @@ -91,9 +93,9 @@ export default function Workspace({ publishableKey: process.env.NEXT_PUBLIC_FLATFILE_PUBLISHABLE_KEY, environmentId: process.env.NEXT_PUBLIC_FLATFILE_ENVIRONMENT_ID, name: "Dynamic Portal", - // themeConfig: theme("#71a3d2", "#3A7CB9"), + themeConfig: theme, listener, - // document, + document, workbook: generateConfig({ sheet, customFieldConfig, From fc12963508386b314745cfc47cee71d95e3f70c3 Mon Sep 17 00:00:00 2001 From: Gaelyn Cooper Date: Mon, 15 Apr 2024 16:09:39 -0600 Subject: [PATCH 6/9] get rid of diff --- lib/dynamic/space-configure.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/dynamic/space-configure.ts b/lib/dynamic/space-configure.ts index eacc972..4acb5f9 100644 --- a/lib/dynamic/space-configure.ts +++ b/lib/dynamic/space-configure.ts @@ -6,9 +6,7 @@ export function spaceConfigure(listener: FlatfileListener) { listener.use( configureSpace({ space: { - metadata: { - // add theme here - }, + // add theme here }, workbooks: [ { From d6c6e97554aae4d9e9b04c6cc7c7b8daf54af709 Mon Sep 17 00:00:00 2001 From: Gaelyn Cooper Date: Mon, 15 Apr 2024 16:10:32 -0600 Subject: [PATCH 7/9] Fix --- lib/dynamic/space-configure.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/dynamic/space-configure.ts b/lib/dynamic/space-configure.ts index 4acb5f9..5747f48 100644 --- a/lib/dynamic/space-configure.ts +++ b/lib/dynamic/space-configure.ts @@ -6,7 +6,11 @@ export function spaceConfigure(listener: FlatfileListener) { listener.use( configureSpace({ space: { - // add theme here + metadata: { + theme: { + // add theme here + }, + }, }, workbooks: [ { From 948839a3a7abf05610bd9bb78e7bbf46798e83a9 Mon Sep 17 00:00:00 2001 From: Gaelyn Cooper Date: Tue, 16 Apr 2024 17:25:09 -0600 Subject: [PATCH 8/9] Switch HCM for PLM --- lib/dynamic/document.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/dynamic/document.ts b/lib/dynamic/document.ts index c859d70..6182728 100644 --- a/lib/dynamic/document.ts +++ b/lib/dynamic/document.ts @@ -67,7 +67,7 @@ export const document = {

Welcome!

-

We're excited to help you import your data to HCM Show.

+

We're excited to help you import your data to PLM Show.

@@ -91,13 +91,13 @@ export const document = {
-

4. Load Data into HCM.Show

-

Once the data has been validated and transformed, use the “Push records to HCM.show” button to load data into the HCM.Show application.

+

4. Load Data into PLM.Show

+

Once the data has been validated and transformed, use the “Push records to PLM.show” button to load data into the PLM.Show application.

-

5. Return to HCM.Show

-

Once you have loaded the data from Flatfile to HCM Show, return to HCM.Show and navigate to the Data Templates section within the application to view the benefit elections data that you have just loaded.

+

5. Return to PLM.Show

+

Once you have loaded the data from Flatfile to PLM Show, return to PLM.Show and navigate to the Data Templates section within the application to view the benefit elections data that you have just loaded.

@@ -144,7 +144,7 @@ export const document = {
-

2. Import the Benefit Elections Data

-

Click "Import" and select the benefit elections data. Follow the mapping instructions in Flatfile to complete the import. Once the data has been mapped, it will be loaded into Flatfile's table UI, where validations and transformations have been applied.

+

2. Import the Products Data

+

Click "Import" and select the products data. Follow the mapping instructions in Flatfile to complete the import. Once the data has been mapped, it will be loaded into Flatfile's table UI, where validations and transformations have been applied.

3. Validate and Transform Data

-

Make sure to verify that your data is correctly formatted and transformed by Flatfile. Flatfile will handle formatting dates, rounding amounts, and validating the existence of employees and benefit plans for you! If there are any issues or errors, you can easily address them within Flatfile's user interface.

+

Make sure to verify that your data is correctly formatted and transformed by Flatfile. Flatfile will handle formatting dates, rounding amounts, and validating the existence of products for you! If there are any issues or errors, you can easily address them within Flatfile's user interface.

@@ -97,7 +97,7 @@ export const document = {

5. Return to PLM.Show

-

Once you have loaded the data from Flatfile to PLM Show, return to PLM.Show and navigate to the Data Templates section within the application to view the benefit elections data that you have just loaded.

+

Once you have loaded the data from Flatfile to PLM Show, return to PLM.Show and navigate to the Data Templates section within the application to view the products data that you have just loaded.