When it comes to checkboxes and radio groups, the nature of HTML haunts us.
So it turns out it's possible to do the same task within a report, and we can build it so we don't even need to submit the page. It really just depends on how you want the page to interact. The following example simply logs the rating selected, rather than a rating being stored as an attribute of Emp.
This is no doubt even easier with Interactive Grids, but I'm not there yet, and I'm sure others aren't either.
And it's fun using Dynamic Actions to make applications more interactive, and revive draft blog posts from a good 18 months earlier. (I've got a few of these...)
I built a traffic light style report once before, but leveraging off the Universal Theme made this effort so much easier.
Consider the template options for creating a pill button group using standard button components.
 |
| Button Template Options |
If you create three buttons, all with first, inner, last button sets respectively, you get something that looks like this:
 |
| Pill buttons |
t-Button--pillStartCheck out the UT button builder for more examples.
So to utilise this in a report, I'll combine three manually constructed buttons, levering other existing classes.
select EMPNO,
ENAME,
JOB,
'<span style="white-space: nowrap;">'
||'<a href="javascript:void(0);" data-emp="'||empno||'"'
||' class="high t-Button t-Button--success t-Button--simple t-Button--pillStart">H</a>'
||'<a href="javascript:void(0);" data-emp="'||empno||'"'
||' class="medium t-Button t-Button--warning t-Button--simple t-Button--pill">M</a>'
||'<a href="javascript:void(0);" data-emp="'||empno||'"'
||' class="low t-Button t-Button--danger t-Button--simple t-Button--pillEnd">L</a>'
||'</span>' rate
from scott.emp
If you remember to Escape Special Characters for the rate columnm you'll see something like this
Now you could slice and dice the dynamic actions in a number of ways, but here I created one for each type of button. So on click of the relevant class I associated with each button type, it will get the value from the data- attribute, put it in a hidden item, then insert a record.
The Set Value action would set some hidden item using the JavaScript expression
$(this.triggeringElement).data('emp')The subsequent PL/SQL process would submit this item to session state, and insert the empno/rating selection into the log table. The third action refreshes the Rating region so we can see the new data.
We can make the buttons more pill-like but adding a border radius
span a.t-Button {border-radius: 10px;}
To dull the colours a touch
span a.t-Button{border-color: lightgrey; box-shadow: 0 0 0 1px lightgrey inset !important;}
It would only take a few more lines of jQuery to turn this into a status, leaving the active button highlighted. Plus a slight tweak to the SQL to match the relevant record.
Obviously I had a demo of this, but this draft was so old I've forgotten where I put it ;p
