function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Alfredo OrnelasAlfredo Ornelas 

Lightning Component - Entry form

I'm new to code, can someone help and give me an idea how I can create an entry form as below with Lightning Component?
User-added image
Thanks!
Best Answer chosen by Alfredo Ornelas
Deepali KulshresthaDeepali Kulshrestha
Hi Alfredo,
Please go through the following code as it may assist you in solving the problem:
Component:
<aura:component>
<div>
    <div>
        <lightning:layout>
            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="12" largeDeviceSize="12">
                <lightning:layout>
                    <lightning:layoutItem size="6" largeDeviceSize="6" mediumDeviceSize="6" smallDeviceSize="6">
                        <lightning:select name="select" label="Month" value="" aura:id="Journal">
                            <option >Select a month</option>
                            <aura:iteration items="" var="marFi">
                                <option value="{!marFi.value}">{!marFi.label}</option>
                            </aura:iteration>
                        </lightning:select>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6" largeDeviceSize="6" mediumDeviceSize="6" smallDeviceSize="6">
                        <lightning:select name="select" label="Week" value="" aura:id="Journal">
                            <option >Select a week</option>
                            <aura:iteration items="" var="marFi">
                                <option value="{!marFi.value}">{!marFi.label}</option>
                            </aura:iteration>
                        </lightning:select>
                    </lightning:layoutItem>
                </lightning:layout>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</div>
</aura:component>



And for adding the table dynamically in your component you can go through the following link:
http://sfdcmonkey.com/2017/08/09/add-delete-rows-dynamic/

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha 

All Answers

Deepali KulshresthaDeepali Kulshrestha
Hi Alfredo,
Please go through the following code as it may assist you in solving the problem:
Component:
<aura:component>
<div>
    <div>
        <lightning:layout>
            <lightning:layoutItem size="12" smallDeviceSize="12" mediumDeviceSize="12" largeDeviceSize="12">
                <lightning:layout>
                    <lightning:layoutItem size="6" largeDeviceSize="6" mediumDeviceSize="6" smallDeviceSize="6">
                        <lightning:select name="select" label="Month" value="" aura:id="Journal">
                            <option >Select a month</option>
                            <aura:iteration items="" var="marFi">
                                <option value="{!marFi.value}">{!marFi.label}</option>
                            </aura:iteration>
                        </lightning:select>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6" largeDeviceSize="6" mediumDeviceSize="6" smallDeviceSize="6">
                        <lightning:select name="select" label="Week" value="" aura:id="Journal">
                            <option >Select a week</option>
                            <aura:iteration items="" var="marFi">
                                <option value="{!marFi.value}">{!marFi.label}</option>
                            </aura:iteration>
                        </lightning:select>
                    </lightning:layoutItem>
                </lightning:layout>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</div>
</aura:component>



And for adding the table dynamically in your component you can go through the following link:
http://sfdcmonkey.com/2017/08/09/add-delete-rows-dynamic/

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha 
This was selected as the best answer
Alfredo OrnelasAlfredo Ornelas
Thank you Deepali!