0

I am trying to create a lightning component that would render a form based on a picklist selection. I read this post below and was able to kick start my development

How to use fieldsets with Lightning?

It was a great sample to start what I am trying to do. However, what I found here is that every field is being created as a separate row and being pushed on the front end. What if I want to accommodate more than 1 field in one row and wrap them in aura specific markups like <fieldset> and assign lightning style classes to the entire markup to align it more with the lightning look and feel? Is there a possible way of doing it?

I am talking of a markup like below.

<div aura:id="form" class="slds">
<div class="slds-box slds-theme--shade">
    <fieldset class="slds-form--compound">
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="CT">Field 1</label>
            <input class="slds-input" type="text"/>
        </div>
    </fieldset>
    <fieldset class="slds-form--compound">
        <div class="form-element__group">
            <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="CDF">Field 2</label>
                    <input class="slds-input" type="date"/>
                </div>
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="CDT">Field 3</label>
                    <input class="slds-input" type="date"/>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="slds-form--compound">
        <div class="form-element__group">
            <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="CS">Field 4</label>
                    <input class="slds-input" type="text"/>
                </div> 
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="MNOD">Field 5</label>
                    <input class="slds-input" type="number"/>
                </div>
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="Mat">Field 6</label>
                    <input class="slds-input" type="text"/>
                </div>
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="Cer">Field 7</label>
                    <input class="slds-input" type="text"/>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="slds-form--compound">
        <div class="slds-form-element slds-size--1-of-2">
            <label class="slds-form-element__label" for="ID">Field 8</label>
            <input class="slds-input" type="text"/>
        </div>
    </fieldset>
    <fieldset class="slds-form--compound">
        <div class="form-element__group">
            <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="NODD">Field 9</label>
                    <input class="slds-input" type="number"/>
                </div>
                <div class="slds-form-element slds-size--1-of-2">
                    <label class="slds-form-element__label" for="NODsD">Field 10</label>
                    <input class="slds-input" type="number"/>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="slds-form--compound">
        <div class="slds-form-element">
            <div class="slds-align--absolute-center">
                <ui:button class="slds-button slds-button--neutral slds-button--brand" label="Submit" />
                <ui:button class="slds-button slds-button--neutral" label="Cancel" />
            </div>
        </div>
    </fieldset>
</div>

I want to display my field set in this type of a wrapping which allows me to give it a standard lightning look and feel.

1

There are two different ways to approach this, depending on your use case for your implementation <fieldset> on your page.

Multiple FieldSets: If you are using <fieldset> to define logical groups of inputs, you may wish to use different FieldSets on the object (one per each <fieldset> in your page). This allows flexibility to define specific fields to include in each section, and would mimic the "section" concept on a standard page layout.

Split a Single FieldSet: When your Lightning Component initializes, you may break apart the FieldSet into separate arrays based on a fixed number of fields you wish to display in a <fieldset>. I wouldn't recommend this approach though, preferring the use of the slds-grid classes and the ability to define layout based on the --size-1-of-N notation.

It'd be great to know what you did if you already have implemented this, too!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.