├── CSS Grid ├── CSS Grid.fmp12 └── README.md ├── ChatFMP ├── ChatFMP.fmp12 └── README.md ├── Choropleth Map ├── Choropleth Map.fmp12 └── README.md ├── CodeMirror ├── CodeMirror.fmp12 └── README.md ├── LICENSE ├── NoteGraph ├── NoteGraph.fmp12 └── README.md ├── OllamaChat ├── OllamaChat.fmp12 └── README.md ├── README.md ├── Radar Address API ├── README.md └── Radar Address API.fmp12 ├── SortableFMP ├── README.md └── SortableFMP.fmp12 └── Web Viewer Copilot ├── README.md └── Web Viewer Copilot.fmp12 /CSS Grid/CSS Grid.fmp12: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GreenFluxLLC/FileMaker-Experiments/f27edfc800a829b78b0694e21391151168cebe79/CSS Grid/CSS Grid.fmp12 -------------------------------------------------------------------------------- /CSS Grid/README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid - Mobile Responsive Grid Layout 2 | ![2024-08-24 08 38 31](https://github.com/user-attachments/assets/44d513b9-b603-4c54-8a59-bf8767748533) 3 | 4 | See tutorial here: 5 | [Building a Mobile Responsive Grid Layout in FileMaker Pro](https://blog.greenflux.us/building-a-mobile-responsive-grid-layout-in-filemaker-pro?showSharer=true) 6 | -------------------------------------------------------------------------------- /ChatFMP/ChatFMP.fmp12: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GreenFluxLLC/FileMaker-Experiments/f27edfc800a829b78b0694e21391151168cebe79/ChatFMP/ChatFMP.fmp12 -------------------------------------------------------------------------------- /ChatFMP/README.md: -------------------------------------------------------------------------------- 1 | # ChatFMP: OpenAI Assistant API Integration 2 | ChatGPT style interface, and scripts for integrating with the OpenAI Assistant API to build your own chat app. 3 | ![ChatFMP](https://github.com/user-attachments/assets/cf168ea5-7345-458b-abde-df3770a27552) 4 | -------------------------------------------------------------------------------- /Choropleth Map/Choropleth Map.fmp12: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GreenFluxLLC/FileMaker-Experiments/f27edfc800a829b78b0694e21391151168cebe79/Choropleth Map/Choropleth Map.fmp12 -------------------------------------------------------------------------------- /Choropleth Map/README.md: -------------------------------------------------------------------------------- 1 | # Choropleth Map 2 | Choropleth maps are similar to heat maps, but with regions defined by geometry, rather than a grid. This demo uses Leaflet.JS to build a Choropleth map that's driven from FileMaker data. 3 | ![2024-09-07 10 29 27](https://github.com/user-attachments/assets/bc874d7f-ffd3-4a09-a800-ffa95f2badf6) 4 | 5 | Updating the Density value for a State will instantly reflect on the map. To connect your data, just relate it to the State table by the State Name and change the Density field to be a summary calc based on your other table. 6 | 7 | 8 | See the video demo and walkthrough here: 9 | [FileMaker Choropleth Map Using LeafletJS In a Web Viewer](https://www.youtube.com/watch?v=Op6UZmh-20g) 10 | -------------------------------------------------------------------------------- /CodeMirror/CodeMirror.fmp12: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GreenFluxLLC/FileMaker-Experiments/f27edfc800a829b78b0694e21391151168cebe79/CodeMirror/CodeMirror.fmp12 -------------------------------------------------------------------------------- /CodeMirror/README.md: -------------------------------------------------------------------------------- 1 | # CodeMirror Code Editor 2 | A Web Viewer for Building Web Viewers 3 | ![codemirror](https://github.com/user-attachments/assets/70549d40-084c-4ed5-b272-77d86fa7e128) 4 | 5 | See demo at: 6 | [Why I Built A Code Editor Inside FileMaker Pro](https://blog.greenflux.us/why-i-built-a-code-editor-inside-filemaker-pro) 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /NoteGraph/NoteGraph.fmp12: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GreenFluxLLC/FileMaker-Experiments/f27edfc800a829b78b0694e21391151168cebe79/NoteGraph/NoteGraph.fmp12 -------------------------------------------------------------------------------- /NoteGraph/README.md: -------------------------------------------------------------------------------- 1 | # Markdown Editor and Knowledge Graph Notes App with Vis.js in FileMaker Pro 2 | ## A Star Trek Themed Editor Inspired by Obsidian 3 | ![NoteGraph](https://github.com/user-attachments/assets/b579ce47-5979-430e-9df1-0475dd529e35) 4 | 5 | Markdwown editor using Marked.js and Prism.js for syntax highlighting, with network graph view using Vis.js. 6 | 7 | Tutorial at: https://blog.greenflux.us/markdown-editor-and-knowledge-graph-notes-app-with-visjs-in-filemaker-pro 8 | -------------------------------------------------------------------------------- /OllamaChat/OllamaChat.fmp12: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GreenFluxLLC/FileMaker-Experiments/f27edfc800a829b78b0694e21391151168cebe79/OllamaChat/OllamaChat.fmp12 -------------------------------------------------------------------------------- /OllamaChat/README.md: -------------------------------------------------------------------------------- 1 | # OllamaChat - Image-to-Text Chat with Llama3.2-vision 2 | Requires Ollama running locally 3 | ![svg xmlns=httpwww w3 org2000svg width=24 height=24 viewBox=0 0 24 24path fill=white d=M12 11q3 75 0 6 375-1 175T21 7t-2 625-2 825T12 3T5 625 4 175T3 7t2 625 2 825T12 11m0 2 5q1 025 0 2 563- 213t2](https://github.com/user-attachments/assets/abf841cb-e788-471b-8d4b-a2c70bd30746) 4 | 5 | 6 | This app connects to a local Llama3.2-vision model for image-to-text generation from a container field. 7 | 8 | Tutorial: [FileMaker Image-to-Text with Llama3.2-vision 9 | ](https://blog.greenflux.us/filemaker-image-to-text-with-llama32-vision?showSharer=true) 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FileMaker-Experiments by GreenFlux 2 | ### Collection of FileMaker Pro sample apps focused on API integrations & Web Viewers 3 | ![youtube bg short](https://github.com/user-attachments/assets/da3cb064-8ed4-40d8-baeb-1d23105c37bf) 4 | 5 | ### About 6 | These are 'proof of concept' apps to demonstrate various technique and integrations FileMaker. 7 | 8 | - [Radar Address API](Radar%20Address%20API/): Address Validation & Auto-Complete w/ Radar.com API 9 | - [ChatFMP](ChatFMP/): Chat Interface & Script for OpenAI Assistant 10 | - [SortableFMP](SortableFMP/): Drag & Drop Sortable List using SortableJS 11 | - [CSS Grid](CSS%20Grid): Mobile Responsive Grid Layout with Click Events 12 | - [Choropleth Map](Choropleth%20Map): Heatmap of US States using LeafletJS 13 | - [CodeMirror](CodeMirror): Code Editor for building web viewers, using CodeMirrorJS 14 | - [OllamaChat](OllamaChat): Image-to-Text GenAI Chat using Llama3.2-vision 15 | - [Web Viewer Copilot](Web%20Viewer%20Copilot): Generate Custom UI Components With Plain Text Prompts 16 | - [NoteGraph](NoteGraph): Markdown Editor and Knowledge Graph Notes App 17 | - **LOTS MORE COMING SOON!** ⭐️ Star repo for updates! ☝️ 18 | 19 | ## Other Content 20 | Check out my other FileMaker content below: 21 | - [LOW CODE DEVS - Daily.dev](https://app.daily.dev/squads/lowcodedevs) 22 | - [FileMaker Subreddit](https://www.reddit.com/r/FileMaker/search/?q=author%3AHomeBrewDude&restrict_sr=1) 23 | - [GreenFlux Blog](https://blog.greenflux.us/) 24 | - [Appsmith Community Portal](https://community.appsmith.com/tag/filemaker) 25 | ### Contributing 26 | Although this repo is meant to be part of my personal developer portfolio, others can still contribute by: 27 | - suggesting new API integrations or web viewer challenges 28 | - raising issues for any bugs in existing demo apps 29 | 30 | -------------------------------------------------------------------------------- /Radar Address API/README.md: -------------------------------------------------------------------------------- 1 | # Radar Address API 2 | Address validation and auto-complete using the Radar.com API 3 | ![2024-08-22 11 56 13](https://github.com/user-attachments/assets/a5ff3960-f79e-493e-8959-367988203d8b) 4 | 5 | Watch the demo video on YouTube: 6 | https://youtu.be/TBmXXJc5OrI 7 | -------------------------------------------------------------------------------- /Radar Address API/Radar Address API.fmp12: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GreenFluxLLC/FileMaker-Experiments/f27edfc800a829b78b0694e21391151168cebe79/Radar Address API/Radar Address API.fmp12 -------------------------------------------------------------------------------- /SortableFMP/README.md: -------------------------------------------------------------------------------- 1 | # SortableFMP: Drag & Drop Reorderable List 2 | Built using SortableJS in a web viewer. Dragging a row will update the `order` column for all affected rows. 3 | ![2024-08-19 07 47 42](https://github.com/user-attachments/assets/79f80001-6671-49f8-8c3b-fd2dfe7368cd) 4 | -------------------------------------------------------------------------------- /SortableFMP/SortableFMP.fmp12: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GreenFluxLLC/FileMaker-Experiments/f27edfc800a829b78b0694e21391151168cebe79/SortableFMP/SortableFMP.fmp12 -------------------------------------------------------------------------------- /Web Viewer Copilot/README.md: -------------------------------------------------------------------------------- 1 | # Web Viewer Copilot 2 | FileMaker Web Viewer Copilot with OpenAI Assistant and CodeMirror.js 3 | 4 | ![VW GPT](https://github.com/user-attachments/assets/c05593f0-89e5-41ad-b561-e805e5f50f6f) 5 | 6 | Web viewers in FileMaker Pro are a great way to extend the platform and create new UI components that would otherwise be impossible. The results can be extremely powerful, but working with web viewers and writing the code in FileMaker Pro can be a huge pain, due to the lack of a proper code editor with formatting and syntax highlighting. That’s what led me to build this CodeMirror Web Viewer app last year, to simplify the process of writing and testing web viewer code. This app makes developing new web viewers much easier, by eliminating the need to copy/paste code into a separate code editor. However, I still found myself copy/pasting code in chatGPT for more advanced solutions. 7 | 8 | So I decided to take this a step further, and integrate the CodeMirror app with the ChatFMP app I made for integrating with an OpenAI Assistant. This enables you to describe the web viewer you want in plain English, and the assistant will return the code and generate a new UI component with a single prompt. 9 | ![WVGPT GIF (1)](https://github.com/user-attachments/assets/c8cbb532-bc66-4ef0-963b-94e3932967f6) 10 | 11 | 12 | Full Tutorial at: 13 | https://blog.greenflux.us/filemaker-web-viewer-copilot-with-openai-assistant-and-codemirrorjs 14 | 15 | -------------------------------------------------------------------------------- /Web Viewer Copilot/Web Viewer Copilot.fmp12: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GreenFluxLLC/FileMaker-Experiments/f27edfc800a829b78b0694e21391151168cebe79/Web Viewer Copilot/Web Viewer Copilot.fmp12 --------------------------------------------------------------------------------