Dynamic Lightning Input Form from JSON
Give your dynamic JSON for the input Form, We will give you the lightning component in 15 mins.
- Add N number of questions for each forms.
- The question can be any type, The component will render.
- Do you have dependent questions – The component render and rerender based on answer from parent question.
- Do you have regex validation, it will properly validate
- You can make any field as required and it will work
- The dependent question hierarchy can be upto N level, The component will work.
The complete component is ready, We just need to parse the Json to the component supported Json and i will promise that won’t take much time.
Give your dynamic JSON for the input Form, We will give you the lightning component in 15 mins.
- Add N number of questions for each forms.
- The question can be any type, The component will render.
- Do you have dependent questions – The component render and rerender based on answer from parent question.
- Do you have regex validation, it will properly validate
- You can make any field as required and it will work
- The dependent question hierarchy can be upto N level, The component will work.
The complete component is ready, We just need to parse the Json to the component supported Json and i will promise that won’t take much time.
Single Question Component
Controller JS for Single Question component
({
init : function(component, event, helper) {
var items = component.get("v.question");
var inpValue = component.getReference("v.inpValue");
console.log('items '+items.type);
if(items.type == 'radio'){
$A.createComponent(
"ui:outputText",
{
"value":items.label
},
function(newtext, status, errorMessage){
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
//body.push(newtext);
targetCmp.set("v.body", body);
var k = 0;
if(items.options.length == 2){
for(var j = 0; j < 2; j++){
$A.createComponent(
"lightning:input",
{
"label": items.options[j],
"type": items.type,
"name":items.label,
"aura:id":items.id+'_'+j,
"onchange":component.getReference('c.getvaluefromRadiobutton')
},
function(newtext, status, errorMessage){
if (status === "SUCCESS") {
var targetCmp = component.find('r0c'+k);
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
k++;
}
}
);
}
}else{
for(var j = 0; j < items.options.length; j++){
$A.createComponent(
"lightning:input",
{
"label": items.options[j],
"type": items.type,
"name":items.label,
"aura:id":items.id+'_'+j,
"onchange":component.getReference('c.getvaluefromRadiobutton')
},
function(newtext, status, errorMessage){
console.log('status more op '+status);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}
}
}
}
);
}else if(items.type == 'Picklist'){
console.log('pick list'+items.id);
$A.createComponent(
"lightning:combobox",
{
//"label":items.label,
"aura:id":items.id,
"options":component.getReference('v.options'),
"onchange":component.getReference('c.getPicklistValue')
},
function(newtext, status, errorMessage){
console.log('cpmbo '+status+' messag '+errorMessage);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}
else if(items.type == 'MultiCheckbox'){
$A.createComponent(
"ui:outputText",
{
"value":items.label
},
function(newtext, status, errorMessage){
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
//body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
for(var j = 0; j < items.options.length; j++){
$A.createComponent(
"lightning:input",
{
"label": items.options[j],
"type": 'Checkbox',
"name":items.label,
"aura:id":items.id+'_'+j,
"onchange":component.getReference('c.getvaluefromMultiCheckbox')
},
function(newtext, status, errorMessage){
console.log('status inp '+status);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}
}
else if(items.type == 'toggle'){
$A.createComponent(
"lightning:input",
{
"label": items.label,
"type": items.type,
"name":items.label,
//"required":items.required,
"maxlength":items.length,
"pattern":items.regex,
"placeholder":items.placeholder,
"aura:id":items.id,
"onchange":component.getReference('c.getCheckBoxValue')
},
function(newtext, status, errorMessage){
console.log('status togg '+status);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}
else if(items.type == 'number'){
$A.createComponent(
"lightning:input",
{
//"label": items.label,
"type": items.type,
"name":items.label,
//"required":items.required,
"maxlength":items.length,
"formatter":items.regex,
"class":'slds-input_borders',
"step":"0.01",
"aura:id":items.id,
"value":inpValue
},
function(newtext, status, errorMessage){
console.log('status inp num '+status);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}else{
$A.createComponent(
"lightning:input",
{
//"label": items.label,
"type": items.type,
"name":items.label,
//"required":items.required,
"maxlength":items.length,
"pattern":items.regex,
"placeholder":items.placeholder,
"aura:id":items.id,
"class":'slds-input_borders',
"value":inpValue
},
function(newtext, status, errorMessage){
console.log('status txt '+status);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}
},
getvaluefromRadiobutton : function(component, event, helper)
{
var fname = event.getSource().get("v.label");
component.set("v.inpValue", fname);
var items = component.get("v.question");
console.log('items '+items.id);
var opts = [];var depquestionid = [];var depIds = [];
for(var i =0 ; i < items.dependents.length; i++)
{
if(items.dependents[i].questionid)
depIds.push(items.dependents[i].questionid);
if(items.dependents[i].option == fname){
depquestionid.push(items.dependents[i].questionid);
}
}
var appEvent = $A.get("e.c:DepQuestion");
appEvent.setParams({
"answer" : fname, "questionIDs":depquestionid,
"options":opts, "type":"Radio", "depQIds":depIds
});
appEvent.fire();
},
getCheckBoxValue : function(component, event, helper){
var fname = event.getSource().get("v.checked");
component.set("v.inpValue", fname);
},
getvaluefromMultiCheckbox : function(component, event, helper){
var fname = event.getSource().get("v.label");
var existingvalue = component.get("v.inpValue");
if(existingvalue){
component.set("v.inpValue", existingvalue+','+fname);
}else{
component.set("v.inpValue", fname);
}
},
getPicklistValue : function(component, event, helper){
var fname = event.getSource().get("v.value");
component.set("v.inpValue", fname);
var items = component.get("v.question");
console.log('items '+items.id);
var opts = [];var depquestionid = [];var depIds = [];
if(items.dependents && items.dependents.length > 0)
for(var i =0 ; i < items.dependents.length; i++)
{
if(items.dependents[i].questionid)
depIds.push(items.dependents[i].questionid);
if(items.dependents[i].option == fname){
depquestionid.push(items.dependents[i].questionid);
if(items.dependents[i].options && items.dependents[i].options.length > 0){
for(var j = 0; j < items.dependents[i].options.length; j++){
opts.push({label: items.dependents[i].options[j], value: items.dependents[i].options[j] })
}
}
}
}
console.log('opts '+opts);
var appEvent = $A.get("e.c:DepQuestion");
appEvent.setParams({
"answer" : fname, "questionIDs":depquestionid,
"options":opts, "type":"Picklist", "depQIds":depIds
});
appEvent.fire();
}
})Parent component To bind all the Questions
Controller JS for Parent Component
({
init : function(component, event, helper) {
var items = component.get("v.question");
var inpValue = component.getReference("v.inpValue");
console.log('items '+items.type);
if(items.type == 'radio'){
$A.createComponent(
"ui:outputText",
{
"value":items.label
},
function(newtext, status, errorMessage){
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
//body.push(newtext);
targetCmp.set("v.body", body);
var k = 0;
if(items.options.length == 2){
for(var j = 0; j < 2; j++){
$A.createComponent(
"lightning:input",
{
"label": items.options[j],
"type": items.type,
"name":items.label,
"aura:id":items.id+'_'+j,
"onchange":component.getReference('c.getvaluefromRadiobutton')
},
function(newtext, status, errorMessage){
if (status === "SUCCESS") {
var targetCmp = component.find('r0c'+k);
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
k++;
}
}
);
}
}else{
for(var j = 0; j < items.options.length; j++){
$A.createComponent(
"lightning:input",
{
"label": items.options[j],
"type": items.type,
"name":items.label,
"aura:id":items.id+'_'+j,
"onchange":component.getReference('c.getvaluefromRadiobutton')
},
function(newtext, status, errorMessage){
console.log('status more op '+status);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}
}
}
}
);
}else if(items.type == 'Picklist'){
console.log('pick list'+items.id);
$A.createComponent(
"lightning:combobox",
{
//"label":items.label,
"aura:id":items.id,
"options":component.getReference('v.options'),
"onchange":component.getReference('c.getPicklistValue')
},
function(newtext, status, errorMessage){
console.log('cpmbo '+status+' messag '+errorMessage);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}
else if(items.type == 'MultiCheckbox'){
$A.createComponent(
"ui:outputText",
{
"value":items.label
},
function(newtext, status, errorMessage){
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
//body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
for(var j = 0; j < items.options.length; j++){
$A.createComponent(
"lightning:input",
{
"label": items.options[j],
"type": 'Checkbox',
"name":items.label,
"aura:id":items.id+'_'+j,
"onchange":component.getReference('c.getvaluefromMultiCheckbox')
},
function(newtext, status, errorMessage){
console.log('status inp '+status);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}
}
else if(items.type == 'toggle'){
$A.createComponent(
"lightning:input",
{
"label": items.label,
"type": items.type,
"name":items.label,
//"required":items.required,
"maxlength":items.length,
"pattern":items.regex,
"placeholder":items.placeholder,
"aura:id":items.id,
"onchange":component.getReference('c.getCheckBoxValue')
},
function(newtext, status, errorMessage){
console.log('status togg '+status);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}
else if(items.type == 'number'){
$A.createComponent(
"lightning:input",
{
//"label": items.label,
"type": items.type,
"name":items.label,
//"required":items.required,
"maxlength":items.length,
"formatter":items.regex,
"class":'slds-input_borders',
"step":"0.01",
"aura:id":items.id,
"value":inpValue
},
function(newtext, status, errorMessage){
console.log('status inp num '+status);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}else{
$A.createComponent(
"lightning:input",
{
//"label": items.label,
"type": items.type,
"name":items.label,
//"required":items.required,
"maxlength":items.length,
"pattern":items.regex,
"placeholder":items.placeholder,
"aura:id":items.id,
"class":'slds-input_borders',
"value":inpValue
},
function(newtext, status, errorMessage){
console.log('status txt '+status);
if (status === "SUCCESS") {
var targetCmp = component.find('dynCmp');
var body = targetCmp.get("v.body");
body.push(newtext);
targetCmp.set("v.body", body);
}
}
);
}
},
getvaluefromRadiobutton : function(component, event, helper)
{
var fname = event.getSource().get("v.label");
component.set("v.inpValue", fname);
var items = component.get("v.question");
console.log('items '+items.id);
var opts = [];var depquestionid = [];var depIds = [];
for(var i =0 ; i < items.dependents.length; i++)
{
if(items.dependents[i].questionid)
depIds.push(items.dependents[i].questionid);
if(items.dependents[i].option == fname){
depquestionid.push(items.dependents[i].questionid);
}
}
var appEvent = $A.get("e.c:DepQuestion");
appEvent.setParams({
"answer" : fname, "questionIDs":depquestionid,
"options":opts, "type":"Radio", "depQIds":depIds
});
appEvent.fire();
},
getCheckBoxValue : function(component, event, helper){
var fname = event.getSource().get("v.checked");
component.set("v.inpValue", fname);
},
getvaluefromMultiCheckbox : function(component, event, helper){
var fname = event.getSource().get("v.label");
var existingvalue = component.get("v.inpValue");
if(existingvalue){
component.set("v.inpValue", existingvalue+','+fname);
}else{
component.set("v.inpValue", fname);
}
},
getPicklistValue : function(component, event, helper){
var fname = event.getSource().get("v.value");
component.set("v.inpValue", fname);
var items = component.get("v.question");
console.log('items '+items.id);
var opts = [];var depquestionid = [];var depIds = [];
if(items.dependents && items.dependents.length > 0)
for(var i =0 ; i < items.dependents.length; i++)
{
if(items.dependents[i].questionid)
depIds.push(items.dependents[i].questionid);
if(items.dependents[i].option == fname){
depquestionid.push(items.dependents[i].questionid);
if(items.dependents[i].options && items.dependents[i].options.length > 0){
for(var j = 0; j < items.dependents[i].options.length; j++){
opts.push({label: items.dependents[i].options[j], value: items.dependents[i].options[j] })
}
}
}
}
console.log('opts '+opts);
var appEvent = $A.get("e.c:DepQuestion");
appEvent.setParams({
"answer" : fname, "questionIDs":depquestionid,
"options":opts, "type":"Picklist", "depQIds":depIds
});
appEvent.fire();
}
})Component Wrapper class:
public class CmpJson
{
public class Item implements Comparable{
public String id {get;set;}
public String label {get;set;}
public String type {get;set;}
public Integer length {get;set;}
public Boolean required {get;set;}
public Integer order {get;set;}
public String regex {get;set;}
public String placeholder {get;set;}
public String category {get;set;}
public String helpText {get;set;}
public List options {get;set;}
public Boolean isDepQuestion {get; set;}
public List dependents {get; set;}
public Integer compareTo(Object objToCompare)
{
return this.order > ((Item)objToCompare).order ? 1 : -1;
}
}
public class DependentPicklist{
public String option {get; set;}
public String questionid {get; set;}
public List options {get; set;}
}
public Integer status {get;set;}
public List- item {get;set;}
public static ComponentWrapper parse(String json) {
ComponentWrapper wrap = (ComponentWrapper) System.JSON.deserialize(json, ComponentWrapper.class);
return wrap;
}
}
Share
April 22, 2019
