I've built a Salesforce Lightning Design System page with some checkboxes on it. The way SLDS implements checkboxes looks really odd to me. I'd like to make one of those checkboxes to appear checked by default using the CSS framework without having to resort to adding JavaScript to the page to accomplish the task.
Unfortunately, it's unclear how to accomplish this using the SLDS CSS framework. I've tried all sorts of stuff without success.
Any ideas?
I'll update this with an additional version that uses an actionFunction in the way that it appears you're trying to use it... but wanted to start with this base.
Update: ActionFunction version added down below. It demonstrates the concept, but isn't 100% functional from a requirements perspective in the same way that the actionSupport version is primarily because of the lifecycle of the operations in this page.
Nothing fancy initially, just actionSupport to provide the rerender onchange event to the checkbox. Removed the styleClass attributes written in a jQuery-like selector syntax as they don't directly contribute to the solution.
This page maintains the collection of all items (selected and non) in the page viewstate along with all of the other bits of data contained in the wrapper class instances.
VF markup:
<apex:page id="thePage" controller="CheckboxActionFunctionDemo">
<apex:form id="theForm">
<!-- Show messages to the user here -->
<apex:pageMessages />
<!-- Iterate the wrapper class instances and render each in a row-->
<apex:pageBlock id="thePageblock">
<apex:pageBlockTable id="data" value="{!ssOptions}" var="ssOpt">
<apex:column id="col1" >
<apex:outputLabel value="{!ssOpt.Option}" for="theCheckbox"></apex:outputLabel>
<apex:inputCheckbox id="theCheckbox" value="{!ssOpt.selected}" label="{!ssOpt.Option}">
<apex:actionSupport event="onchange" rerender="theForm" status="theStatus" />
</apex:inputCheckbox>
<apex:outputLabel value="{!ssOpt.Descr}" for="theTextArea" rendered="{!ssOpt.selected}"></apex:outputLabel>
<apex:inputTextarea id="theTextArea" label="{!ssOpt.Descr}" value="{!ssOpt.optionText}" rendered="{!ssOpt.selected}" />
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
<!-- command button does _not_ have immediate=true, which discards viewstate data in the post -->
<apex:commandButton value="Save Selected" action="{!processSelected}" rerender="theForm" status="theStatus"></apex:commandButton>
<!-- show something while we rerender -->
<apex:actionStatus startText="Working" id="theStatus" />
</apex:form>
</apex:page>
The controller:
public with sharing class CheckboxActionFunctionDemo {
public class ssOption {
public string boxId { get; set; }
public boolean selected { get; set; }
public string option { get; set; }
public string descr { get; set; }
public string optionText { get; set; }
}
public List<ssOption> ssOptions { get; set; }
public CheckboxActionFunctionDemo() {
// init the list
ssOptions = new List<ssOption>();
// populate the list
for (integer i = 1; i < 12; i++) {
ssOption opt = new ssOption();
opt.boxId = '' + i;
opt.selected = false;
opt.option = 'Option ' + i;
opt.descr = 'The description for option ' + i;
opt.optionText = '';
ssOptions.add(opt);
}
}
public void assignSelected() {
// don't really need to iterate the ssOptions collection
// and add the elements to a 'selected' list to achieve the behavior desired
// as long as all items in the ssOptions collection stay in viewstate
}
public void processSelected() {
try {
// Create a task for every selected thing
List<Task> ntsks = new List<Task>();
for (ssOption opt : ssOptions) {
if (opt.selected) {
Task t = new Task(Subject = opt.option, Description = opt.descr);
ntsks.add(t);
}
}
if (ntsks.size() > 0) {
insert ntsks;
// show the user the good news
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'Save was successful'));
}
} catch (Exception ex) {
// show the problem
ApexPages.addMessages(ex);
}
}
}
The actionfunction has 4 named parameters on it, these show up in the parameters collection in the controller just as URL params and all of the other form data. The parameter values from calling the actionfunction will be available there and don't necessarily need to be assigned to a controller member using the assignTo syntax.
Data is passed to the actionfunction the same way you would with any JS function params. In this case 3 of them are strings populated with data from merge fields and the 4th is the checked attribute of the checkbox DOM element.
onchange="assignSelectedJS('{!ssOpt.boxId}', this.checked, '{!ssOpt.Option}', '{!ssOpt.Descr}');"
The page:
<apex:page id="thePage" controller="CheckboxActionFunctionDemo2">
<apex:form id="theForm">
<apex:pageMessages />
<apex:pageBlock id="thePageblock">
<apex:pageBlockTable id="data" value="{!ssOptions}" var="ssOpt">
<apex:column id="col1" >
<apex:outputLabel value="{!ssOpt.Option}" for="theCheckbox"></apex:outputLabel>
<apex:inputCheckbox id="theCheckbox" value="{!ssOpt.selected}" label="{!ssOpt.Option}"
onchange="assignSelectedJS('{!ssOpt.boxId}', this.checked, '{!ssOpt.Option}', '{!ssOpt.Descr}');"></apex:inputCheckbox>
<apex:outputLabel value="{!ssOpt.Descr}" for="theTextArea" rendered="{!ssOpt.selected}"></apex:outputLabel>
<apex:inputTextarea id="theTextArea" label="{!ssOpt.Descr}" value="{!ssOpt.optionText}" rendered="{!ssOpt.selected}" />
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
<apex:commandButton value="Save Selected" action="{!processSelected}" rerender="theForm" status="theStatus"></apex:commandButton>
<apex:actionFunction name="assignSelectedJS" action="{!assignSelected}" rerender="theForm" status="theStatus">
<apex:param name="boxId" value="" />
<apex:param name="selected" value="" />
<apex:param name="Option" value="" />
<apex:param name="Description" value="" />
</apex:actionFunction>
<apex:actionStatus startText="Working" id="theStatus" />
</apex:form>
</apex:page>
The controller:
public with sharing class CheckboxActionFunctionDemo2 {
public class ssOption {
public string boxId { get; set; }
public boolean selected { get; set; }
public string option { get; set; }
public string descr { get; set; }
public string optionText { get; set; }
}
public List<ssOption> ssOptions { get; set; }
public CheckboxActionFunctionDemo2() {
// init the list
ssOptions = new List<ssOption>();
// populate the list
for (integer i = 1; i < 12; i++) {
ssOption opt = new ssOption();
opt.boxId = '' + i;
opt.selected = false;
opt.option = 'Option ' + i;
opt.descr = 'The description for option ' + i;
opt.optionText = '';
ssOptions.add(opt);
}
}
public void assignSelected() {
try {
// this map will contain all named params this page is aware of - including the 4 from the actionFunction
Map<String, Object> paramsMap = ApexPages.currentPage().getParameters();
// demonstrating the above claim
/*
for (String key : paramsMap.keyset()) {
system.debug('Key: ' + key + ' & Value: ' + paramsMap.get(key));
}
*/
// get the params that the actionFunction sent us
String boxId = (String)paramsMap.get('boxId');
Boolean selected = Boolean.valueOf(paramsMap.get('selected'));
String option = (String)paramsMap.get('Option');
String Description = (String)paramsMap.get('Description');
// the instance that we're going to update
ssOption theSSOption = null;
// this is terribly inefficient - don't do this loop, use a map instead.
for (ssOption opt : ssOptions) {
if (opt.boxId == boxId) {
theSSOption = opt; // found the match
break; // get out of the loop
}
}
if (theSSOption == null) {
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.WARNING, 'No matching id found.'));
return;
}
// update the instance member data
theSSOption.selected = selected;
theSSOption.option = option;
theSSOption.descr = Description;
// all done, rerender will fire and show hidden fields driven off of checkbox selected state
// show the user the good news
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'fields updated with data from actionfunction params'));
} catch (Exception ex) {
system.debug(ex);
ApexPages.addMessages(ex);
}
}
public void processSelected() {
try {
// do something with selected
List<Task> ntsks = new List<Task>();
for (ssOption opt : ssOptions) {
if (opt.selected) {
Task t = new Task(Subject = opt.option, Description = opt.descr);
ntsks.add(t);
}
}
if (ntsks.size() > 0) {
insert ntsks;
// show the user the good news
ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.INFO, 'Save was successful'));
}
} catch (Exception ex) {
// show the problem
ApexPages.addMessages(ex);
}
}
}
So I figured out a way to do this (hence adding it as an answer), but it feels very very ugly, and I'm sure I'm not using some basic Aura abilities.. so any improvements are more than welcome. Here's the code:
Component markup:
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
<div class="slds-tabs--default">
<ul class="slds-tabs--default__nav" role="tablist">
<li aura:id="tabpage" class="slds-tabs--default__item slds-text-heading--label slds-active" title="Active" onclick="{!c.changeTab}"
role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Active</a></li>
<li aura:id="tabpage" class="slds-tabs--default__item slds-text-heading--label" title="Previous" onclick="{!c.changeTab}"
role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Previous</a></li>
</ul>
<div aura:id="tab-default-1" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
<div aura:id="tab-default-2" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
</div>
</aura:component>
Helper (used to find the div I clicked in):
({
getContainerDiv: function(event, element) {
var elem;
if (!element) {
elem = event.srcElement;
}
else {
elem = element;
}
if (elem.classList.contains('slds-tabs--default__item')) {
return elem;
}
else {
return this.getContainerDiv(event, elem.parentElement);
}
}
})
JS Controller (main logic):
({
changeTab: function(component, event, helper) {
var clickedTab = helper.getContainerDiv(event, null);
var tabs = component.find('tabpage');
for(idx = 0; idx < tabs.length; idx++)
{
tab = tabs[idx].elements[0];
$A.util.removeClass(tab, 'slds-active');
$A.util.removeClass(component.find(tab.children[0].getAttribute('aria-controls')), 'slds-show');
$A.util.addClass(component.find(tab.children[0].getAttribute('aria-controls')), 'slds-hide');
}
$A.util.addClass(clickedTab, 'slds-active');
$A.util.addClass(component.find(clickedTab.children[0].getAttribute('aria-controls')), 'slds-show');
$A.util.removeClass(component.find(clickedTab.children[0].getAttribute('aria-controls')), 'slds-hide');
}
})
Best Answer
Here's the solution: