DayBackOnline

Custom Actions

DayBackOnline.CustomActions History

Hide minor edits - Show changes to output

February 28, 2018, at 04:55 AM by KC Embrey - Added #examples
Added line 52:
[[#examples]]
February 28, 2018, at 04:51 AM by KC Embrey - Added #Examples
Added line 51:
[[#Examples]]
August 06, 2017, at 04:53 PM by 192.88.134.15 -
Changed line 67 from:
-> '''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:
to:
-> '''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 [[CSS | here]]. Here is some sample CSS to make a button blue and give it a check icon:
August 06, 2017, at 04:53 PM by 192.88.134.15 -
Added lines 52-84:

!! 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" ; \\
"" \\
)

-> Note that you can tag a button with more than one class by separating your class names with a space.

-> '''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; \\
}

-> '''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 "[". 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".
October 07, 2015, at 08:11 PM by 142.4.217.188 -
Changed line 37 from:
        --> eventID \\
to:
       eventID \\
Changed lines 42-49 from:
       titleEdit: 'titleEdit',
       description: 'description',
       resource: 'resource',
       status: 'status',
       contactID: 'contactID',
       contactName: 'contactName',
       projectID: 'projectID',
       projectName: 'projectName'
to:
       titleEdit
        description
        resource
        status
        contactID
        contactName
        projectID
        projectName
October 07, 2015, at 08:11 PM by 142.4.217.188 -
Added lines 32-49:

!! 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'
August 10, 2015, at 04:15 PM by 142.4.217.188 -
Changed lines 33-56 from:
!! 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)'''

-> Here is the code for the post-to-Slack demo in the [[ https://www.youtube.com/watch?v=w2MSlerRrSc | move]] above: [[https://www.seedcode.com/rootimages/stikipad/daybackonline/dayBackSlack.js.zip | dayBackSlack.js]]

'''Harvest Time Tracker Widget'''

-> Show an in-line time tracker from your %newwin% [[https://www.getharvest.com/ | harvest]] account to start a timer related to this task. This is the time tracking widget we demo'ed at DevCon 2015 (movie %newwin% [[ https://www.youtube.com/watch?v=w2MSlerRrSc | here]] ). [[https://www.seedcode.com/rootimages/stikipad/daybackonline/harvest.js.zip | harvest.js]]


'''Parse And Open URL In Event'''

-> This looks through your event's description and will open the first URL it finds. [[https://www.seedcode.com/rootimages/stikipad/daybackonline/openFirstUrl.js.zip | openFirstUrl.js]]
to:
(:include CustomActionExamples:)
August 10, 2015, at 04:14 PM by 142.4.217.188 -
Changed line 37 from:
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.
to:
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.
August 10, 2015, at 04:13 PM by 142.4.217.188 -
Changed lines 43-54 from:
->'''Slack WebHook (Send A Message To Slack Group Chat)'''

--> Here is the code for the post-to-Slack demo in
the [[ https://www.youtube.com/watch?v=w2MSlerRrSc | move]] above: [[https://www.seedcode.com/rootimages/stikipad/daybackonline/dayBackSlack.js.zip | dayBackSlack.js]]

-> '''Harvest Time Tracker Widget
'''

--> Show an in
-line time tracker from your %newwin% [[https://www.getharvest.com/ | harvest]] account to start a timer related to this task. This is the time tracking widget we demo'ed at DevCon 2015 (movie %newwin% [[ https://www.youtube.com/watch?v=w2MSlerRrSc | here]] ). [[https://www.seedcode.com/rootimages/stikipad/daybackonline/harvest.js.zip | harvest.js]]


-> '''Parse And Open URL In Event'''

--> This looks through your event's description and will open the first URL it finds. [[https://www.seedcode.com/rootimages/stikipad/daybackonline/openFirstUrl.js.zip | openFirstUrl.js]]
to:
Use the examples below as the starting point for your own actions.

'''Slack WebHook (Send A Message To Slack Group Chat)'''

-> Here is
the code for the post-to-Slack demo in the [[ https://www.youtube.com/watch?v=w2MSlerRrSc | move]] above: [[https://www.seedcode.com/rootimages/stikipad/daybackonline/dayBackSlack.js.zip | dayBackSlack.js]]

'''Harvest Time Tracker Widget'''

-> Show an in-line time tracker from your %newwin% [[https://www.getharvest.com/ | harvest]] account to start a timer related to this task. This is the time tracking widget we demo'ed at DevCon 2015 (movie %newwin% [[ https://www.youtube.com/watch?v=w2MSlerRrSc | here]] ). [[https://www.seedcode.com/rootimages/stikipad/daybackonline/harvest.js.zip | harvest.js]]


'''Parse And Open URL In Event'''

-> This looks through your event's description and will open the first URL it finds. [[https://www.seedcode.com/rootimages/stikipad/daybackonline/openFirstUrl.js.zip | openFirstUrl.js]]
August 10, 2015, at 04:11 PM by 142.4.217.188 -
Changed lines 45-91 from:
-> [-[@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'''

-> Show an in-line time tracker from your %newwin% [[https://www.getharvest.com/ | harvest]] account to start a timer related to this task. This is the time tracking widget we demo'ed at DevCon 2015 (movie %newwin% [[ https://www.youtube.com/watch?v=w2MSlerRrSc | here]] ). [[https://www.seedcode.com/rootimages/stikipad/daybackonline/harvest.js.zip | harvest.js]]


'''Parse And Open URL In Event'''

-> This looks through your event's description and will open the first URL it finds. [[https://www.seedcode.com/rootimages/stikipad/daybackonline/openFirstUrl.js.zip | openFirstUrl.js]]
to:
--> Here is the code for the post-to-Slack demo in the [[ https://www.youtube.com/watch?v=w2MSlerRrSc | move]] above: [[https://www.seedcode.com/rootimages/stikipad/daybackonline/dayBackSlack.js.zip | dayBackSlack.js]]

-> '''Harvest Time Tracker Widget'''

--> Show an in-line time tracker from your %newwin% [[https://www.getharvest.com/ | harvest]] account to start a timer related to this task. This is the time tracking widget we demo'ed at DevCon 2015 (movie %newwin% [[ https://www.youtube.com/watch?v=w2MSlerRrSc | here]] ). [[https://www.seedcode.com/rootimages/stikipad/daybackonline/harvest.js.zip | harvest.js]]


-> '''Parse And Open URL In Event'''

--> This looks through your event's description and will open the first URL it finds. [[https://www.seedcode.com/rootimages/stikipad/daybackonline/openFirstUrl.js.zip | openFirstUrl.js]]
August 10, 2015, at 04:08 PM by 142.4.217.188 -
Changed line 86 from:
-> Show an in-line time tracker from your %newwin% [[https://www.getharvest.com/ | harvest]] account to start a timer related to this task. This is the time tracking widget we demo'ed at DevCon 2015 (movie %newwin% [[ https://www.youtube.com/watch?v=w2MSlerRrSc | here]] ). [[https://www.seedcode.com/rootimages/stikipad/daybackonline/harvest.js.zip | harvest.js]
to:
-> Show an in-line time tracker from your %newwin% [[https://www.getharvest.com/ | harvest]] account to start a timer related to this task. This is the time tracking widget we demo'ed at DevCon 2015 (movie %newwin% [[ https://www.youtube.com/watch?v=w2MSlerRrSc | here]] ). [[https://www.seedcode.com/rootimages/stikipad/daybackonline/harvest.js.zip | harvest.js]]
August 10, 2015, at 04:07 PM by 142.4.217.188 -
Changed lines 84-129 from:
->'''Harvest Time Tracker Widget'''

->[-[@//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">&times;</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');
}@]-]
to:
'''Harvest Time Tracker Widget'''

-> Show an in-line time tracker from your %newwin% [[https://www.getharvest.com/ | harvest]] account to start a timer related to this task. This is the time tracking widget we demo'ed at DevCon 2015 (movie %newwin% [[ https://www.youtube.com/watch?v=w2MSlerRrSc | here]] ). [[https://www.seedcode.com/rootimages/stikipad/daybackonline/harvest.js.zip | harvest.js]

August 10, 2015, at 04:00 PM by 142.4.217.188 -
Changed lines 133-134 from:
-> This looks through your event's description and will open the first URL it finds. [[https://www.seedcode.com/rootimages/stikipad/daybackonline/
openFirstUrl.js.zip | openFirstUrl.js]]
to:
-> This looks through your event's description and will open the first URL it finds. [[https://www.seedcode.com/rootimages/stikipad/daybackonline/openFirstUrl.js.zip | openFirstUrl.js]]
August 10, 2015, at 04:00 PM by 142.4.217.188 -
Changed lines 131-139 from:
->'''Parse And Open URL In Event'''

->[-[@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
]);
}@]-
]
to:
'''Parse And Open URL In Event'''

-> This looks through your event's description and will open the first URL it finds. [[https://www.seedcode.com/rootimages/stikipad/daybackonline/
openFirstUrl
.js.zip | openFirstUrl.js]]
August 03, 2015, at 10:58 PM by 142.4.217.188 -
Changed lines 129-139 from:
}@]-]
to:
}@]-]

->'''Parse And Open URL In Event'''

->[-[@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]);

}@]-]
August 03, 2015, at 10:35 PM by 142.4.217.187 -
Changed lines 82-129 from:
}); @]-]
to:
}); @]-]

->'''Harvest Time Tracker Widget'''

->[-[@//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">&times;</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');
}@]-]
August 03, 2015, at 10:30 PM by 142.4.217.187 -
Changed line 43 from:
->'''Slack WebHook (Slack Group Chat)'''
to:
->'''Slack WebHook (Send A Message To Slack Group Chat)'''
August 03, 2015, at 10:29 PM by 142.4.217.187 -
Changed line 43 from:
'''Slack WebHook (Slack Group Chat)'''
to:
->'''Slack WebHook (Slack Group Chat)'''
August 03, 2015, at 10:29 PM by 142.4.217.187 -
Changed lines 43-46 from:
''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

to:
'''Slack WebHook (Slack Group Chat)'''
Changed lines 62-65 from:
"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",
to:
"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",
August 03, 2015, at 10:22 PM by 142.4.217.187 -
Changed lines 47-49 from:
-> [-[@Here is some multiline
code. Arrows are the indent but not that preformatted text doesn't
wrap so we need to manage that ourselves. @]-]
to:
-> [-[@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);
}
}); @]-]
August 03, 2015, at 06:01 PM by 142.4.217.187 -
Changed line 47 from:
-> [-@Here is some multiline
to:
-> [-[@Here is some multiline
Changed line 49 from:
wrap so we need to manage that ourselves. @-]
to:
wrap so we need to manage that ourselves. @]-]
August 03, 2015, at 06:00 PM by 142.4.217.187 -
Changed lines 47-48 from:
-> [@Here is some multiline
code. Arrows are the indent but not that preformatted text doesn't wrap so we need to )@]
to:
-> [-@Here is some multiline
code. Arrows are the indent but not that preformatted text doesn't
wrap so we need to manage that ourselves. @-]
August 03, 2015, at 06:00 PM by 142.4.217.187 -
Changed line 48 from:
code. Note the line-end thingies. =)@]
to:
code. Arrows are the indent but not that preformatted text doesn't wrap so we need to )@]
August 03, 2015, at 05:59 PM by 142.4.217.187 -
Changed lines 46-47 from:
[@Here is some multiline
to:

->
[@Here is some multiline
August 03, 2015, at 05:59 PM by 142.4.217.187 -
Changed lines 43-47 from:
''Custom actions are not yet enabled in the DayBack Online Beta but are on their way.''
to:
''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. =)@]
August 03, 2015, at 05:48 AM by 142.4.217.187 -
Added lines 32-39:

