Ad Code

Responsive Advertisement

New Customer Creation Page web component Vs Aura Component

AMUL BARANWAL March 02, 2020
Below Sample Code will help of Understanding web component Vs Aura Component Tags.

New Customer Creation:

3 Column Layout: Web Component:

<lightning-card class="slds-p-around_small" title="New Contact" icon-name="standard:contact" variant="base">
    <div slot="actions">
        <lightning-button class="slds-theme_brand" variant="brand" label="Save"></lightning-button>
    </div>
    <div slot="footer"><a target="_blank" class="slds-text-link" href="">View All</a></div>
    <div class="slds-card__body_inner">
        <div style="font-size: 0.8125rem;">
            <p>Please fill the firm Name and person Incharge Detail</p>
        </div>
        <lightning-layout class="slds-wrap" multiple-rows="true">
            <lightning-layout-item size="4">
                <lightning-input label="First Name" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning-input>
                <lightning-input label="Email" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="4">
                <lightning-input label="Last Name" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning-input>
                <lightning-input label="Mobile" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning-input>
            </lightning-layout-item>
            <lightning-input label="Firm Name" placeholder="Placeholder Text" type="text" variant="standard"></lightning-input>
        </lightning-layout>
        <lightning-file-upload label="Attachment" record-id=""></lightning-file-upload>
    </div>
</lightning-card>


Aura Component:

<lightning:card class="slds-p-around_small" title="New Contact" iconName="standard:contact" variant="base">
    <aura:set attribute="actions">
        <lightning:button class="slds-theme_brand" variant="brand" label="Save"></lightning:button>
    </aura:set>
    <aura:set attribute="footer"><a target="_blank" class="slds-text-link" href="">View All</a></aura:set>
    <div class="slds-card__body_inner">
        <div style="font-size: 0.8125rem;">
            <p>Please fill the firm Name and person Incharge Detail</p>
        </div>
        <lightning:layout class="slds-wrap" multipleRows="true">
            <lightning:layoutItem size="4">
                <lightning:input label="First Name" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning:input>
                <lightning:input label="Email" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning:input>
            </lightning:layoutItem>
            <lightning:layoutItem size="4">
                <lightning:input label="Last Name" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning:input>
                <lightning:input label="Mobile" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning:input>
            </lightning:layoutItem>
            <lightning:input label="Firm Name" placeholder="Placeholder Text" type="text" variant="standard"></lightning:input>
        </lightning:layout>
        <lightning:fileUpload label="Attachment" recordId=""></lightning:fileUpload>
    </div>
</lightning:card>




2 Column Layout:

Web Component:

<lightning-card class="slds-p-around_small" title="New Contact" icon-name="standard:contact" variant="base">
    <div slot="actions">
        <lightning-button class="slds-theme_brand" variant="brand" label="Save"></lightning-button>
    </div>
    <div slot="footer"><a target="_blank" class="slds-text-link" href="">View All</a></div>
    <div class="slds-card__body_inner">
        <div style="font-size: 0.8125rem;">
            <p>Please fill the firm Name and person Incharge Detail</p>
        </div>
        <lightning-layout class="slds-wrap" multiple-rows="true">
            <lightning-layout-item size="6">
                <lightning-input label="First Name" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning-input>
                <lightning-input label="Email" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item size="6">
                <lightning-input label="Last Name" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning-input>
                <lightning-input label="Mobile" placeholder="Placeholder Text" required="true" type="text" variant="standard"></lightning-input>
            </lightning-layout-item>
        </lightning-layout>
        <lightning-file-upload label="Attachment" record-id=""></lightning-file-upload>
    </div>
</lightning-card>



Reactions

Post a Comment

2 Comments

  1. Mohit Bansal3 March 2020 at 03:43

    Quick! Book Your Spot for Wednesday[4th March, 11 AM(IST) | 4 PM(GST) | 11:00 AM(EST)] WEBINAR on topic: How to Perform Bulk Operation in Salesforce using BOFC App?

    You'll learn
    How to Bulk Compare Multiple Profiles and Permission Sets and Export in XLS, Manage Record Types in Bulk, Clone Multiple Custom Fields and Objects.

    ReplyDelete
  2. Unknown15 March 2020 at 16:45

    Your Affiliate Money Making Machine is ready -

    And getting it set up is as simple as 1, 2, 3!

    It's super easy how it works...

    STEP 1. Tell the system which affiliate products you intend to promote
    STEP 2. Add push button traffic (this ONLY takes 2 minutes)
    STEP 3. See how the system explode your list and sell your affiliate products on it's own!

    So, do you want to start making profits??

    Check it out here

    ReplyDelete