Template Component with Action Framework!

  • 4
  • Idea
  • Updated 2 years ago
  • Implemented
  • (Edited)
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.
Photo of mB Andréas K.LeF

mB Andréas K.LeF

  • 1,244 Points 1k badge 2x thumb
  • #CommunityWednesdays

Posted 2 years ago

  • 4
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Nice!
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,240 Points 5k badge 2x thumb
Andreas~

Cool component!

Thanks for sharing :)
Karen
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Awesome work Andreas!
Photo of Andy Shipsides

Andy Shipsides

  • 430 Points 250 badge 2x thumb
Hey Andreas

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

Andy
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Hi Andy,

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

Pat
Photo of mB Andréas K.LeF

mB Andréas K.LeF

  • 1,244 Points 1k badge 2x thumb
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!
(Edited)
Photo of mB Andréas K.LeF

mB Andréas K.LeF

  • 1,244 Points 1k badge 2x thumb
New mB Template version is context-aware! See the "Context" tab in the builder UI to set context-specific conditions.
(Edited)
Photo of mB Roman Melnik

mB Roman Melnik

  • 2,802 Points 2k badge 2x thumb
nicely done! thanks for the update Andréas.
(I find myself using this custom component over Skuid's default one more-and-more often)
Photo of Andy Shipsides

Andy Shipsides

  • 430 Points 250 badge 2x thumb
Thanks Andréas!
Photo of William Cheatham

William Cheatham

  • 136 Points 100 badge 2x thumb
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?
Photo of mB Roman Melnik

mB Roman Melnik

  • 2,802 Points 2k badge 2x thumb
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:
(Edited)
Photo of William Cheatham

William Cheatham

  • 136 Points 100 badge 2x thumb
Perfect, makes sense.  Thanks again!  Loving this component.