Calling Scripts in DayBack from FileMaker

The new JavaScript options introduced in FileMaker 19 allow your FileMaker scripts to call JavaScript functions directly within a web viewer by name. This means that if you know the name of a JavaScirpt function you want to run, you can easily trigger it using FileMaker's "Perform JavaScript in Web Viewer" script step.

However, the real power comes when you create and run your own custom JavaScript functions within DayBack. Typically, you’ll want to:

1. Write a new JavaScript function.
2. Register that function with DayBack.
3. Call the function from within one of your FileMaker scripts.
4. Retrieve the results of that function back in FileMaker.

The following example will guide you through this process, and it's easier than it might seem at first.

Use Case - Batch Editing Selected Events

Imagine you want to select several events in the DayBack calendar and perform a FileMaker operation on each of them simultaneously, such as changing their statuses. To do this, you'll need to write a simple JavaScript function that gathers the IDs of the selected events in DayBack. Once you have that list of IDs in FileMaker, your script can modify their statuses or perform any other operation you choose. Here's how you can accomplish that:

Our function will assemble a list of selected events and will pass them to a new script in your FileMaker file. We need to pass the result into a new script in FileMaker since the "Perform JavaScript in Web Viewer" script step doesn't accept a callback script as a parameter.

Here's the JavaScript function:

// Return Selected

// Purpose:
// Creates and registers a function that can be called from FileMaker to Return
// Multi-Selected Events from DayBack to the calling script

// Action Type: Custom App Action - Before Calendar Render
// Prevent Default Action: No

// More info on custom app actions here:
// https://docs.dayback.com/article/140-custom-app-actions

// function for writing selected events back to FM as JSON

function getSelectedEvents(){
  // get multi select object
  var multiSelect = seedcodeCalendar.get('multiSelect');
  
  // pull events from object and add to new event
  var events = {};
  for ( var event in multiSelect ) {
    var eventId = multiSelect[event].event.eventID;
    events[eventId] = multiSelect[event].event;
  }
  
  // create JSON and send to FileMaker
  var result = JSON.stringify(events);
  dbk.performFileMakerScript('Sample Receive Payload - DayBack',result);
}

// register the function
dbk.registerFunctionCall('getSelectedEvents',getSelectedEvents);

Take note that the callback script name is "Sample Receive Payload - DayBack ". You'll need to create a simple FileMaker script with the same name. This script contains a single line:

Set Variable [ $resultFromDayBack ; Value ; Get ( ScriptParameter ) ]

This generic FileMaker script will be reused anytime you need to capture results from a JavaScript function back into FileMaker.

To integrate this function into DayBack, create a new App Action. You can name it anything you'd like and set the trigger to Before Calendar Render. Set "Perform Default Action" to "No," then paste the entire JavaScript function from above, including the comments. The last line in the function registers it with DayBack so it can be called by name.

Now, you'll write the FileMaker script that calls your JavaScript function and retrieves the results in the global variable $$resultFromDayBack . Here's a simple example:

• Line 8: Customize this line to specify the name of the JavaScript function you'd like to run.
• Line 10: Prepares the instructions you'll send to DayBack. These instructions will likely be similar for any script you want to run, so this entire script can be reused, with only minor changes to lines 8 and 19. Here's the full value of line 10 since you can't see the whole thing on our screenshot:

JSONSetElement ( "{}" ; 
	["payload" ; "" ; JSONString];
	["status" ; 200 ; JSONNumber];
	["error" ; $error ; JSONNumber];
	["dbk" ; 1 ; JSONBoolean];
	["callback" ; $function ; JSONString];
	["keepReference" ; 1 ; JSONBoolean]
)

• Line 12: Calls a script already in DayBack. This is a screen we designed to receive these kinds of instructions for calling subscripts. You don't need to change this line as well.

In the earlier steps, lines 14 and 15 handle the cleanup of global variables created by the callback script "Sample Receive Payload - DayBack." Line 19 then extracts the IDs of the selected events.

You're done! Now, with the $selectedIDs variable, you can pass those IDs to any script that needs to loop through them, find each corresponding record, and update its status or perform other operations.

• Using JSONListKeys : In line 19, the JSONListKeys function retrieves the IDs from a more extensive payload that contains detailed information about each selected event. If you want to see all the information, you can inspect the value stored in the $result variable.

• Selecting Events from Different Tables: If all the selected events come from the same table in FileMaker (the same "calendar" in DayBack), then the IDs alone will suffice. However, if your selections might include events from different tables, the additional data in the $result payload can help identify which calendar (or table) each event belongs to.

  For instance, the following FileMaker calculation returns the calendar name for an event with an ID of "12345":

JSONGetElement ( JSONGetElement ( JSONGetElement ( $resultfromDayBack ; "12345" ) ; "schedule" ) ; "name" )

• In this example, the JSONGetElement function retrieves the "name" from the JSON structure, which is the calendar name. You could also request the "layoutName" to get the name of the layout you'd likely use when searching for this event, as the layout name will vary across different tables.

You can pass parameters to your registered DayBack function from the $payload variable in your FileMaker script. For instance, if you want to trigger a custom modal in DayBack from a FileMaker script, your action in DayBack might look like this:

// Function for showing a modal in the calendar
function showCustomModal(data) {
  // get message contents
  var title = data.title;
  var message = data.message;
  var buttonLabel = data.buttonLabel;

  // show the message using DayBack's built-in modal
  utilities.showModal(title, message, buttonLabel);
}

// register the function
dbk.registerFunctionCall('showCustomModal',showCustomModal);

In this scenario, you would modify the $payload variable in your FileMaker script (as shown in Step 3) to look like this:

JSONSetElement ( "{}" ; 
	["payload" ; "" ; JSONString];
	["title" ; "Message from FileMaker" ; JSONString];
	["message" ; "You've just received a message from FileMaker" ; JSONString];
	["buttonLabel" ; "" ; JSONString];
	["status" ; 200 ; JSONNumber];
	["error" ; $error ; JSONNumber];
	["dbk" ; 1 ; JSONBoolean];
	["callback" ; $function ; JSONString];
	["keepReference" ; 1 ; JSONBoolean]
)