EP-29 | Use Multiple Templates in Lightning Web Components | LWC Stack ☁️⚡️

Kapil July 24, 2021

 

 LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together !

Please check complete code below from LWC Stack EP-29

template1.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <lightning-card title="Multiple Tempaltes" icon-name="custom:custom19">
    <div class="slds-var-m-around_medium">
      <p>Template One</p>
      <img src={sflogo1} alt="logo" />
      <p class="slds-var-m-vertical_small">
        <lightning-button
          label="Switch to Templates 1"
          onclick={show1}
        ></lightning-button>
        <lightning-button
          label="Switch to Templates 2"
          onclick={show2}
        ></lightning-button>
        <lightning-button
          label="Switch to Templates 3"
          onclick={show3}
        ></lightning-button>
      </p>
    </div>
  </lightning-card>
</template>
template2.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <lightning-card title="Multiple Tempaltes" icon-name="custom:custom19">
    <div class="slds-var-m-around_medium">
      <p>Template Two</p>
      <img src={sflogo2} alt="logo" />
      <p class="slds-var-m-vertical_small">
        <lightning-button
          label="Switch to Templates 1"
          onclick={show1}
        ></lightning-button>
        <lightning-button
          label="Switch to Templates 2"
          onclick={show2}
        ></lightning-button>
        <lightning-button
          label="Switch to Templates 3"
          onclick={show3}
        ></lightning-button>
      </p>
    </div>
  </lightning-card>
</template>

template3.html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <lightning-card title="Multiple Tempaltes" icon-name="custom:custom19">
    <div class="slds-var-m-around_medium">
      <p>Template Three</p>
      <img src={sflogo3} alt="logo" />
      <p class="slds-var-m-vertical_small">
        <lightning-button
          label="Switch to Templates 1"
          onclick={show1}
        ></lightning-button>
        <lightning-button
          label="Switch to Templates 2"
          onclick={show2}
        ></lightning-button>
        <lightning-button
          label="Switch to Templates 3"
          onclick={show3}
        ></lightning-button>
      </p>
    </div>
  </lightning-card>
</template>

Javascript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { LightningElement } from "lwc";
import template1 from "./template1.html";
import template2 from "./template2.html";
import template3 from "./template3.html";

import salesforce1 from "@salesforce/resourceUrl/salesforce1";
import salesforce2 from "@salesforce/resourceUrl/salesforce2";
import salesforce3 from "@salesforce/resourceUrl/salesforce3";

export default class SwitchTemplates extends LightningElement {
  showTemplate = "1";

  sflogo1 = salesforce1;
  sflogo2 = salesforce2;
  sflogo3 = salesforce3;

  render() {
    if (this.showTemplate == "1") return template1;
    else if (this.showTemplate == "2") return template2;
    else if (this.showTemplate == "3") return template3;
  }

  show1() {
    this.showTemplate = "1";
  }
  show2() {
    this.showTemplate = "2";
  }
  show3() {
    this.showTemplate = "3";
  }
}




Checkout complete tutorial video below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)
Tags:

Post a Comment

2 Comments

  1. KapilNovember 13, 2022 at 3:36 AM

    In that case you have to keep your child html in the parent one as a child component and maintain the rendering using template if

    ReplyDelete
  2. codeMay 29, 2023 at 6:35 AM

    Hi sir, how to integrate other website like google form if the person enters the information and it automatically save as a record in salesforce without using zappier

    ReplyDelete