Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dynamic Input Field Lightning Component
<aura:component >
<aura:attribute name="name" type="String" default=""/>
<aura:attribute name="dynamicSetting" type="String" default="" />
{!v.body}
</aura:component>
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:dependency resource="c:DynamicInputField" />
<aura:attribute name="setting" type="String" default="" />
<div class="slds-form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size_1-of-2">
<c:DynamicPicklistMenu menu="Date Range,Batch Expiration,Order Date,Order Number,Material,Batch Id" menuPress="{!c.menuChange}" name="Search By"/>
</div>
<div class="slds-form-element slds-size_1-of-2" aura:id="dynamicInputBox">
</div>
<h2>
<span aura:id="dynamicLabel" class="dynamicLabel slds-badge slds-hide">{!v.setting}</span>
</h2>
</div>
</div>
</aura:component>
({
menuChange :function(component, event, helper){
var option = event.getSource().get("v.value");
var label = component.find("dynamicLabel");
$A.util.addClass(label, "slds-hide");
helper.handleMenuItems(component, option);
},
queryInputChange : function(component, event, helper){
//show/hide label based on selection and pass value back to controller
//code to controller ommitted here
var choice = event.getSource().get("v.value");
var type = event.getSource().get("v.name");
var label = component.find("dynamicLabel");
component.set("v.setting", choice + ' days');
if(type === 'Date Range' || type === 'Batch Expiration'){
$A.util.removeClass(label,"slds-hide");
}
console.log('value from dynamic ' + choice);
}
})
({
handleMenuItems : function(component, type){
//get dynamic input div and clear contents
console.log('type ' + type);
var targetCmp = component.find('dynamicInputBox');
targetCmp.set("v.body",[]);
//switch statement takes type of query and sets input accordingly
//there are 3 possible input types in this scenario: text, date picker and date range
//which uses a slider to pick between 30 and 365 days
//TODO make this more concise to elliminate duplicate code
switch(type){
case 'Material' :
case 'Order Number' :
case 'Batch Id' :
console.log('in 1');
$A.createComponents([
["c:DynamicInputField",
{
"name": type + " Input Field",
}],
["lightning:input",
{
"name" : type,
"label": type,
"onchange":component.getReference("c.queryInputChange")
}]
],
function(components, status, errorMessage){
targetCmp = component.find('dynamicInputBox');
var targBody = targetCmp.get('v.body');
var outer = components[0];
var inner = components[1];
outer.set("v.body",inner);
targBody.push(outer);
targetCmp.set('v.body',targBody);
});
break;
case 'Order Date' :
console.log('in 2');
$A.createComponents([
["c:DynamicInputField",
{
"name": type + " Input Field",
}],
["ui:inputDate",
{
"aura:id": "findableAuraId",
"label": type,
"name" : type,
"displayDatePicker":"true",
"onchange":component.getReference("c.queryInputChange")
}]
],
function(components, status, errorMessage){
targetCmp = component.find('dynamicInputBox');
var targBody = targetCmp.get('v.body');
var outer = components[0];
var inner = components[1];
outer.set("v.body",inner);
targBody.push(outer);
targetCmp.set('v.body',targBody);
});
break;
case 'Date Range' :
case 'Batch Expiration' :
console.log('in 3');
$A.createComponents([
["c:DynamicInputField",
{
"name": type + " Input Field",
}],
["lightning:input",
{
"type" : "range",
"default" : "5",
"aura:id" : 'dynamicInput',
"class" : "dateRange",
"name" : type,
"min" : "5",
"step": "5",
"max" : "365",
"label": type,
"value":"",
"onchange":component.getReference("c.queryInputChange")
}]
],
function(components, status, errorMessage){
targetCmp = component.find('dynamicInputBox');
var targBody = targetCmp.get('v.body');
var outer = components[0];
var inner = components[1];
outer.set("v.body",inner);
targBody.push(outer);
targetCmp.set('v.body',targBody);
});
break;
default:
console.log('default ' + type);
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.