Insertion Form by using Lightning:recordEditForm

Insertion Form by using Lightning:recordEditForm  

Lightning:recordEditForm

Lightning Component:- Skill_Rating_Comp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="reloadForm" type="boolean" default="true" />
    <lightning:notificationsLibrary aura:id="notifLib"/> 
    <!--Component Start-->
    <div class="slds-modal__header slds-clearfix " >
                <div class="slds-media__figure slds-float_left"  >           
                    <img src="{!$Resource.appiconsp}"/> 
                </div>
          
        <div class="slds-col slds-size_2-of-3"><br/>
                <span style="font-size:20px;" ><b>Assessment Form</b></span>
            </div> 
      </div>
    
    
     <div class="slds-m-left_large slds-m-right_large slds-m-top_small slds-m-bottom_xx-large">
            <article class="slds-card">
    <div class="slds-m-around_xx-large">
        <lightning:recordEditForm objectApiName="Skill_Rating__c"
                                  aura:id="accForm"
                                  onload="{!c.handleOnLoad}"
                                  onsubmit="{!c.handleOnSubmit}"
                                  onsuccess="{!c.handleOnSuccess}"
                                  onerror="{!c.handleOnError}">
            <lightning:messages />
            
            
            
            <aura:if isTrue="{!v.reloadForm}">
                
                <p class="slds-p-horizontal_small">
                    <!-- Forming a grid of two equal columns -->
                    <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#630151!important;color:#fff!important9; color:white; font-size: 17px;text-align:left;">
                        <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large">Technical Skills</p></b>
                    </div>
                    <div class="slds-grid">  
                        <div class="slds-col slds-size_1-of-3">
                            <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#FC8389!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                                <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Research Skills</center></p></b>
                            </div>   <br/>  
                            <lightning:inputField fieldName="eResearch_Skills_self__c"/><br/>
                            <lightning:inputField fieldName="Note_Taking_self__c"/><br/>
                            <lightning:inputField fieldName="Knowledge_of_Law_self__c"/><br/>
                            <lightning:inputField fieldName="Knowledge_of_Cases_self__c" /><br/>
                        </div>
                        
                        <div class="slds-col slds-size_2-of-3">
                            <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#FC8389!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                                <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Drafting Skills</center></p></b>
                            </div> 
                            <div class="slds-grid"> 
                                <div class="slds-col slds-size_3-of-6">
                                    <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#FC8389!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                                        <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>General</center></p></b>
                                    </div> 
                                    <lightning:inputField fieldName="Syntax_and_Grammer_self__c"/>
                                    <lightning:inputField fieldName="Interpretation_self__c"/>
                                    <lightning:inputField fieldName="Assimilate_self__c"/>
                                    <lightning:inputField fieldName="Factual_Correctness_self__c" />
                                    <lightning:inputField fieldName="Error_free_self__c" />  
                                </div>
                                
                                <div class="slds-col slds-size_3-of-6">
                                    <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#FC8389!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                                        <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Technical Drafting of:</center></p></b>
                                    </div>
                                    <lightning:inputField fieldName="Notice_self__c"/>
                                    <lightning:inputField fieldName="Petition_self__c"/>
                                    <lightning:inputField fieldName="Affidavit_self__c"/>
                                    <lightning:inputField fieldName="Written_Synopsis_self__c" />
                                    <lightning:inputField fieldName="Case_Summaries_self__c" /> 
                                    <lightning:inputField fieldName="Judgement_Summaries_self__c" /> 
                                    <lightning:inputField fieldName="Articles_self__c" /> 
                                    <lightning:inputField fieldName="Agreements_self__c" /> 
                                    <lightning:inputField fieldName="Client_Solution_Note_self__c" /> 
                                </div></div>
                        </div>
                    </div>
                    <aura:set attribute="else">
                        Saving...
                    </aura:set>
                </p>

                <!-- 2nd record -->
                <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#630151!important;color:#fff!important9; color:white; font-size: 17px;text-align:left;">
                    <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large">Personality</p></b>
                </div>
                <div class="slds-grid">  
                    <div class="slds-col slds-size_1-of-3">
                        <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#FC8389!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                            <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Team Player</center></p></b>
                        </div>   <br/>
                        <lightning:inputField fieldName="Reliability_self__c"/><br/>
                        <lightning:inputField fieldName="Mentoring_self__c"/><br/>
                        <lightning:inputField fieldName="Helping_others_self__c"/><br/>
                        <lightning:inputField fieldName="Knowledge_of_Cases_self__c" /><br/>
                    </div>
                    
                    <div class="slds-col slds-size_1-of-3">
                        <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#FC8389!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                            <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Personal</center></p></b>
                        </div>   
                        <lightning:inputField fieldName="Dilligent_self__c"/><br/>
                        <lightning:inputField fieldName="Willingness_to_learn_self__c"/><br/>
                        <lightning:inputField fieldName="Ownership_of_work_self__c"/><br/>
                        <lightning:inputField fieldName="Adhering_of_timelines_self__c" /><br/>
                        <lightning:inputField fieldName="Attitude_self__c" /><br/>
                        <lightning:inputField fieldName="Proactive_self__c" /><br/>
                    </div>
                    
                    <div class="slds-col slds-size_1-of-3">
                        <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#FC8389!important;color:#fff!important9; color:black; font-size: 11px;text-align:left;">
                            <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large"><center>Client management skills</center></p></b>
                        </div>   
                        <lightning:inputField fieldName="Power_of_Persuation_self__c"/>    
                        <lightning:inputField fieldName="Friendly_and_Personal_attitude_self__c"/>
                        <lightning:inputField fieldName="Humble_yet_Confident_self__c" />
                        <lightning:inputField fieldName="Aware_of_client_needs_self__c" />
                        <lightning:inputField fieldName="Ability_to_use_positive_language_self__c" />
                        <lightning:inputField fieldName="Goal_oriented_focus_self__c" />
                    </div>
                </div>
                <!-- 3rd record -->
                <div class="slds-box slds-box_xx-small  slds-m-top_medium slds-m-bottom_xx-small" style="background-color:#630151!important;color:#fff!important9; color:white; font-size: 17px;text-align:left;">
                    <b><p class="slds-m-left_x-small slds-m-left_large slds-m-right_large">Productivity</p></b>
                </div>
                <div class="slds-grid">  
                    <div class="slds-col slds-size_1-of-3">
                        <lightning:inputField fieldName="Billable_Hours_self__c"/>
                    </div>
                    <div class="slds-col slds-size_1-of-3">
                        <lightning:inputField fieldName="Non_Billable_Hours_self__c"/>
                    </div>
                </div>               
            </aura:if><br/>
            <div class="slds-align_absolute-center" style="height:5rem">
                <lightning:button variant="brand" type="submit" name="save" label="Save" />
            </div>
        </lightning:recordEditForm>
    </div>
         </article>
    </div>
    <!--Component End-->
</aura:component>

Lightning Application:- 

<aura:application access="global" extends="force:slds" >
    <c:Skill_Rating_Comp />
</aura:application>

Output:-