!! 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.
August 03, 2015, at 05:39 AM by 142.4.217.187 -
Changed lines 19-20 from:
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:
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.
Changed lines 22-23 from:
https://www.somewebsite.com?id=[[id]]&date=[[DateStart]]
to:
[=https://www.somewebsite.com?id=[[id]]&date=[[DateStart]]=]
Changed line 27 from:
var eventID = "[[id]]";
to:
var eventID = [=[[id]]=];
Changed line 31 from:
var isAllDay = "[[allDay]]" === "true"; //Evaluates to a boolean
to:
var isAllDay = "[=[[allDay]]=]" === "true"; //Evaluates to a boolean
August 03, 2015, at 05:34 AM by 142.4.217.187 -
Changed lines 11-31 from:
''Custom actions are not yet enabled in the DayBack Online Beta but are on their way.''
to:
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
August 02, 2015, at 04:44 PM by 142.4.217.188 -
Deleted lines 13-50:

->Post to Slack using an incoming WebHook

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);
}
});

August 02, 2015, at 04:43 PM by 142.4.217.188 -
Changed lines 15-53 from:
''Custom actions are not yet enabled in the DayBack Online Beta but are on their way.''
to:
->Post to Slack using an incoming WebHook

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.''
June 30, 2015, at 02:44 PM by 142.4.217.188 -
Changed lines 11-12 from:
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
to:
''Custom actions are not yet enabled in the DayBack Online Beta but are on their way.''
Changed line 15 from:
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
to:
''Custom actions are not yet enabled in the DayBack Online Beta but are on their way.''
June 30, 2015, at 01:31 AM by 142.4.217.188 -
Added lines 10-13:

Custom actions are not yet enabled in the DayBack Online Beta but are on their way.

!! Custom Action Examples
June 30, 2015, at 01:30 AM by 142.4.217.188 -
Changed lines 3-6 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.

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.
to:
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.
Deleted lines 8-11:
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:)

Changed lines 11-46 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.

This takes the form "Button Name<comma> Script Name". Here is the $sc_CustomEventActions definition 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". 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:

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

-> '''$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".

-> '''$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).

-> 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.
to:
Custom actions are not yet enabled in the DayBack Online Beta but are on their way.
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
support@seedcode.com
Follow us: