Template Angular FM

This project is a generic template for building Angular micro-frontends for Claris FileMaker. It comes pre-configured with:

• Angular 18+ (Zoneless) for high performance.
• Tailwind CSS for modern styling.
• FileMaker Bridge for seamless bidirectional communication.
• Sidebar & Theming: Integrated sidebar and Light/Dark mode.
• Single File Build script to inline assets for Web Viewer compatibility.

Getting Started

1. Install Dependencies

   npm install

2. Run Locally (Dev Mode)

   npm start

   Navigate to http://localhost:4200/. The app detects it is not in FileMaker and uses a mock mode.

⚠️ Configuration & Customization

Before you start coding, configure your app menu:

1. Open src/app/core/config/app.config.ts.
2. Edit the APP_CONFIG object:

   export const APP_CONFIG = {
       appTitle: 'My Custom App',
       menuItems: [
           { label: 'Home', route: '/home', icon: 'house' },
           { label: 'Inventory', route: '/inventory', icon: 'box' }
       ]
   };

   Note: Icons use FontAwesome names (e.g., 'box' becomes 'fa-box').

Deploy to FileMaker (CRITICAL STEP)

This is the most important part of the workflow. To put your app into FileMaker:

1. Run the Build Command:

   npm run build:fm

   This runs the Angular build AND the scripts/inline-build.js that merges everything.

2. Locate the File: Go to dist/template-angular-fm/browser/ and find the file named: index_fm.html

3. Copy & Paste:

   • Open index_fm.html in any text editor (VS Code, Notepad, etc.).
   • Select All (Ctrl+A / Cmd+A).
   • Copy (Ctrl+C / Cmd+C).
   • Paste it into your FileMaker calculation field or Web Viewer source.

Note: Do NOT simply use index.html. It will not work in FileMaker because it has external links (<script src="...">). You MUST use index_fm.html which has everything inlined.

Documentation

Exhaustive documentation is available in the docs/ folder:

• Architecture Overview - Understanding the project structure.
• FileMaker Integration - How to call scripts and handle callbacks.
• Styling Guide - Using Tailwind and CSS variables for theming.
• Create New View - Step-by-step guide to adding new features.