| Table of Contents |
|---|
06. Reactor Development Tutorial
The following provides everything you should know to create your own BlackBoxes (or modify others) in Reactor.
...
Section A: BlackBox Management
BlackBox Files
If you have not done so before, now would be the ideal time to go through the in-app tutorial for Reactor. You can do this from the Support screen in Reactor.
...
You can do this manually by clicking ‘upload’. If you no longer wish to pull any changes back into Reactor, click ‘close’ - though this won’t close the file in your text editor, you’ll need to do that yourself. And you can re-open the file at any point. Ie, if you’re done making your changes and want to pull these changes in - click Upload. You can then click close.
...
BlackBoxes Functions and Parameters
Click the ‘functions’ tab and you can see a list of functions for the BlackBox. Most of the time, there will be a single function for each BlackBox, but if you wish to create a suite of BlackBox utilities for a single BlackBox, you can create a function for each,
...
As of this point, we have now provided all the details to build it into a BlackBox, click across to the Preview tab.
...
Compiling and Previewing
...
Click ‘Compile’ and if you switch back to the Functions tab you’ll now see a file below the BlackBox details. The BlackBox file itself - which you can now take and deploy anywhere using the following function:
...
You can now view your BlackBox do…nothing. That’s because all you’ve created is a blank page. Now it’s time to turn to some JavaScript and actually get your BlackBoxes to do stuff.
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:
| Code Block | ||
|---|---|---|
| ||
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" ):
...