Timer Component - time tasks with hooks on action framework events!

We have had the need recently to create timed tasks for the current user, such as timing calls with clients, work time elapsed etc., from any page in our org while synchronized on all active browser tabs.

Hence, the Timer custom component.

The component runs as a two-part system and is intended to be placed in the header of your orgs’ master page.

The logic is handled by the mBlazonryComponents custom component pack, while the display is handled by my mB fork of this jQuery-counter.

Aside: we’ve had to modify the original counter from the link above for two reasons: first, because it wasn’t working the way we wanted it to, and second we may choose to replace the display portion of the timer with something better later on.

The mB logic controls the saving and updating of the various state variables and Datetimes, the events and invokes Action Framework actions that you select for when various events occur. The jQuery counter is responsible for displaying the time on the page visually. Each event will have its own Popup Controller so you can vary functionality from popup to popup.

Please note:

  1. The timer is currently beta! I haven’t tested it in all situations. One major limitation at this time is that you can only have one timer instance on a given page. For issues & feedback, report to the issue tracker here.
  2. The timer styling is currently limited.
  3. This is written strictly for Skuid 7.x (Banzai) and newer.

Part 1: the runtime!

Part 2: the builder!

Creating the skuid component pack

  1. Click on “configure” in the skuid header, then on the tab labeled “Component Packs”.
  2. By clicking the little + button on the table (not the button), create a new Component Pack. Enter the following information:
  • Name: (case-sensitive)


  • Resource Name: (case-sensitive)


  • Resource Namespace: _leave blank _

  • Pages available in: Desktop Only

  • Load Order: 1 (default)

It should look like this:
You can modify the component pack to fit your specific namespace if need be.
Making SF Static Resources

  1. Go to the SF menu, search for “Static Resources”.
  2. Find the “mBlazonryComponents” resource, open it, click “Edit” and upload the .zip file from here.
    It should look like this: (case-sensitive!)
  3. Create a new static resource with the following information: (case-sensitive!)
    using the .zip file here.
    Using static resources in skuid
  4. Open the skuid Page Builder on the page you want to add the timer (preferrably your org’s master page).
  5. Create the following JS Resource:
  6. And the following CSS Resource:

User object and setup for the page

  1. The Timer component was designed to use standard “User” SF object with some added custom fields for persistency. Ours look like:

  2. Our “CurrentUser” has those fields mapped like so:
    with the following condition:
    Component setup

  3. Set the Timer’s properties as appropriate for your situation.

  4. Important: the “Actions” tab is where you will be tying the timer events in with Action Framework items. Be sure to fill those in and fire the events.
    ex: we have two popups that display when the timer is started and stopped, in which we have buttons that update other models and save the recorded times.
    Here’s a quick sample skuid page I’ve made. To use it: complete the installation steps above, then create a new skuid page with the same title as the gist and copy/paste the XML shown there. (Dev note: for lots of nifty debug information, change “Test” to “Debug” in the page title).


This is fantastic! I’m probably going to borrow it. Thanks!

Hopefully this becomes a useful component for many as we’ve spent many many many hours refining it. Not to mention the many many many hours learning how to do this. 99% of the learning how to was Andreas’. I played to the role of the user and collaborator.

Also, we have to thank Barry for his pointers and guidance in making this component. He is as close to being a Skuid API developer as you can become without making the API himself.

We have plans for a few more components for 2016 EOY. Hopefully 1-2 ready for the next release of Skuid.

Great work Andreas! Keep it up!

Happy Skuiding!

My pleasure! FYI

 Each event will have its own Popup Controller so you can vary functionality from popup to popup.
Should be: each event can easily be hooked into, and maps to fully customizable action framework actions trees in the Timer’s properties pane.

I might as well say, I’m very grateful for the inspiration provided to me by Barry’s original post on the Popup Controller :stuck_out_tongue:

PS: late night work typos all over my big post, sorry!

Wow, very cool guys! Thanks for sharing with the community!!!

Hey Everyone,

This is really cool stuff. People making custom components is our dream for Skuid. We’re totally pumped that you guys are doing this, (even without proper documentation) :(.

Very, very cool that the popups are customizable and it hooks up to the Action Framework.

For updated instructions, new versions and more components, please visit https://github.com/mBlazonry/mBlazonrySupport

Cheers, A.

Much appreciatex

Andreas/Pat - Not sure how I missed this post a couple of months back but this is great work!  Love seeing the momentum the community is building by extending Skuid, awesome stuff!