Skip to main content

Implementing GoDraw3 Into Your App

The simplest way to incorporate the GoDraw app is to copy from the sample file, and it can be accomplished in a few steps.

For reference, we will use this as a checklist: https://www.geistinteractive.com/checklist-moving-filemaker-code/

Implementation Steps 

File Placement

Start by placing the GoDraw3 file next to where your file is being stored: on the server or inside a folder. This ensures that copy/pasting scripts into your app will create the valid path to this file.

Custom functions

Copy/paste the custom functions from the example into your own.

  1. FileMaker Pro Advanced is required for this step.If you do not have FMPA, please send the file to help@geistinteractive and we can set the custom functions for you.

Fields

Copy/Paste or create the fields in the Example table into whichever table will hold the drawings in your custom app. 

  1. If you don't plan on using the .svg format, you do not need that field.
  2. The other three are needed.
    1. SavedDocument - a text field holding the JSON object of the edited drawing
    2. OriginalImage - a Container field from which the unedited, first image comes
    3. Image - the container field the edited image will be saved as a png or jpg.

*You can rename these fields as you see fit.

Scripts

Copy/Paste the scripts. If the GoDraw3 file is next to your custom app file, the scripts will auto-create the External File Reference and all external scripts will not be broken.

Required scripts

These two scripts are required

  1. Open Document  Or Image in GoDraw - this start of the process
    1. Relies on an object named "Image" with dimensions that will be used to resize the GoDraw3 card window, or this can be hardcoded
  2. Handle Save
    1. Updates the fields in your custom app.

Other Scripting

The remaining scripts are examples for basic functionality. You can use these directly or as a template.

  1. Revert to Original - resets the image from the edited one to the original image.
  2. On Modify - updates the Image script with the original image
  3. Go to Proper Tab - only needed for png/jpg and svg use.
  4. Find all Tagged Nodes & Find all Tags- a basic script for parsing the JSON, finding the elements that have been tagged. Use these as a starting for building your own

Script Reference Issues

Fix any script reference issues. Use FileMaker's "Check for Errors" tool in the script workspace. You'll find some errors as table and field names are different. There should only be a handful of changes, and these are clearly highlighted in red.

Layout Revisions

The example file contains a slide panel with the name "Image". The dimensions of this panel are used in the "Simple Example" script. The slide panel object has two panels: one for the container field when the image is stored as a .pdf, .png, .jpg, and another panel to show the image in a web viewer if saved in the .svg format. This slide panel is also used in the "go to Proper Tab" script.

Use this panel, or name an object with the correct dimensions you want to have "Image". 

Specific Customization

Refer to the two guides for further details about further customization

Basic Customization

Advanced Customization