October, 2016
Cascading dropdownlist
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<apex:page controller="parentchildController2"> <apex:form > <br/> <apex:pageBlock id="pb" title="Cascading dropdownlist"> ParentID Selected: {!parentValue} <br/> Child Id Selected: {!contactValue} <br/> <apex:selectList value="{!parentValue}" size="1" style="width:175px;"> <apex:selectOptions value="{!ParentOptions}" /> <apex:actionSupport event="onchange" reRender="pb" /> </apex:selectList> <br/><br/> <apex:selectList value="{!contactValue}" size="1" id="contacts" style="width:175px;"> <apex:selectOptions value="{!contactOptions}"/> <apex:actionSupport event="onchange" reRender="pb" /> </apex:selectList> </apex:pageBlock> </apex:form> </apex:page> |
Controller:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
public class parentchildController2 { public String contactValue {get;set;} public List<SelectOption> getcontactOptions() { SelectOption[] contactOptions = new SelectOption[]{}; contactOptions.add(new SelectOption('--select--','--select--')); for (Contact contact:[select Id, Name from Contact where AccountId =: parentValue ORDER BY NAME]) { contactOptions.add(new SelectOption(contact.Id,contact.Name)); } countChild = contactOptions.size(); return contactOptions; } public Integer countChild {get;set;} public String parentValue {get; set;} // account select options for the opportunities public List<SelectOption> getParentOptions() { List<SelectOption> options = new List<SelectOption>(); options.add(new SelectOption('--select--','--select--')); for (Account record : [select Id, Name from Account LIMIT 100]) { options.add(new SelectOption(record.Id,record.Name)); } return options; } } |
Favorite
Dynamically Showing or Hiding Markup
Link Use CSS to toggle markup visibility. You could use the tag to do the same thing but we recommend using CSS as it’s the more standard approach. This example uses $A.util.toggleClass(cmp, ‘class’) to toggle visibility of markup.
|
1 2 3 4 5 |
<!--c:toggleCss--> <aura:component> <ui:button label="Toggle" press="{!c.toggle}"/> <p aura:id="text">Now you see me</p> </aura:component> |
|
1 2 3 4 5 6 7 |
/*toggleCssController.js*/ ({ toggle : function(component, event, helper) { var toggleText = component.find("text"); $A.util.toggleClass(toggleText, "toggle"); } }) |
|
1 2 3 4 |
/*toggleCss.css*/ .THIS.toggle { display: none; } |
Favorite