Template Component with Action Framework!

mB Andréas K.LeF

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! 

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

Cheers, A.

Skuidward Tentacles (Raymond)

Nice!

Karen Waldschmitt

Andreas~

Cool component!

Thanks for sharing
Karen

Barry Schnell

Awesome work Andreas!

Andy Shipsides

Hey Andreas

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

Andy

Pat Vachon

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

mB Andréas K.LeF

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!

mB Andréas K.LeF

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

mB Roman Melnik

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

Andy Shipsides

Thanks Andréas!

William Cheatham

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?

mB Roman Melnik

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:

William Cheatham

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