@khester/create-dynamics-app 1.0.8 → 1.1.0

package/templates/dynamics-365-starter/src/pcf/ContactControlWrapper.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { ContactManagement } from '../components/ContactManagement';
 import { DynamicsProvider } from '../providers/DynamicsProvider';
+import { ServiceFactory } from '../services/ServiceFactory';
+import { Logger } from '../components/Logging/logger';
 
 interface PCFContextType {
   // Define PCF context properties based on your needs
@@ -17,32 +19,83 @@ interface ContactControlWrapperProps {
  * Wrapper component for integrating ContactManagement with PCF (PowerApps Component Framework)
  * This allows the component to be used as a custom control in Dynamics 365 forms and views
  */
-export const ContactControlWrapper: React.FC<ContactControlWrapperProps> = ({ context }) => {
+export const ContactControlWrapper: React.FC<ContactControlWrapperProps> = ({
+  context,
+}) => {
   // Extract configuration from PCF context
   const baseUrl = context.parameters?.baseUrl?.raw || '';
-  
-  // Create a custom API service that uses PCF's webAPI
-  const createPCFApiService = () => ({
-    createRecord: async (entityName: string, data: any) => {
-      return await context.webAPI.createRecord(entityName, data);
-    },
-    retrieveRecord: async (entityName: string, id: string, select?: string) => {
-      return await context.webAPI.retrieveRecord(entityName, id, select);
-    },
-    updateRecord: async (entityName: string, id: string, data: any) => {
-      return await context.webAPI.updateRecord(entityName, id, data);
-    },
-    deleteRecord: async (entityName: string, id: string) => {
-      return await context.webAPI.deleteRecord(entityName, id);
-    },
-    retrieveMultiple: async (entityName: string, query?: string) => {
-      const fetchXml = query || `<fetch><entity name="${entityName}"/></fetch>`;
-      return await context.webAPI.retrieveMultipleRecords(entityName, `?fetchXml=${encodeURIComponent(fetchXml)}`);
+
+  // Create API service using ServiceFactory for environment detection
+  const createPCFApiService = () => {
+    try {
+      // Check if we're in PCF context with webAPI available
+      if (context.webAPI) {
+        Logger.log(
+          'PCF WebAPI available, creating custom PCF API service',
+          'ContactControlWrapper'
+        );
+
+        // Create a custom API service that uses PCF's webAPI
+        return {
+          createRecord: async (entityName: string, data: any) => {
+            return await context.webAPI.createRecord(entityName, data);
+          },
+          retrieveRecord: async (
+            entityName: string,
+            id: string,
+            select?: string
+          ) => {
+            return await context.webAPI.retrieveRecord(entityName, id, select);
+          },
+          updateRecord: async (entityName: string, id: string, data: any) => {
+            return await context.webAPI.updateRecord(entityName, id, data);
+          },
+          deleteRecord: async (entityName: string, id: string) => {
+            return await context.webAPI.deleteRecord(entityName, id);
+          },
+          retrieveMultipleRecords: async (
+            entityName: string,
+            fetchXml: string
+          ) => {
+            return await context.webAPI.retrieveMultipleRecords(
+              entityName,
+              `?fetchXml=${encodeURIComponent(fetchXml)}`
+            );
+          },
+          executeRequest: async (requestName: string, _requestData: any) => {
+            Logger.log(
+              `Executing request: ${requestName}`,
+              'ContactControlWrapper.executeRequest'
+            );
+            throw new Error('Custom requests not supported in PCF WebAPI');
+          },
+          uploadFile: async (_file: File) => {
+            Logger.log(
+              'File upload requested',
+              'ContactControlWrapper.uploadFile'
+            );
+            throw new Error('File upload not supported in PCF WebAPI');
+          },
+        };
+      }
+
+      // Fallback to ServiceFactory for environment detection
+      const xrmGlobal = ServiceFactory.isDynamics365Context()
+        ? (window as any).Xrm
+        : undefined;
+      return ServiceFactory.createApiService(xrmGlobal);
+    } catch (error) {
+      Logger.error(
+        'Failed to create API service in PCF context',
+        'ContactControlWrapper',
+        error
+      );
+      throw error;
     }
-  });
+  };
 
   return (
-    <DynamicsProvider baseUrl={baseUrl}>
+    <DynamicsProvider customApiService={createPCFApiService()}>
       <div style={{ width: '100%', height: '100%' }}>
         <ContactManagement />
       </div>
@@ -51,4 +104,4 @@ export const ContactControlWrapper: React.FC<ContactControlWrapperProps> = ({ co
 };
 
 // Export for PCF integration
-export default ContactControlWrapper;
+export default ContactControlWrapper;

package/templates/dynamics-365-starter/src/pcf/MultiEntityControlWrapper.tsx

@@ -0,0 +1,205 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Pivot, DynamicsPivotItemProps } from '@khester/dynamics-ui-components';
+import { ContactManagement } from '../components/ContactManagement';
+import { AccountManagement } from '../components/AccountManagement';
+import { DynamicsProvider } from '../providers/DynamicsProvider';
+import { ServiceFactory } from '../services/ServiceFactory';
+import { Logger } from '../components/Logging/logger';
+
+interface PCFContextType {
+  // Define PCF context properties based on your needs
+  webAPI: any;
+  utils: any;
+  parameters: any;
+}
+
+interface MultiEntityControlWrapperProps {
+  context: PCFContextType;
+  defaultEntity?: 'contact' | 'account';
+  showTabs?: boolean;
+}
+
+/**
+ * Multi-entity wrapper component for integrating both ContactManagement and AccountManagement
+ * with PCF (PowerApps Component Framework). This allows switching between entity management
+ * within a single custom control in Dynamics 365.
+ */
+export const MultiEntityControlWrapper: React.FC<
+  MultiEntityControlWrapperProps
+> = ({ context, defaultEntity = 'contact', showTabs = true }) => {
+  const [selectedEntity, setSelectedEntity] = useState<'contact' | 'account'>(
+    defaultEntity
+  );
+
+  // Extract configuration from PCF context
+  const baseUrl = context.parameters?.baseUrl?.raw || '';
+
+  useEffect(() => {
+    Logger.userAction(
+      'MultiEntityControlWrapper initialized',
+      { defaultEntity, showTabs, selectedEntity },
+      'MultiEntityControlWrapper'
+    );
+  }, [defaultEntity, showTabs, selectedEntity]);
+
+  // Create API service using ServiceFactory for environment detection
+  const createPCFApiService = () => {
+    try {
+      // Check if we're in PCF context with webAPI available
+      if (context.webAPI) {
+        Logger.log(
+          'PCF WebAPI available, creating custom PCF API service',
+          'MultiEntityControlWrapper'
+        );
+
+        // Create a custom API service that uses PCF's webAPI
+        return {
+          createRecord: async (entityName: string, data: any) => {
+            Logger.debug(
+              `Creating ${entityName} record`,
+              'MultiEntityControlWrapper.createRecord',
+              data
+            );
+            return await context.webAPI.createRecord(entityName, data);
+          },
+          retrieveRecord: async (
+            entityName: string,
+            id: string,
+            select?: string
+          ) => {
+            Logger.debug(
+              `Retrieving ${entityName} record: ${id}`,
+              'MultiEntityControlWrapper.retrieveRecord'
+            );
+            return await context.webAPI.retrieveRecord(entityName, id, select);
+          },
+          updateRecord: async (entityName: string, id: string, data: any) => {
+            Logger.debug(
+              `Updating ${entityName} record: ${id}`,
+              'MultiEntityControlWrapper.updateRecord',
+              data
+            );
+            return await context.webAPI.updateRecord(entityName, id, data);
+          },
+          deleteRecord: async (entityName: string, id: string) => {
+            Logger.debug(
+              `Deleting ${entityName} record: ${id}`,
+              'MultiEntityControlWrapper.deleteRecord'
+            );
+            return await context.webAPI.deleteRecord(entityName, id);
+          },
+          retrieveMultipleRecords: async (
+            entityName: string,
+            fetchXml: string
+          ) => {
+            Logger.debug(
+              `Retrieving multiple ${entityName} records`,
+              'MultiEntityControlWrapper.retrieveMultipleRecords'
+            );
+            return await context.webAPI.retrieveMultipleRecords(
+              entityName,
+              `?fetchXml=${encodeURIComponent(fetchXml)}`
+            );
+          },
+          executeRequest: async (requestName: string, _requestData: any) => {
+            Logger.log(
+              `Executing request: ${requestName}`,
+              'MultiEntityControlWrapper.executeRequest'
+            );
+            throw new Error('Custom requests not supported in PCF WebAPI');
+          },
+          uploadFile: async (_file: File) => {
+            Logger.log(
+              'File upload requested',
+              'MultiEntityControlWrapper.uploadFile'
+            );
+            throw new Error('File upload not supported in PCF WebAPI');
+          },
+        };
+      }
+
+      // Fallback to ServiceFactory for environment detection
+      const xrmGlobal = ServiceFactory.isDynamics365Context()
+        ? (window as any).Xrm
+        : undefined;
+      return ServiceFactory.createApiService(xrmGlobal);
+    } catch (error) {
+      Logger.error(
+        'Failed to create API service in PCF context',
+        'MultiEntityControlWrapper',
+        error
+      );
+      throw error;
+    }
+  };
+
+  const handleEntityChange = useCallback(
+    (item: DynamicsPivotItemProps) => {
+      const newEntity = item.itemKey as 'contact' | 'account';
+      Logger.userAction(
+        'Entity tab changed',
+        { from: selectedEntity, to: newEntity },
+        'MultiEntityControlWrapper.handleEntityChange'
+      );
+      setSelectedEntity(newEntity);
+    },
+    [selectedEntity]
+  );
+
+  const renderEntityManagement = () => {
+    switch (selectedEntity) {
+      case 'contact':
+        return <ContactManagement />;
+      case 'account':
+        return <AccountManagement />;
+      default:
+        return <ContactManagement />;
+    }
+  };
+
+  const containerStyle: React.CSSProperties = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  const contentStyle: React.CSSProperties = {
+    flex: 1,
+    overflow: 'auto',
+  };
+
+  return (
+    <DynamicsProvider customApiService={createPCFApiService()}>
+      <div style={containerStyle}>
+        {showTabs ? (
+          <>
+            <Pivot
+              items={[
+                {
+                  headerText: 'Contacts',
+                  itemKey: 'contact',
+                  itemIcon: 'Contact',
+                },
+                {
+                  headerText: 'Accounts',
+                  itemKey: 'account',
+                  itemIcon: 'Building',
+                },
+              ]}
+              selectedKey={selectedEntity}
+              onItemClick={handleEntityChange}
+              linkFormat="tabs"
+            />
+            <div style={contentStyle}>{renderEntityManagement()}</div>
+          </>
+        ) : (
+          <div style={contentStyle}>{renderEntityManagement()}</div>
+        )}
+      </div>
+    </DynamicsProvider>
+  );
+};
+
+// Export for PCF integration
+export default MultiEntityControlWrapper;