Sitecore Forms - Custom control with dropdown of input controls

Question

I've been tasked with creating a custom label control for Sitecore Forms. I've built the control, and it is working fine. One of the requirements is to allow content editors to associate the custom control with another existing input control on the form. The html contains a "for" property that I can use to associate the label with an input control on the form. My question is, how can I create a dropdown list property that contains a list of input controls for the content editor to choose from?

In the core database, there's a template for creating a property as a dropdown list called FormDropList Parameters. That template has a 'DynamicData' property, so I'm guessing this is where I would start, but I dont know where to go from there.

Answer 1

Since I couldn't figure out how to get a list of the existing controls on the form page, instead I came up with a workaround. I created a 'For' property as a textbox on the label control. A content editor could select the name of the input control to associate the label with and paste it in the 'For' property of the label. In the example below, totalAmount is the field name property of a number input control.

Once the totalAmount input box gets rendered on the page, it looks similar to this. Notice the data-sc-field-name="totalAmount" property. This tells us what the field name property is of this input control in the form designer:

<input id="fxb_5da9e730-f3c7-410c-ad93-20bef6eb2af2_Fields_55686306-bda7-4000-814e-f1b7c0a4fff5__Value" name="fxb.5da9e730-f3c7-410c-ad93-20bef6eb2af2.Fields[55686306-bda7-4000-814e-f1b7c0a4fff5].Value" class="totalAmount" type="text" value="0" maxlength="255" placeholder="" data-sc-tracking="True" data-sc-field-name="totalAmount" data-sc-field-key="20618B049F754C52848B4A584C651B66" />

Once we have the name given in the form designer, and the id/name properties that get rendered by Sitecore (based on the guid of the form and guid of the control), I could write a mapping function in jquery that gets executed when the document is ready. Here is the code for that function:

function mapDataScFieldNameToControlIds() {
    // Get a reference to the form
    var $form = $('#modal').parents("form");

    // Process each <label> control on the form
    $form.find("label").each(function () {
        // Grab the "for=" attribute of the <label> (e.g. <label for="txtFirstName"></label>)
        var forValue = $(this).attr("for");

        // Get a list of all input fields on the form where the attribute matches the "for"
        var inputFields = $form.find("input[data-sc-field-name='" + forValue + "']");

        // Verify we found at least one input field
        if (inputFields.length > 0) {
            // Reset the label's "for" attribute to use the actual id of the input control
            $(this).attr("for", inputFields[0].id);
        }
    });
}