DayBackForFileMaker

Custom Button Actions

DayBackForFileMaker.CustomActions History

Hide minor edits - Show changes to output

May 19, 2023, at 04:25 PM by 192.88.134.15 -
Changed line 8 from:
%center% %width=440% https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
to:
%center% %width=440% https://archive.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
August 12, 2019, at 09:04 PM by KC Embrey - Added #Variables
Added line 65:
[[#Variables]]
December 09, 2018, at 09:57 PM by 192.88.134.15 -
Changed line 4 from:
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.
to:
Button 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.
December 09, 2018, at 09:57 PM by 192.88.134.15 -
Changed lines 1-2 from:
!! Overview: What Are Custom Actions?
to:
(:title Custom Button Actions:)
!! Overview: What Are Button
Actions?
December 03, 2018, at 07:31 PM by 192.88.134.15 -
Changed lines 93-97 from:
This can be accomplished by adding a few lines to your CSS file as described in our [[CSS#CustomActions | CSS documentation here]].
to:
This can be accomplished by adding a few lines to your CSS file as described in our [[CSS#CustomActions | CSS documentation here]].

!! Event Actions: run scripts without a button

You can also call scipts based on user actions like clicking on an event or hovering over an event. More here: [[Event Actions]]
December 03, 2018, at 07:29 PM by 192.88.134.15 -
Changed lines 17-19 from:
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_CustomActions". 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:
to:
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_CustomActions". 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_CustomActions definition for the popover shown above:
December 03, 2018, at 07:28 PM by 192.88.134.15 -
Changed line 17 from:
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.
to:
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_CustomActions". The definition of that variable declares the names of your action buttons and the names of the scripts they should run.
Deleted lines 13-14:

(:youtube N8TtttLL5AY width=500:)
July 12, 2017, at 10:19 PM by KC Embrey - Added link to CSS documentation to hide cog button
Changed lines 91-95 from:
-> You can use your FileMaker scripts to call urls in other apps--as we do in [[https://www.seedcode.com/connect-your-calendar-to-the-rest-of-your-life/ | this example]] linking DayBack Calendar to your wiki--or you can use JavaScript to talk directly to other apps: Check out [[JavaScript Custom Actions]].
to:
-> You can use your FileMaker scripts to call urls in other apps--as we do in [[https://www.seedcode.com/connect-your-calendar-to-the-rest-of-your-life/ | this example]] linking DayBack Calendar to your wiki--or you can use JavaScript to talk directly to other apps: Check out [[JavaScript Custom Actions]].

!! Can I remove the custom actions cog/button from the popover?

This can be accomplished by adding a few lines to your CSS file as described in our [[CSS#CustomActions | CSS documentation here
]].
July 06, 2017, at 09:24 PM by 192.88.134.15 -
Changed line 52 from:
. SomeClassName .btn:hover { \\
to:
.SomeClassName .btn:hover { \\
Changed line 55 from:
. SomeClassName .btn:active { \\
to:
.SomeClassName .btn:active { \\
Changed line 58 from:
. SomeClassName .btn::before { \\
to:
.SomeClassName .btn::before { \\
July 06, 2017, at 08:48 PM by 192.88.134.15 -
Changed line 45 from:
-> Note that you can tag and button with more than one class by separating your class names with a space.
to:
-> Note that you can tag a button with more than one class by separating your class names with a space.
July 06, 2017, at 05:51 PM by 192.88.134.15 -
Added lines 45-46:
-> Note that you can tag and button with more than one class by separating your class names with a space.
Added lines 63-64:

-> '''Icons.''' You can specify icons in CSS by selecting something from the FontAwesome icon set as you can see in the .btn::before example above where we chose the icon "\f00c". To find an icon, visit %newwin% [[https://fontawesome.io/cheatsheet/ | https://fontawesome.io/cheatsheet/]] and select an icon (DayBack has access to *most* of these). You'll see the unicode for each icon to the right of it like "[&#xf2bc;". To use that icon in CSS, add a leading slash and just take the 4 digits starting with the "f" in every case. So in this case it would be "\f2bc".
July 06, 2017, at 05:24 PM by 192.88.134.15 -
Added lines 32-60:

!! 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:

-> '''Tag your button with a class.''' Revisit the script when you've described your custom action button: that's the script "Load Source Settings at Startup...". To add a CSS class to your button, simply add an additional parameter after the name of your button's script. So the buttons might look like this:

--> List ( \\
"View Event Record, Go To Event Record From WebViewer, SomeClassName"; \\
"Sample Custom Action, Custom Action Example, AnotherClassName" ; \\
"" \\
)

-> '''Apply some CSS to that class.''' Once you have a class name for your button. add some new lines to DayBack's CSS to style the button. If you've never edited the CSS before, you'll find instructions [[Editing Themes | here]]. Here is some sample CSS to make a button blue and give it a check icon:

--> .SomeClassName .btn { \\
    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; \\
}
April 11, 2017, at 04:28 PM by 192.88.134.15 -
Added lines 12-13:

%newwin% [[https://youtu.be/N8TtttLL5AY]]
November 19, 2016, at 09:20 PM by 192.88.134.15 -
Changed line 56 from:
-> Check out [[JavaScript Custom Actions]].
to:
-> You can use your FileMaker scripts to call urls in other apps--as we do in [[https://www.seedcode.com/connect-your-calendar-to-the-rest-of-your-life/ | this example]] linking DayBack Calendar to your wiki--or you can use JavaScript to talk directly to other apps: Check out [[JavaScript Custom Actions]].
August 10, 2015, at 06:14 PM by 142.4.217.188 -
Changed lines 54-103 from:
! JavaScript Custom Actions

!! Introduction

While the actions described above all run scripts in your FileMaker file, you can also run custom javascript action to interact with other web services. This is new to DayBack for FileMaker as of [[VersionHistory | version]] 9.53.

We previewed this at DevCon 2015 and showed off a couple examples of what you may want to use JavaScript actions for. Though this video shows them in [[https://www.seedcode.com/filemaker-webdirect-calendar/ | DayBack Online]], they're now available to DayBack for FileMaker also:

(:youtube w2MSlerRrSc width=500:)

!! Adding JavaScript actions to your file.

coming soon

!! Using Event Data Tokens

DayBack gives you the ability to specify data tokens that will be replaced by event data at the time the JavaScript action is run. This means your JS actions can pass along fields from your event and that'ss is useful for passing event data to other services (like including an event's title in your Slack post). Using this token works a bit differently that the $vars you can use in your FileMaker scripts.

In your JavaScript custom actions, the data tokens are wrapped in double brackets with the mapped field identifier [=[[DataToken]]=]. This identifier is not the field name, it's a generic version of the field name DayBack uses under the hood. For example if you wanted to reference your event ID field it would look like this [=[[eventID]]=] even though your field name be named "myevents::primarykey".

An example URL using data tokens might look like:
[=https://www.somewebsite.com?id=[[eventID]]&date=[[DateStart]]=]

Here is a list of all the tokens you have access to:

-> allDay \\
contactID \\
contactName \\
description \\
end (the end timestamp of the event) \\
eventID \\
eventSource (the number of the event's source: "1" not "Source No 1"\\
projectID \\
ProjectName \\
resource \\
start (the starting timestamp of the event) \\
status \\
titleEdit (the event summary) \\
title (your eventsummerycalc field)

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 eID = [=[[eventID]]=];
alert(eID);

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

(:include DayBackOnline.CustomActionExamples:)
to:
!! Need to run scrips in web apps instead of FileMaker Scripts?

-> Check out [[JavaScript Custom Actions]].
August 10, 2015, at 06:13 PM by 142.4.217.187 -
Changed line 58 from:
While the actions described above all run scripts in your FileMaker file, you can also run custom javascript actions--this is new to DayBack for FileMaker as of [[VersionHistory | version]] 9.53.
to:
While the actions described above all run scripts in your FileMaker file, you can also run custom javascript action to interact with other web services. This is new to DayBack for FileMaker as of [[VersionHistory | version]] 9.53.
August 10, 2015, at 04:46 PM by 142.4.217.187 -
Changed lines 91-92 from:
title (the event summary)\\
to:
titleEdit (the event summary) \\
title (your eventsummerycalc field)
August 10, 2015, at 04:45 PM by 142.4.217.187 -
Added lines 84-91:
eventID \\
eventSource (the number of the event's source: "1" not "Source No 1"\\
projectID \\
ProjectName \\
resource \\
start (the starting timestamp of the event) \\
status \\
title (the event summary)\\
August 10, 2015, at 04:43 PM by 142.4.217.187 -
Changed lines 79-83 from:
-> Coming soon
to:
-> allDay \\
contactID \\
contactName \\
description \\
end (the end timestamp of the event) \\
August 10, 2015, at 04:36 PM by 142.4.217.188 -
Changed lines 70-73 from:
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.
to:
DayBack gives you the ability to specify data tokens that will be replaced by event data at the time the JavaScript action is run. This means your JS actions can pass along fields from your event and that'ss is useful for passing event data to other services (like including an event's title in your Slack post). Using this token works a bit differently that the $vars you can use in your FileMaker scripts.

In your JavaScript custom actions, the data tokens are wrapped in double brackets with
the mapped field identifier [=[[DataToken]]=]. This identifier is not the field name, it's a generic version of the field name DayBack uses under the hood. For example if you wanted to reference your event ID field it would look like this [=[[eventID]]=] even though your field name be named "myevents::primarykey".
Changed lines 75-76 from:
[=https://www.somewebsite.com?id=[[id]]&date=[[DateStart]]=]
to:
[=https://www.somewebsite.com?id=[[eventID]]&date=[[DateStart]]=]

Here is a list of all the tokens you have access to:

-> Coming soon

Changed lines 84-85 from:
var eventID = [=[[id]]=];
alert(eventID);
to:
var eID = [=[[eventID]]=];
alert(eID);
August 10, 2015, at 04:16 PM by 142.4.217.188 -
Added lines 67-84:

!! 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
August 10, 2015, at 04:16 PM by 142.4.217.188 -
Added line 68:
(:include DayBackOnline.CustomActionExamples:)
August 06, 2015, at 03:53 PM by 142.4.217.187 -
Changed lines 52-67 from:
-> This is the third option when creating a custom action in the "Load Calendar Settings" script. Generally this will be left blank. If this is set to True it will signal the WebViewer to pass back a $queryID parameter to your custom action script. This way each process gets it's own ID. This was also intended to be used for signaling when an event might be updated but we have better methods for that now. Specifically you can look at the "Close Event Window & Refresh Calendar" for updating an event in the WebViewer once it has been edited in a FileMaker record.
to:
-> This is the third option when creating a custom action in the "Load Calendar Settings" script. Generally this will be left blank. If this is set to True it will signal the WebViewer to pass back a $queryID parameter to your custom action script. This way each process gets it's own ID. This was also intended to be used for signaling when an event might be updated but we have better methods for that now. Specifically you can look at the "Close Event Window & Refresh Calendar" for updating an event in the WebViewer once it has been edited in a FileMaker record.

! JavaScript Custom Actions

!! Introduction

While the actions described above all run scripts in your FileMaker file, you can also run custom javascript actions--this is new to DayBack for FileMaker as of [[VersionHistory | version]] 9.53.

We previewed this at DevCon 2015 and showed off a couple examples of what you may want to use JavaScript actions for. Though this video shows them in [[https://www.seedcode.com/filemaker-webdirect-calendar/ | DayBack Online]], they're now available to DayBack for FileMaker also:

(:youtube w2MSlerRrSc width=500:)

!! Adding JavaScript actions to your file.

coming soon

Added lines 10-13:

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:)
December 09, 2014, at 04:31 PM by 98.203.211.206 -
Changed lines 23-24 from:
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".
to:
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.
Changed lines 45-48 from:
%color=red% >> What does "watch event for changes do" as an action parameter.
to:
-> Please note that the $start and $end parameters will be in whichever date format you are using in the calendar. If you have left the date format settings in their default state this should be your local date format.

!! Watch For Event Changes
-> This is the third option when creating a custom action in the "Load Calendar Settings" script. Generally this will be left blank. If this is set to True it will signal the WebViewer to pass back a $queryID parameter to your custom action script. This way each process gets it's own ID. This was also intended to be used for signaling when an event might be updated but we have better methods for that now. Specifically you can look at the "Close Event Window & Refresh Calendar" for updating an event in the WebViewer once it has been edited in a FileMaker record
.
Changed line 5 from:
Each [[multiple sources | 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.
to:
Each [[multiple sources | 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.
Changed line 5 from:
Each [[multiple sources | 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.
to:
Each [[multiple sources | 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.
Changed lines 29-30 from:
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 [[multiple sources | source]] number from the source name in $source.
to:
Take a look at our example script "Go To Event Record From WebViewer". That shows you the variables you'll have access to.
Changed line 37 from:
-> '''$source''': the name of the [[multiple sources | source]] of the event you clicked on. For example, "Sample Events".
to:
-> '''$source''': the number of the [[multiple sources | source]] from the event you clicked on. For example, if the event was mapped on the "Source No 1" layout the $source would be "1".
Added lines 24-25:

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.
Changed line 15 from:
This takes the form "Button Name<comma> Script Name". Here is the $sc_CustomEventActions for the popover shown above:
to:
This takes the form "Button Name<comma> Script Name". Here is the $sc_CustomEventActions definition for the popover shown above:
Changed line 15 from:
This takes the form "Button Name, Script Name". Here is the $sc_CustomEventActions for the popover shown above:
to:
This takes the form "Button Name<comma> Script Name". Here is the $sc_CustomEventActions for the popover shown above:
Changed line 1 from:
!! Overview: What are Custom Actions
to:
!! Overview: What Are Custom Actions?
Changed line 9 from:
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.
to:
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.
Changed lines 33-41 from:
-> $start: the starting timestamp of the event you clicked on. For example "10/28/2014 12:15:00"

-> $source: the name of the [[multiple sources | source]] of the event you clicked on. For example, "Sample Events".

-> $eventID: the primary key (unique id, often a serial number) or the event your clicked on. This is the from the field specified by "id" in the calc "DBk_WebViewerSource".

-> $end: the ending timestamp of the event you clicked on. For example "10/28/2014 12:15:00"

-> $allDay: true or false if the event is an all-day event (an event with no start time).
to:
-> '''$start''': the starting timestamp of the event you clicked on. For example "10/28/2014 12:15:00"

-> '''$source''': the name of the [[multiple sources | source]] of the event you clicked on. For example, "Sample Events".

-> '''$eventID''': the primary key (unique id, often a serial number) or the event your clicked on. This is the from the field specified by "id" in the calc "DBk_WebViewerSource".

-> '''$end''': the ending timestamp of the event you clicked on. For example "10/28/2014 12:15:00"

-> '''$allDay''': true or false if the event is an all-day event (an event with no start time).
Added lines 26-29:

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 [[multiple sources | 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.
Changed lines 1-2 from:
'''Overview'''
to:
!! Overview: What are Custom Actions
Deleted line 8:
Changed lines 11-16 from:
'''Adding Your Own Actions'''

sdasda


%color=red% >> How to create custom actions in the "Load Source Settings at Startup..." script. Screenshot of actions.
to:
!! 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:

-> List ( \\
"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:

-> $start: the starting timestamp of the event you clicked on. For example "10/28/2014 12:15:00"

-> $source: the name of the [[multiple sources | source]] of the event you clicked on. For example, "Sample Events".

-> $eventID: the primary key (unique id, often a serial number) or the event your clicked on. This is the from the field specified by "id" in the calc "DBk_WebViewerSource".

-> $end: the ending timestamp of the event you clicked on. For example "10/28/2014 12:15:00"

-> $allDay: true or false if the event is an all-day event (an event with no start time).

%color=red% >> What does "watch event for changes do" as an action parameter.
Changed line 7 from:
%center% %width=400% https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
to:
%center% %width=440% https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
Changed line 7 from:
%center% %width=300% https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
to:
%center% %width=400% https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
Changed line 7 from:
%center% https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
to:
%center% %width=300% https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
Changed line 7 from:
%center% https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover
to:
%center% https://www.seedcode.com/rootimages/stikipad/dayback/customactionspopover.png
Added lines 1-16:
'''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 [[multiple sources | 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.

%center% 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

Added line 1:
%color=red% >> How to create custom actions in the "Load Source Settings at Startup..." script. Screenshot of actions.
(855) SEEDCODE
[email protected]
Follow us: