├── .prettierignore ├── .DS_Store ├── .gitignore ├── jsDev.fmp12 ├── widget.config.js ├── src ├── index.js └── style.css ├── .eslintrc.js ├── scripts ├── reload-dev.js ├── start-fm-dev.js ├── upload.js └── generate-script-steps.js ├── index.html ├── .prettierrc.json ├── package.json └── README.md /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | dist 4 | import.log 5 | .parcel-cache -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/integrating-magic/js-dev-environment/HEAD/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | dist 4 | import.log 5 | .parcel-cache 6 | .DS_Store' -------------------------------------------------------------------------------- /jsDev.fmp12: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/integrating-magic/js-dev-environment/HEAD/jsDev.fmp12 -------------------------------------------------------------------------------- /widget.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | widgetName: "jsDev", 3 | server: "$", 4 | file: "jsDev", 5 | uploadScript: "UploadToHTML", 6 | reloadScript: "Load Widget", 7 | startDevScript: "Set to Dev Mode", 8 | }; 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | //The first function. Remove this. 2 | const btn = document.querySelector("button"); 3 | console.log("Hello"); 4 | 5 | btn.onclick = function () { 6 | console.log("You ran some JavaScript"); 7 | alert("You ran some JavaScript"); 8 | }; -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | extends: ["eslint:recommended", "prettier"], 7 | parserOptions: { 8 | ecmaVersion: "latest", 9 | sourceType: "module", 10 | }, 11 | rules: { 12 | "no-var": "warn", 13 | "no-undef": "off", 14 | "no-unused-vars": "warn", 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /scripts/reload-dev.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | const config = require("../widget.config"); 3 | 4 | const { widgetName, reloadScript, file, server } = config; 5 | 6 | const open = require("open"); 7 | const path = require("path"); 8 | 9 | const fileUrl = `fmp://${server}/${file}?script=${reloadScript}`; 10 | 11 | // const thePath = path.join(__dirname, "../", "dist", "index.html"); 12 | // const params = { widgetName, thePath }; 13 | const url = fileUrl; 14 | open(url); 15 | -------------------------------------------------------------------------------- /scripts/start-fm-dev.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | const config = require("../widget.config"); 3 | 4 | const { widgetName, startDevScript, file, server } = config; 5 | 6 | const open = require("open"); 7 | const path = require("path"); 8 | 9 | const fileUrl = `fmp://${server}/${file}?script=${startDevScript}¶m=turnOn`; 10 | 11 | // const thePath = path.join(__dirname, "../", "dist", "index.html"); 12 | // const params = { widgetName, thePath }; 13 | const url = fileUrl; 14 | open(url); 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | JSDev 9 | 10 | 11 |

Alright. You're set.

12 |

Now build something amazing!

13 |

JS in FM is amazing

