function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Øyvind Borgersen 10Øyvind Borgersen 10 

Lightning component list checkbox field

Hi,

I've created a lightning component list to view some fields from case. One of this field is a checkbox field, but this appears as true/false instead of the checkbox. How can I add the checkbox tick box with value in the list?

<aura:iteration items="{!v.caselist}" var="cas">
<tr>
<th scope="row">
<div class="slds-truncate" title="{!cas.Id}">{!cas.Id}</div>
</th>
<td>
<div class="slds-truncate" title="{!cas.CaseNumber}">{!cas.CaseNumber}</div>
</td>
<td>
<div class="slds-truncate" title="{!cas.Account.Name}">{!cas.Account.Name}</div>
</td>
<td>
<div class="slds-truncate" title="{!cas.Contact.Name}">{!cas.Contact.Name}</div>
</td>
<td>
<div class="slds-truncate" title="{!cas.Status}">{!cas.Status}</div>
</td>
<td>
<div class="slds-truncate" title="{!cas.CreatedDate}">{!cas.CreatedDate}</div>
</td>
<td>
<div class="slds-truncate" title="{!cas.CaseCloned__c}" type="boolean">{!cas.CaseCloned__c}
</div>
</td>
<td>
<form class="clone-form" onsubmit="{!c.cloneCaseAction}">
<input type="hidden" value="{!cas.Id}" class="clone-name" />
<!-- Use a Lightning Base Component To display an icon next to the label -->
<lightning:button label="Clone" iconName="utility:download" iconPosition="left"
variant="brand" type="submit" />
</form>
</td>
<td>
<form class="goto-form" onsubmit="{!c.gotoCase}">
<input type="hidden" value="{!cas.Id}" class="goto-name" />
<!-- Use a Lightning Base Component To display an icon next to the label -->
<lightning:button label="GoTo" iconPosition="left" variant="Success" type="submit" />
</form>
</td>
</tr>
</aura:iteration>

 
Maharajan CMaharajan C
Hi,

You can use the ui:inputCheckbox or <lightning:input type="checkbox"/> tags.

ui:inputCheckbox :
https://developer.salesforce.com/docs/component-library/bundle/ui:inputCheckbox/example

<lightning:input type="checkbox"/> :
https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example#lightningcomponentdemo:exampleInputCheckbox

Try the below code:  
               
<aura:iteration items="{!v.caselist}" var="cas">
<tr>
<th scope="row">
<div class="slds-truncate" title="{!cas.Id}">{!cas.Id}</div>
</th>
<td>
<div class="slds-truncate" title="{!cas.CaseNumber}">{!cas.CaseNumber}</div>
</td>
<td>
<div class="slds-truncate" title="{!cas.Account.Name}">{!cas.Account.Name}</div>
</td>
<td>
<div class="slds-truncate" title="{!cas.Contact.Name}">{!cas.Contact.Name}</div>
</td>
<td>
<div class="slds-truncate" title="{!cas.Status}">{!cas.Status}</div>
</td>
<td>
<div class="slds-truncate" title="{!cas.CreatedDate}">{!cas.CreatedDate}</div>
</td>
<td>
<div class="slds-truncate">
<ui:inputCheckbox aura:id="cloned" label="CaseCloned?" value="{!cas.CaseCloned__c}"/>
</div>
</td>
<td>
<form class="clone-form" onsubmit="{!c.cloneCaseAction}">
<input type="hidden" value="{!cas.Id}" class="clone-name" />
<!-- Use a Lightning Base Component To display an icon next to the label -->
<lightning:button label="Clone" iconName="utility:download" iconPosition="left"
variant="brand" type="submit" />
</form>
</td>
<td>
<form class="goto-form" onsubmit="{!c.gotoCase}">
<input type="hidden" value="{!cas.Id}" class="goto-name" />
<!-- Use a Lightning Base Component To display an icon next to the label -->
<lightning:button label="GoTo" iconPosition="left" variant="Success" type="submit" />
</form>
</td>
</tr>
</aura:iteration>

Thanks,
Maharajan.C