Template Component with Action Framework!

This one started off as a simple task I had to do, and ended up being rather complicated.

I had to make icons placed on a skuid page redirect, when clicked, to another page.

Simple enough right? Well I would have liked to use an image component, and run Action Framework actions when the image was clicked, however the image component can’t currently do that. I suppose I could have given the images a special class and jQueried an event handler onto them, but that would have been messy…

So I did it initially with a stock Template component, with the “Allow HTML” option checked, adding a href around my img tag pointing to my page’s URL. I was satisfied to some extent with that. There was quite a bit of HTML clutter in the template though, and despite the href giving me the nice mouse-over indicator in chrome like so:

(bottom left of browser window when you hover over a link), the whole thing wasn’t very declarative, and still didn’t accommodate Action Framework Events.

So, simply, I made an Action Framework-able Template Component!

It assumes that if you are firing Action Framework Events with a mouseClick that you want the resulting template to have the

cursor: pointer; 

CSS set to make it look like a clickable URL.

DEMO:
Part 1: the builder!

Part 2: the runtime!

Please visit https://github.com/mBlazonry/mBlazonrySupport for installation instructions,
updated instructions, new versions of this and other components!

Cheers, A.

Nice!

Andreas~

Cool component!

Thanks for sharing :slight_smile:
Karen

Awesome work Andreas!

Hey Andreas

I think this may have stopped working in the latest release of Brooklyn, v 9.3.3. Any ideas?

Andy

Hi Andy, Andreas is aware of issue. We’re looking into ASAP as we as well make use of the component. Pat

Hey Andy, I uploaded a new version of the component pack fixing some issues with the builder side of things and making the pack leaner. Please update and let me know if the issue you’re having persists.

Our org also runs skuid v9.3.3 and template tested fine. Please post a screencap/video detailing the issue next time if you can. Cheers

Edit: I finally managed to replicate the issue. Our event handler isn’t binding properly. I’m working on it
Edit: New version of the template component up!

New mB Template version is context-aware! See the “Context” tab in the builder UI to set context-specific conditions.

nicely done! thanks for the update Andréas.
(I find myself using this custom component over Skuid’s default one more-and-more often)

Thanks Andréas!

Thanks so much for this Andréas!  Quick question - I just downloaded/installed the component and I’m not seeing the Context tab in the builder UI.  Is this the most recent version of the components pack: mblazonryComponents-min-c622f71d-release.zip?

Hi William, yes that’s the latest version. The Context Tab will only appear in the builder Ui when you’re working with a context-specific situation (such as a popup).

Here’s a quick walkthrough illustrating this:

Perfect, makes sense.  Thanks again!  Loving this component.