14 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /scripts/upload.js: -------------------------------------------------------------------------------- 1 | const config = require("../widget.config"); 2 | 3 | const { widgetName, uploadScript, file, server } = config; 4 | 5 | console.log(widgetName, uploadScript, file, server); 6 | const open = require("open"); 7 | const path = require("path"); 8 | 9 | const fileUrl = `fmp://${server}/${file}?script=${uploadScript}¶m=`; 10 | 11 | const thePath = path.join(__dirname, "../", "dist", "index.html"); 12 | const params = { widgetName, thePath }; 13 | const url = fileUrl + encodeURIComponent(JSON.stringify(params)); 14 | open(url); 15 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "endOfLine": "lf", 5 | "htmlWhitespaceSensitivity": "css", 6 | "insertPragma": false, 7 | "jsxBracketSameLine": false, 8 | "jsxSingleQuote": false, 9 | "printWidth": 80, 10 | "proseWrap": "preserve", 11 | "quoteProps": "as-needed", 12 | "requirePragma": false, 13 | "semi": true, 14 | "singleQuote": false, 15 | "tabWidth": 2, 16 | "trailingComma": "es5", 17 | "useTabs": false, 18 | "vueIndentScriptAndStyle": false, 19 | "parser": "babel" 20 | } 21 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-osx-font-smoothing: grayscale; 4 | font-family: 'Arial', sans-serif; 5 | font-size: 16px; 6 | line-height: 1; 7 | color: #000; 8 | background-color: #fff; 9 | margin: 10; 10 | overflow: hidden; 11 | } 12 | 13 | p{ 14 | color:#282828; 15 | font-size: 16px; 16 | } 17 | 18 | 19 | h1 { 20 | background-color:#006690; 21 | color: #fff; 22 | font-size: 22px; 23 | font-weight: 400; 24 | line-height: 1.2; 25 | margin: 0 0 10px; 26 | } 27 | 28 | .tintedBlackLeft { 29 | background-color:#00000033; 30 | color: #fff; 31 | text-transform: uppercase; 32 | font-size: 12px; 33 | font-weight: 400; 34 | line-height: 1.2; 35 | padding:11px 11px 11px 0px; 36 | } 37 | 38 | button { 39 | padding: 5px 9px 5px 9px; 40 | border-radius: 3px; 41 | font-size: 18px; 42 | border: 1px solid #0091CE; 43 | background-color: #0091CE; 44 | color: #fff; 45 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-dev-env", 3 | "version": "2.1.0", 4 | "author": "jeremy@integratingmagic.io", 5 | "license": "MIT", 6 | "description": "a generic development environment for developing JS in FileMaker", 7 | "scripts": { 8 | "start": "parcel index.html --no-source-maps", 9 | "reload": "node ./scripts/reload-dev", 10 | "deploy-to-fm": "npm run build && npm run upload", 11 | "build": "parcel build index.html", 12 | "upload": "node ./scripts/upload", 13 | "generate-script-steps": "node ./scripts/generate-script-steps", 14 | "clear-cache": "rm -rf .parcel-cache dist", 15 | "reset-dev": "npm run clear-cache && npm run start", 16 | "start-fm-dev": "node ./scripts/start-fm-dev", 17 | "open-dev-browser": "open http://localhost:1234" 18 | }, 19 | "browserslist": "> 0.5%, last 2 versions, not dead", 20 | "devDependencies": { 21 | "eslint": "^8.16.0", 22 | "eslint-config-prettier": "^8.5.0", 23 | "open": "^8.2.1", 24 | "parcel": "^2.8.1", 25 | "prettier": "2.6.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JS Dev Kit for FileMaker Developers 2 | 3 | *Develop, Render, and Deploy JavaScript for a FileMaker App* 4 | 5 | # This Kit 6 | ## What it does 7 | This environment allows a FileMaker developer to start coding their widget and see the results right away in a FileMaker file. Once done developing, the can be inlined and pushed to the FileMaker file for use offline. 8 |
9 | It's a template file, so you can use to start other projects. 10 | ## Consists of 11 | - A repository template on Github 12 | - A basic html / JS set up. 13 | - package.json file for install 14 | - A FileMaker file to show the widget rendered 15 | - Scripts to build and upload the inlined code to FileMaker 16 | ## TO GET STARTED Using this file 17 | 1. `npm install` 18 | 2. `npm start` 19 | 3. Open the jsDev.fmp12 file. 20 | 4. Allow it to work in Dev mode. 21 | 22 | At this point you should see the web viewer on the layout load up with the HTML and JavaScript here. Edit the JavaScript or the HTML and you'll see the render in the web viewer update. 23 | 24 | ## Use this kit 25 | Now you're ready to use this kit to create awesome JS widgets. 26 | -------------------------------------------------------------------------------- /scripts/generate-script-steps.js: -------------------------------------------------------------------------------- 1 | const { exec, spawn } = require("child_process"); 2 | 3 | function pbcopy(data) { 4 | const proc = spawn("pbcopy"); 5 | proc.stdin.write(data); 6 | proc.stdin.end(); 7 | } 8 | 9 | function convertClipboardToFM() { 10 | exec( 11 | "osascript -e 'set the clipboard to (do shell script \"pbpaste\" as «class XMSS»)'", 12 | (error) => { 13 | if (error) { 14 | console.error(`exec error: ${error}`); 15 | return; 16 | } 17 | } 18 | ); 19 | } 20 | 21 | const xml = `$callbackName$promiseID$parameterAdd your logic here to set result data to return to the webviewer.$resultChange this to your webviewer name$webviewer

`; 22 | 23 | pbcopy(xml); 24 | console.log("\x1b[34mXML copied to clipboard.\x1b[0m"); 25 | convertClipboardToFM(); 26 | console.log( 27 | "\x1b[32mConverted to script steps. Go paste it in your FM script!\x1b[0m" 28 | ); 29 | --------------------------------------------------------------------------------