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
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.
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.
Tagged:
4
Categories
- 7.9K Questions
- 926 Ideas
- 220 Discussion Categories
- 178 General
- 9 Community Feedback
- 3 Community Info
- 18 Knowledge Base
Comments
Cool component!
Thanks for sharing
Karen
I think this may have stopped working in the latest release of Brooklyn, v 9.3.3. Any ideas?
Andy
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!
(I find myself using this custom component over Skuid's default one more-and-more often)
Here's a quick walkthrough illustrating this: