Creating Customizable Dynamic Input Controls

Adding Customizable Input Controls to an Application

Customizing software can be hard on your staff, and your client’s billable hours. To remove some of that stress, we code our administrative functions to make it possible for clients to view certain pages of an application where they may want to add/edit/remove input controls.

Qn-field-labelUsing Razor MVC, we were able to add switches to show/hide each field and even change the labeling. Below is an example of how we add a switch to a field.  We define every field in the application in its own class (QnField). The Get method will check the properties of that field specific to the configuration set up by the administrator. The Show() property will display the HTML if true, or hide it if false.  The Label() property will perform a switch with the default text in the parameter, which any text the administrator may have assigned.

database-image

If a customer wanted to add a custom field on the page, the administrator can select the specific page(s), label the field, and assign its input type. Below is an example of a partial view that checks the field’s input type and then places the correct control on the page. We use common prefix tags for each control type, and then append the custom field ID number to complete the field identification.

customize-field

We handle the configuration in the database with the table below, along with other reference tables.  In addition to saving the value, we reference the exact parent record for the instance that it was saved on.

modfied-id-saved-in-database

Creating dynamic controls does require quite a bit of setup and design, but the control you can give your clients is worth the time spent.