Hi Greg,
There is a quick & dirty way to disable a button after it has been clicked, you can just attach an on-click handler manually like so:
<button
class="btn btn-primary f-action-button"
data-f-on-click="consensus:operations:step&& meta:saved=true "
data-flow-error="Could not find world"
data-f-showif="flag_sufficient_decisions_to_advance[0,<Step>]|is(1, true, '')"
style="background-color: orange"
onclick="this.setAttribute('disabled', 'true');"
>
DECIDE
</button>
That should resolve your issue if you do not need to at some point re-enable that button for use.
For more complicated use cases, like if you need the button or html element to be model aware, see the example below:
Flowjs handles run operations (among other things) using events and event listeners. So when the operation for a click is actuated, there isn’t really a way we can tack on something to the end of it since the ‘do-this-operation’ event will have been fired by one component, and handled by a different one.
The most elegant way I could come up with for handling this was to instead use a custom “data-f-” attribute. Below is a snippet from a modified “index.html” file (one typically generated from Interface Builder), I’ve put comments on the sections I have added:
<script>
//Flow.js will be auto-configured for this project, but you can use the code-block below to override or add any specific changes you want
//See https://forio.com/epicenter/docs/public/data_binding_flow_js/#using_in_project for possible options
window.FLOW_CONFIG = {
channel: {
}
};
let prevValue = undefined;
// create custom attribute “once” (usage: data-f-once=“VARIABLE_NAME")
Flow.dom.attributes.register('once', '*', {
// the 'handle' function is called when the model gets an update that the variable has changed
handle: function(value, attrName, $el) {
// if the model value has changed, re-enable the element
if (prevValue !== value) $el.removeAttr('disabled');
prevValue = value; // store the value for the next update from the model
},
// the 'init' function is called on page load
init: function(attr, topics, $el) {
// disable the button on any click event
$el.on('click', function() {
$(this).attr('disabled', 'true');
});
},
});
</script>
Now I have a custom attribute (data-f-once) that will disable the element when clicked, and re-enable it when it receives a model variable change. Here’s how I’m using it:
<button class="btn f-action-button btn-default" data-f-once="Step" data-f-on-click="operations:step(1)">DECIDE</button>
This way, my DECIDE button is listening to the “Step” variable and when clicked will be disabled until the model variable for “Step" changes.
Hope this helps –
Best, Wallace
