...

06. Reactor Development Tutorial

<— Reactor Home

The following provides everything you should know to create your own BlackBoxes (or modify others) in Reactor.

...

FR Toolbox and Talking With FileMaker

1. Introduction to FRToolBox and Asynchronicity

Anytime you create a BlackBox there is a single file that will always be included: FRToolBox.js

...

However FRToolBox has built in callback functions, so there are ways to do stuff with the FileMaker data that comes back.

2. Using parameters

Using our testing BlackBox from the first section, let’s try doing something with the parameter. A parameter can be anything, usually it’s a field name used to pull/push data, or something else like a string of text, number, date, etc.

...

Our BlackBox now does something!

3. Pulling records from your found set

Most typically, one or more of your parameters will refer to a FileMaker field so you can query data.

...

So add the following line to the bottom of your for loop to add the value of the field for each record to the HTML::

document.write(Record.MyField + "<br>");

The <br> adds a line break at the end of each, so they’ll be readable.

The contents of your <script> block should now look like so:

FMLink = 'FM.link';

MyField = '<?Reactor bbdev_Field( $MyField ) Reactor?>';

FMTableOccurrenceName = '<?Reactor bbdev_TO( $MyField ) Reactor?>';

FunctionWhereClause = '<?Reactor bbdev_Relationship( bbdev_TO( $MyField  ) ) Reactor?>';

var RecordsObj = new Object;

function GetData() {

  QueryData = FRTB.find(

    FMTableOccurrenceName + '::' + MyField

  ).where(FunctionWhereClause).send(InitData);

}

        

        

function InitData( response ) {

  AllData = Array();

    for ( var i=0; i < response.data.length; i++) {

        Record = new Object;

        Record.MyField  =  response.data[i][FMTableOccurrenceName + '::' + MyField];

        AllData.push(Record);

        document.write(Record.MyField + "<br>");

The <br> adds a line break at the end of each, so they’ll be readable.

The contents of your <script> block should now look like so:

    }

    RecordsObj = AllData;
}

GetData();

FMLink = 'FM.link';

MyField = '<?Reactor bbdev_Field( $MyField ) Reactor?>';

...

Reactor is now pulling through the values of the Schedules::Description fields for the records that are included in the related set from our current context.

4. Pulling a single record

We can pull records from a found set, but what if you want to pull a single record?

...

If you try changing the QueryValue to a different planet, the output will change accordingly:

...

5. Updating a record

For this section we’ll be creating two new functions:

...

For this section let’s create a new function that creates a new record.

6. CreatePlanet

It will have two parameters: PlanetNameField and PlanetDescriptionField

...

Now pop back to our PlanetList function, and confirm our new planet has appeared:

...

And there it is!

7. Deleting a record 

For this section let’s create a new function that deletes a record. As with the last section, we’ll build in an HTML interface - this time to identify the planet we wish to delete.

...

Success! Our testing planet is no more.

8. Polling For Changes

Sometimes you’ll want to show data changes in real time. For this section, we’ll utilise Reactor’s polling functionality.

...

Now open up a new window, and start adding new planet records, deleting them, and changing them. You’ll see your web-viewer reflecting this in real-time!

9. Running a script

For this section we’ll call a FileMaker script from within the web-viewer using Reactor.

...

Success! We have now successfully passed through multiple parameters to a FileMaker script from within a Reactor function.

10. Pull Container Images

When creating a Reactor function, you can also send through a container field as a parameter. Reactor is able to accept this container field and pull in the contents as images.

...

You should see the image switch when you change the planet in the dropdown list.

11. Using The Starting Template

In this tutorial we have been writing our code from scratch. When we generate a HTML template for a function, it gets us started with not only the basic HTML structure, but also includes code for the following:

...

The template code won’t be perfect, and in many cases you may wish to simply clear much of it (as we have in this tutorial), but it will help to get you started, and save a lot of time. 

...

12. Debugging

Like all development, things will go wrong when building your BlackBoxes. It’d be very unlikely if you got to the end of this tutorial without that happening.

...

You can disable debugging mode at any time using the function BlackBoxDebugging ( "No" ): 

...

<— Reactor Home