This blog article will illustrate how ember semantic ui radio buttons have been used to render form elements selectively on Open Event Front End and in the process will learn, how to make use of the powerful binding features offered by ember semantic ui for radio buttons via the mut action.
So what do we have to begin with ?
The sample form which we want to create
What we want is that the radio button should allow us to make a choice and then display the corresponding fields. Now that seems a trivial process, but there is some thought process which goes into this, to end up with the most efficient choice. So first just make the basic form where in all the fields are visible.
Now let’s learn how to make use of the mut action on the radio buttons. What it allows us to do is pass a parameter while calling it, and that parameter name is shared by all the radio buttons belonging to a particular group of radio buttons. And what that action does is, store the name of the currently selected radio button in it. So we can easily keep track of which button has been selected and use that variable in selective rendering of templates. The action is triggered whenever the radio button’s property changes and the trigger is aptly called onChange. So essentially the syntax boils down to this :
<!-- The first radio button --> {{ui-radio label=(t 'Sandbox mode - Used during development and testing') name='paypal_integration_mode' value='sandbox' onChange=(action (mut selectedMode))}} <!-- The second radio button --> {{ui-radio label=(t 'Live mode - Used during production') name='paypal_integration_mode' value='live' onChange=(action (mut selectedMode))}}
Now whichever button is selected it’s name will be stored in selectedMode in this case. And hence we can use the conditional helpers of handle bars to render elements based on the selected radio button.
The final code looks something like this:
<.h3 class="ui header">{{t 'PayPal Credentials'}}<./h3> <.div class="sub header"> {{t 'See here on how to obtain these keys.'}} <./div> <.h5 class="ui header">{{t 'PayPal Integration Mode'}}<./h5> <.div class="field"> {{ui-radio label=(t 'Sandbox mode') name='paypal_integration_mode' value='sandbox' current='sandbox' onChange=(action (mut selectedMode))}} <./div> {{#unless (eq selectedMode 'live')}} <.div class="field"> <.label>{{t 'Sandbox username'}}<./label> {{input type='text' name='sandbox_username'}} <./div> <.div class="field"> <.label>{{t 'Sandbox password'}}<./label> {{input type='password' name='sandbox_password'}} <./div> <.div class="field"> <.label>{t 'Sandbox signature'}}<./label> {{input type='text' name='sandbox_signature'}} <./div> {{/unless}} <.div class="field"> {{ui-radio label=(t 'Live mode') name='paypal_integration_mode' value='live' onChange=(action (mut selectedMode))}} <./div> {{#if (eq selectedMode 'live')}} <.div class="field"> <.label>{{t 'Live username'}}<./label> {{input type='text' name='live_username'}} <./div> <.div class="field"> <.label>{{t 'Live password'}}<./label> {{input type='password' name='live_password'}} <./div> <.div class="field"> <.label>{{t 'Live signature'}}<./label> {{input type='text' name='live_signature'}} <./div> {{/if}} <.button class="ui teal button" type="submit"> {{t 'Save'}} <./button>
Important tip
The action is triggered by the onChange action, hence the variable doesn’t have the value when the template is rendered for the very first time and hence at that instant, none of the fields will be rendered, to avoid that we have used both if and unless condition helpers instead of identical conditional helpers to cleverly avoid this situation. You can read about the ember radio buttons further more through the official documentation
Resources