Dynamic Input Field Lightning Component

For a project I am currently working on I wanted to implement a dynamic input field that set it’s body based on the user’s selection of the type of query they are making. There are 6 possible fields the user can query on and these 6 fields can be mapped to 3 types of queries — Date Picker, Date Rage and Input Text. Using what I have learned in dev 601 with Mike Topalovich (kudos again to Mike), I have been actively pairing down and generic-izing (?) every component I build. So this solution needed to be both generic to the given situation and also flexible enough to accommodate the variety of options needed. I ended up creating a simple component to hold the dynamic input field which has optional parameters of “name” and “dynamicSetting”. I wasn’t able to pass the change value to the dynamicSetting on the created component so I have an attribute in the parent that controls the colored label showing the value of the date slider. This is also the value that would be passed to the APEX controller to execute the query.

The main controller passes the value from the onclick event to the helper and runs through a Switch statement mapping the type to the proper input field body. Then the helper sets the body of the dynamic input field accordingly. I declare the dynamicInputField.cmp as a dependency when I load the parent component to avoid trips to the server. I am pretty happy with the result and my only ToDo is minimize the code within the Switch statement to reduce what feels like duplicative javascript. Here are the views of the 3 possible input fields:

Leave a Reply