Form Report Viewer - Setup Guide

dotnet new webapi -n FormReportAPI
cd FormReportAPI

# Syncfusion packages
dotnet add package Syncfusion.ReportWriter.Net.Core --version 24.1.41
dotnet add package Syncfusion.Compression.Net.Core --version 24.1.41
dotnet add package Syncfusion.DocIO.Net.Core --version 24.1.41
dotnet add package Syncfusion.XlsIO.Net.Core --version 24.1.41
dotnet add package Syncfusion.Pdf.Net.Core --version 24.1.41

# Other dependencies
dotnet add package Newtonsoft.Json
dotnet add package Microsoft.AspNetCore.Cors

FormReportAPI/
├── Controllers/
│   └── FormReportController.cs
├── Services/
│   ├── IFormReportService.cs
│   └── FormReportService.cs
├── Models/
│   └── FormDataTransformer.cs
├── Reports/
│   └── DynamicFormReport.rdlc
├── Program.cs
└── appsettings.json

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY_HERE");

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "CorsSettings": {
    "AllowedOrigins": ["http://localhost:3000", "https://localhost:3000"]
  }
}

npx create-react-app form-report-viewer --template typescript
cd form-report-viewer

npm install lucide-react
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

static baseUrl = 'https://localhost:5001/api/FormReport'; // Your API URL

import FormReportViewer from './components/FormReportViewer';

function App() {
  const formStructure = `{
    "Entity": {
      "FormStructure": {
        "title": "Sample Form",
        "pages": [...]
      }
    }
  }`;

  const formData = `{
    "Entity": {
      "Location": "Test Location",
      "Status": "Completed"
    }
  }`;

  return (
    <div className="App">
      <FormReportViewer 
        formStructureJson={formStructure}
        formDataJson={formData}
      />
    </div>
  );
}

import { ReportService } from './services/ReportService';

const handleExport = async () => {
  try {
    const blob = await ReportService.exportReport(
      formStructureJson, 
      formDataJson, 
      'pdf'
    );
    
    // Download file
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'report.pdf';
    link.click();
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error('Export failed:', error);
  }
};

// In your React component
const [reports, setReports] = useState([]);

useEffect(() => {
  const fetchReports = async () => {
    try {
      const response = await fetch('/api/forms');
      const forms = await response.json();
      setReports(forms);
    } catch (error) {
      console.error('Failed to fetch forms:', error);
    }
  };

  fetchReports();
}, []);

{
  "formStructureJson": "...",
  "formDataJson": "..."
}

{
  "formStructureJson": "...",
  "formDataJson": "...",
  "exportFormat": "pdf|excel|word|csv"
}

{
  "formStructureJson": "...",
  "formDataJson": "...",
  "exportFormat": "pdf"
}

cd FormReportAPI
dotnet run

cd form-report-viewer
npm start

public class CustomFormDataTransformer : FormDataTransformer
{
    public override RdlcReportData TransformFormData(string formJson, string dataJson)
    {
        var result = base.TransformFormData(formJson, dataJson);
        // Add custom transformations
        return result;
    }
}

public async Task<byte[]> ExportToCustomFormat(string formStructure, string formData)
{
    // Custom export logic
}

{
  "Logging": {
    "LogLevel": {
      "Default": "Debug",
      "Microsoft": "Information"
    }
  }
}