Custom Actions
DayBackOnline.CustomActions History
Hide minor edits - Show changes to markup
Add Icons and Colors to your Custom Action Buttons
You can change the appearance of your Custom Actions buttons by adding CSS specific to those buttons. The way this works is by tagging your button with a new class, and then adding CSS for that class. Here're how:
"View Event Record, Go To Event Record From WebViewer, SomeClassName";
"Sample Custom Action, Custom Action Example, AnotherClassName" ;
""
)
background-color: blue;
}
.SomeClassName .btn:hover {
background-color: gray;
}
.SomeClassName .btn:active {
background-color: black;
}
.SomeClassName .btn::before {
content: "\f00c";
font-family: FontAwesome;
padding-right: 5px;
}
--> eventID \\
eventID \\
titleEdit: 'titleEdit', description: 'description', resource: 'resource', status: 'status', contactID: 'contactID', contactName: 'contactName', projectID: 'projectID', projectName: 'projectName'
titleEdit description resource status contactID contactName projectID projectName
Using Event Data Tokens with Google Calendar
Since there is no field mapping required for Google Calendar sources (DayBack knows how to find the data it need in Google) you'll use DayBack's own name for each data object when writing custom actions for your Google events. Here are the names of each of the properties you can reference in a custom action for a Google Calendar event:
--> eventID
allDay
start
end
title
titleEdit: 'titleEdit', description: 'description', resource: 'resource', status: 'status', contactID: 'contactID', contactName: 'contactName', projectID: 'projectID', projectName: 'projectName'
What Kind of Javascript Can I Use?
Most everything. We don't allow access to the global window object but all built in functions for window can still be called directly. For example: open(), close(), alert(), location.href, can all be used as long as you don't use them in the context of window. In other words use location.href instead of window.location.href.
DayBack also includes a few popular libraries to make coding easier. jQuery, BootStrap, and moment.js are all included. So anything you can do in one of those libraries can be used in a custom action.
Keep in mind when writing Javascript for custom actions that the code is executed when loaded (it's loaded when the button to run the action is clicked). So things like onload or jQuery $.ready() aren't necessary here.
Custom Action Examples
Use the examples below as the starting point for your own actions.
Slack WebHook (Send A Message To Slack Group Chat)
Harvest Time Tracker Widget
Parse And Open URL In Event
(:include CustomActionExamples:)
We also include a few popular libraries to make coding easier. jQuery, BootStrap, and moment.js are all included. So anything you can do in one of those libraries can be used in a custom action.
DayBack also includes a few popular libraries to make coding easier. jQuery, BootStrap, and moment.js are all included. So anything you can do in one of those libraries can be used in a custom action.
Use the examples below as the starting point for your own actions.
Slack WebHook (Send A Message To Slack Group Chat)
Harvest Time Tracker Widget
Parse And Open URL In Event
var dateFormat; var allDay = "[[allDay]]"; //Moment.js date and time formats - https://momentjs.com if (allDay === "true") { //Moment localized date format //Could be "MM/DD/YYY" for example "l" will auto detect date format dateFormat = "l"; } else { //Moment localized date and time format //Could be "MM/DD/YYY h:m" for example "LLLL" will auto detect date format dateFormat = "LLLL"; } //Create slack request var sendData = { "text": "This is a message from DayBack regarding: [[Summary]] on " + moment("[[DBk_TimestampStartCalcNum]]").format(dateFormat), "username": "DayBack", "icon_url": "https://bit.ly/dayback-slack-icon", //"icon_emoji": ":ghost:", // Use an emoji instead of icon //"channel": "#other-channel", // A public channel override //"channel": "@username", // A Direct Message override }; //Post the request //Your WebHook URL $.ajax("YourSlackWebHookURL", { type : "POST", data : JSON.stringify(sendData), success: function(data){ dbk.showMessage("Message Sent: " + data); }, failure: function(errMsg) { dbk.showMessage(errMsg); } });
Harvest Time Tracker Widget
Parse And Open URL In Event
- Here is the code for the post-to-Slack demo in the move above: dayBackSlack.js
//Create modal dialog html to render our widget var modalHTML = '<div class="modal fade" id="harvestModal-[[id]]" tabindex="-1" role="dialog">' + '<div class="modal-dialog" role="document" style="width: 402px;">' + '<div class="modal-content">' + '<div class="modal-header">' + '<button type="button" id="closeModal-[[id]]" class="close"><span aria-hidden="true">×</span></button>' + '</div>' + '<div class="modal-body" style="text-align: center; padding: 0">' + '<iframe src="https://platform.harvestapp.com/platform/timer?app_name=DayBack&closable=false&permalink=https%3A%2F%2Fexample.com%2Fitem%2F1&external_item_id=[[id]]&external_item_name=' + encodeURIComponent('[[Summary]]') + '" style="height: 400px; width: 400px; border: none; outline: none;">' + '</iframe>' + '</div>' + '<div class="modal-footer" style="text-align: center;">' + '<button type="button" id="closeModal-[[id]]-Btn" class="btn btn-default">Close</button>' + '</div>' + '</div>' + '</div>' + '</div>'; //Append modal dialog html to body element if it doesn't exist if (!$('#harvestModal-[[id]]').length) { $('body').append(modalHTML); } //Assign our modal element to a variale for easy referencing var harvestModal = $('#harvestModal-[[id]]'); //Create modal dialog harvestModal.modal(); //Attach event listener to our modal so we can run a function when it closes *Currently not used* //harvestModal.on('hidden.bs.modal', function (e) { //Run a routine after modal closes //}); //Attach event listener to close model when clicking the close button $('#closeModal-[[id]], #closeModal-[[id]]-Btn').on('click', function(e) { e.stopPropagation(); closeModal(); }); //Function to close the modal function closeModal() { harvestModal.modal('hide'); }
Harvest Time Tracker Widget
openFirstUrl.js.zip | openFirstUrl.js]]
var searchText = "[[Description]]"; // urls will be an array of URL matches var urls = searchText.match(/\b(http|https)?(:\/\/)?(\S*)\.(\w{2,4})\b/ig); // we don't iterate through urls here because we just want the first one we find if (urls) { open(urls[0]); }
Parse And Open URL In Event
openFirstUrl.js.zip | openFirstUrl.js]]
}@]-]
}@]-]
var searchText = "[[Description]]"; // urls will be an array of URL matches var urls = searchText.match(/\b(http|https)?(:\/\/)?(\S*)\.(\w{2,4})\b/ig); // we don't iterate through urls here because we just want the first one we find if (urls) { open(urls[0]); }
}); @]-]
}); @]-]
//Create modal dialog html to render our widget var modalHTML = '<div class="modal fade" id="harvestModal-[[id]]" tabindex="-1" role="dialog">' + '<div class="modal-dialog" role="document" style="width: 402px;">' + '<div class="modal-content">' + '<div class="modal-header">' + '<button type="button" id="closeModal-[[id]]" class="close"><span aria-hidden="true">×</span></button>' + '</div>' + '<div class="modal-body" style="text-align: center; padding: 0">' + '<iframe src="https://platform.harvestapp.com/platform/timer?app_name=DayBack&closable=false&permalink=https%3A%2F%2Fexample.com%2Fitem%2F1&external_item_id=[[id]]&external_item_name=' + encodeURIComponent('[[Summary]]') + '" style="height: 400px; width: 400px; border: none; outline: none;">' + '</iframe>' + '</div>' + '<div class="modal-footer" style="text-align: center;">' + '<button type="button" id="closeModal-[[id]]-Btn" class="btn btn-default">Close</button>' + '</div>' + '</div>' + '</div>' + '</div>'; //Append modal dialog html to body element if it doesn't exist if (!$('#harvestModal-[[id]]').length) { $('body').append(modalHTML); } //Assign our modal element to a variale for easy referencing var harvestModal = $('#harvestModal-[[id]]'); //Create modal dialog harvestModal.modal(); //Attach event listener to our modal so we can run a function when it closes *Currently not used* //harvestModal.on('hidden.bs.modal', function (e) { //Run a routine after modal closes //}); //Attach event listener to close model when clicking the close button $('#closeModal-[[id]], #closeModal-[[id]]-Btn').on('click', function(e) { e.stopPropagation(); closeModal(); }); //Function to close the modal function closeModal() { harvestModal.modal('hide'); }
Slack WebHook (Slack Group Chat)
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
This is the best way I know to add code snipets to the wiki
Slack WebHook (Slack Group Chat)
"text": "This is a message from DayBack regarding: Summary? on " + moment("DBk_TimestampStartCalcNum?").format(dateFormat), "username": "DayBack", "icon_url": "https://www.seedcode.com/rootimages/stikipad/daybackonline/logosq3slack_360.png",
"text": "This is a message from DayBack regarding: Summary? on " +
moment("DBk_TimestampStartCalcNum?").format(dateFormat), "username": "DayBack", "icon_url": "https://bit.ly/dayback-slack-icon",
Here is some multiline code. Arrows are the indent but not that preformatted text doesn't wrap so we need to manage that ourselves.
var dateFormat; var allDay = "[[allDay]]"; //Moment.js date and time formats - https://momentjs.com if (allDay === "true") { //Moment localized date format //Could be "MM/DD/YYY" for example "l" will auto detect date format dateFormat = "l"; } else { //Moment localized date and time format //Could be "MM/DD/YYY h:m" for example "LLLL" will auto detect date format dateFormat = "LLLL"; } //Create slack request var sendData = { "text": "This is a message from DayBack regarding: [[Summary]] on " + moment("[[DBk_TimestampStartCalcNum]]").format(dateFormat), "username": "DayBack", "icon_url": "https://www.seedcode.com/rootimages/stikipad/daybackonline/logosq3slack_360.png", //"icon_emoji": ":ghost:", // Use an emoji instead of icon //"channel": "#other-channel", // A public channel override //"channel": "@username", // A Direct Message override }; //Post the request //Your WebHook URL $.ajax("YourSlackWebHookURL", { type : "POST", data : JSON.stringify(sendData), success: function(data){ dbk.showMessage("Message Sent: " + data); }, failure: function(errMsg) { dbk.showMessage(errMsg); } });
wrap so we need to manage that ourselves. @-]
wrap so we need to manage that ourselves. @]-]
Here is some multiline code. Arrows are the indent but not that preformatted text doesn't wrap so we need to )
code. Arrows are the indent but not that preformatted text doesn't wrap so we need to manage that ourselves. @-]
code. Note the line-end thingies. =)@]
code. Arrows are the indent but not that preformatted text doesn't wrap so we need to )@]
[@Here is some multiline
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
This is the best way I know to add code snipets to the wiki
Here is some multiline code. Note the line-end thingies. =)
What Kind of Javascript Can I Use?
Most everything. We don't allow access to the global window object but all built in functions for window can still be called directly. For example: open(), close(), alert(), location.href, can all be used as long as you don't use them in the context of window. In other words use location.href instead of window.location.href.
We also include a few popular libraries to make coding easier. jQuery, BootStrap, and moment.js are all included. So anything you can do in one of those libraries can be used in a custom action.
Keep in mind when writing Javascript for custom actions that the code is executed when loaded (it's loaded when the button to run the action is clicked). So things like onload or jQuery $.ready() aren't necessary here.
All data tokens are wrapped in double brackets with the mapped field name DataToken?. For example if you wanted to reference the ID field as it is mapped by default it would look like this id?. Data tokens use the names that you assigned when you mapped your fields in the source settings (your field names). The only exception here is we also utilize a token called "allDay". This is a boolean that signifies an all day event or not.
All data tokens are wrapped in double brackets with the mapped field name [[DataToken]]. For example if you wanted to reference the ID field as it is mapped by default it would look like this [[id]]. Data tokens use the names that you assigned when you mapped your fields in the source settings (your field names). The only exception here is we also utilize a token called "allDay". This is a boolean that signifies an all day event or not.
https://www.somewebsite.com?id=[[id]]&date=[[DateStart]]
var eventID = [[id]];
var isAllDay = "[[allDay]]" === "true"; //Evaluates to a boolean
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
You can create your own custom actions in "Administrator Settings" under the "Settings" tab in the calendar sidebar. In administrator settings navigate to the calendar source and then select the source you would like to add the custom actions for. Scroll down to the bottom of the source settings and you will see a section labeled "Custom Actions".
Click "Add New Custom Action" to create a new action. Custom actions may contain a URL or Javascript code. For URL's you have the ability to specify to open the URL in a new window.
Using Event Data Tokens
DayBack gives you the ability to specify data tokens that will be replaced by event data at the time the custom action is run. This is useful for passing event data to other services for example.
All data tokens are wrapped in double brackets with the mapped field name DataToken?. For example if you wanted to reference the ID field as it is mapped by default it would look like this id?. Data tokens use the names that you assigned when you mapped your fields in the source settings (your field names). The only exception here is we also utilize a token called "allDay". This is a boolean that signifies an all day event or not.
An example URL using data tokens might look like: https://www.somewebsite.com?id=id?&date=DateStart?
If you are using data tokens in Javascript code we recommend wrapping the token in quotes so if the value is empty it doesn't throw an error in your javascript code. All data tokens are strings this way which makes coding more consistent.
An example here might be: var eventID = "id?"; alert(eventID);
Even with boolean values like allDay the preferred method here is to use a string for example: var isAllDay = "allDay?" === "true"; //Evaluates to a boolean
var dateFormat; var allDay = "allDay?";
//Moment.js date and time formats - https://momentjs.com if (allDay === "true") {
//Moment localized date format dateFormat = "l"; //Could be "MM/DD/YYY" for example "l" will detect the proper date format based on your computer settings
} else {
//Moment localized date and time format dateFormat = "LLLL"; //Could be "MM/DD/YYY h:m" for example "LLLL" will detect the proper date format based on your computer settings
}
//Create slack request var sendData = {
"text": "This is a message from DayBack regarding: Summary? on " + moment("DBk_TimestampStartCalcNum?").format(dateFormat), "username": "DayBack", "icon_url": "https://www.seedcode.com/rootimages/stikipad/daybackonline/logosq3slack_360.png", //"icon_emoji": ":ghost:", // Use an emoji instead of icon //"channel": "#other-channel", // A public channel override //"channel": "@username", // A Direct Message override
};
//Post the request $.ajax("YourSlackIncomingWebHookURL", {
type : "POST", data : JSON.stringify(sendData), success: function(data){ dbk.showMessage("Message Sent: " + data); }, failure: function(errMsg) { dbk.showMessage(errMsg); }
});
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
var dateFormat; var allDay = "allDay?";
//Moment.js date and time formats - https://momentjs.com if (allDay === "true") {
//Moment localized date format dateFormat = "l"; //Could be "MM/DD/YYY" for example "l" will detect the proper date format based on your computer settings
} else {
//Moment localized date and time format dateFormat = "LLLL"; //Could be "MM/DD/YYY h:m" for example "LLLL" will detect the proper date format based on your computer settings
}
//Create slack request var sendData = {
"text": "This is a message from DayBack regarding: Summary? on " + moment("DBk_TimestampStartCalcNum?").format(dateFormat), "username": "DayBack", "icon_url": "https://www.seedcode.com/rootimages/stikipad/daybackonline/logosq3slack_360.png", //"icon_emoji": ":ghost:", // Use an emoji instead of icon //"channel": "#other-channel", // A public channel override //"channel": "@username", // A Direct Message override
};
//Post the request $.ajax("YourSlackIncomingWebHookURL", {
type : "POST", data : JSON.stringify(sendData), success: function(data){ dbk.showMessage("Message Sent: " + data); }, failure: function(errMsg) { dbk.showMessage(errMsg); }
});
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
Custom Action Examples
Custom actions let you add your own buttons to the calendar. These buttons run your own FileMaker scripts and are a great way to extend the calendar's capabilities.
Each source gets its own action buttons, and our sample events table comes with two: one to jump to the event's record in its own FileMaker layout, and another to just show a simple dialog.
Custom actions let you add your own buttons to the calendar. These buttons let you open other urls (including fmp:// urls) to go further when working with an event.
Here's an overview of how the work along with some tips for extending our example actions and making your own:
(:youtube N8TtttLL5AY width=500:)
You'll define your action buttons by editing the script "Load Source Settings at Startup...". For each source in that script you'll see a variable called "$sc_CustomEventActions". The definition of that variable declares the names of your action buttons and the names of the scripts they should run.
This takes the form "Button Name<comma> Script Name". Here is the $sc_CustomEventActions definition for the popover shown above:
"View Event Record, Go To Event Record From WebViewer";
"Sample Custom Action, Custom Action Example" ;
""
)
This means that DayBack will draw an action button named "View Event Record" and when it's clicked it will call the FileMaker script named "Go To Event Record From WebViewer". The third item intentionally left blank is a "Watch For Event Changes" option. This can be set to True or False. In most cases this is unnecessary and will complicate your scripts so we recommend to leave the third parameter blank. An explanation of this feature is lower in this article.
Note that you can change the text at the top of the drawer ("Call your own scripts") to anything you'd like by adjusting the calendar's translation file.
Tips for Writing Your Action Scripts
Take a look at our example script "Go To Event Record From WebViewer". That shows you the variables you'll have access to.
Notice also how you can call the script "Find Event by ID (ID)" to jump to your event by passing in the variable $eventID as a script parameter.
The scripts you call with custom actions will have access to a few local variables you can use to find events and manipulate them. These variables will already be declared when your script starts to run:
Watch For Event Changes
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
Here's an overview of how the work along with some tips for extending our example actions and making your own:
(:youtube N8TtttLL5AY width=500:)
This means that DayBack will draw an action button named "View Event Record" and when it's clicked it will call the FileMaker script named "Go To Event Record From WebViewer".
This means that DayBack will draw an action button named "View Event Record" and when it's clicked it will call the FileMaker script named "Go To Event Record From WebViewer". The third item intentionally left blank is a "Watch For Event Changes" option. This can be set to True or False. In most cases this is unnecessary and will complicate your scripts so we recommend to leave the third parameter blank. An explanation of this feature is lower in this article.
>> What does "watch event for changes do" as an action parameter.
Watch For Event Changes
Each source gets its own action buttons, and our sample events table comes with two: one to jump to the event's record in it's own FileMaker layout, and another to just show a simple dialog.
Each source gets its own action buttons, and our sample events table comes with two: one to jump to the event's record in its own FileMaker layout, and another to just show a simple dialog.
Each source gets it's own action buttons, and our sample events table comes with two: one to jump to the event's record in it's own FileMaker layout, and another to just show a simple dialog.
Each source gets its own action buttons, and our sample events table comes with two: one to jump to the event's record in it's own FileMaker layout, and another to just show a simple dialog.
Take a look at our example script "Go To Event Record From WebViewer". That shows you the variables you'll have access to and how to determine the source number from the source name in $source.
Take a look at our example script "Go To Event Record From WebViewer". That shows you the variables you'll have access to.
Note that you can change the text at the top of the drawer ("Call your own scripts") to anything you'd like by adjusting the calendar's translation file.
This takes the form "Button Name<comma> Script Name". Here is the $sc_CustomEventActions for the popover shown above:
This takes the form "Button Name<comma> Script Name". Here is the $sc_CustomEventActions definition for the popover shown above:
This takes the form "Button Name, Script Name". Here is the $sc_CustomEventActions for the popover shown above:
This takes the form "Button Name<comma> Script Name". Here is the $sc_CustomEventActions for the popover shown above:
Overview: What are Custom Actions
Overview: What Are Custom Actions?
Reveal the actions drawer by clicking the gear icon in the lower right of the event's popover. You can add as many custom actions as you'd like.
Reveal the actions drawer by clicking the gear icon in the lower right of the event's popover. You can add as many custom actions as you'd like: your list of actions will scroll if it exceeds the length of the drawer.
Take a look at our example script "Go To Event Record From WebViewer". That shows you the variables you'll have access to and how to determine the source number from the source name in $source.
Notice also how you can call the script "Find Event by ID (ID)" to jump to your event by passing in the variable $eventID as a script parameter.
Overview
Overview: What are Custom Actions
Adding Your Own Actions
sdasda
>> How to create custom actions in the "Load Source Settings at Startup..." script. Screenshot of actions.
How to Create Your Own Actions
You'll define your action buttons by editing the script "Load Source Settings at Startup...". For each source in that script you'll see a variable called "$sc_CustomEventActions". The definition of that variable declares the names of your action buttons and the names of the scripts they should run.
This takes the form "Button Name, Script Name". Here is the $sc_CustomEventActions for the popover shown above:
"View Event Record, Go To Event Record From WebViewer";
"Sample Custom Action, Custom Action Example" ;
""
)
This means that DayBack will draw an action button named "View Event Record" and when it's clicked it will call the FileMaker script named "Go To Event Record From WebViewer".
Tips for Writing Your Action Scripts
The scripts you call with custom actions will have access to a few local variables you can use to find events and manipulate them. These variables will already be declared when your script starts to run:
>> What does "watch event for changes do" as an action parameter.
https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover
https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
Overview
Custom actions let you add your own buttons to the calendar. These buttons run your own FileMaker scripts and are a great way to extend the calendar's capabilities.
Each source gets it's own action buttons, and our sample events table comes with two: one to jump to the event's record in it's own FileMaker layout, and another to just show a simple dialog.
https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover
Reveal the actions drawer by clicking the gear icon in the lower right of the event's popover. You can add as many custom actions as you'd like.
Adding Your Own Actions
sdasda
>> How to create custom actions in the "Load Source Settings at Startup..." script. Screenshot of actions.