1

Currently have a modal parent component. Inside of the content section of the modal I have 3 screens that are called via templates, all on separate templates. I am trying to get my 2nd screen to have the 3rd screen appear by pressing a button on it. IE if:true{isButtonPressedOnSecondScreen} then have 3rd screen appear and change the footer. I am getting stuck because I am not sure how to do this. I have tried using @api and @track but have not had any success with methods or variables. I also tried calling the 3rd screen inside of the second one which works, but I cannot get the footer of the parent to change. Any suggestions on how I would be able to do this? EDIT: added code

modal.html (just showing content and footer templates):

<template if:true={searchScreen}>
<c-search-screen></c-search-screen>
</template>
<template if:true={searchResults}>
<c-search-results></c-search-results>
</template>
<template if:true={searchDetails}>
<c-search-details></c-search-details>
</template>
<!--content above-->
<!-- footers below -->
<template if:true={searchScreen}>
<footer class="slds-modal__footer">
                     <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                     <button class="slds-button slds-button_brand" onclick={showSearchResults} title="search">Search</button>
                 </footer>
</template>

<template if:true={searchResults}>
<footer class="slds-modal__footer slds-modal__footer_directional">
                     <button class="slds-button slds-button_neutral" onclick={showSearchScreen} title="Refine Search">Refine Search</button>
                     <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                     <button class="slds-button slds-button_brand" onclick={addPeople} title="Add">Add</button>
                 </footer>
</template>

<template if:true={searchDetails}>
<footer class="slds-modal__footer slds-modal__footer_directional">
                     <button class="slds-button slds-button_neutral" onclick={showSearchResults} title="See Results">See Results</button>
                     <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                     <button class="slds-button slds-button_brand" onclick={addPeople} title="add">Add</button>
                 </footer>
</template>

modal.js:

import { LightningElement, tack } from 'lwc';

export default class SearchResults exteends LightningElement{
     @track searchScreen = false;
     @track searchResults = false;
     @track searchDetails = false;
     
     showSearchScreen(){
         this.searchScreen = true;
         this.searchResults = false;
     }
     showSearchDetails(){
         this.searchResults = true;
         this.searchDetails = false;
         this.searchScreen = false;
     }
     showSearchResults(){
         this.searchDetails = true;
         this.searchResults = false;
     }
}

searchResults.js:

import { LightningElement, tack, api } from 'lwc';

export default class SearchResults exteends LightningElement{
     @track clickedViewDetails = false;
     
     get options() {
         return [{label: '', value: 'option1'}];
     @api showDetails(){
         this.clickedViewDetails = true;
     }
}
1
  • Realistically trying to have showDetails() from searchResults.js/searchResults.html bubble up to the modal.html/modal.js files to track the button usage of it. So when clicked it can be toggled from from false to true or true to false – Tristan Berger May 26 at 19:13
1

If I understand the problem you need search results to communicate its state with the Modal...

First, you don't need track anymore unless you are working with objects.

API is to communicate from parent to child and a custom event can communicate from child to parent.

below is some sample code where I created three screens and used a custom event in screen Two to communicate to the parent that if it should render screen3.

screen1 HTML

<template>
    <h1>I am screen 1</h1>
    <template if:true={screen2}>
        <c-screen2 ondoit={handleDoIt} ></c-screen2>
    </template>
    <template if:true={screen3}>
        <c-screen3 ></c-screen3>
    </template>

screen2 HTML

<template>
    <h1>I am screen 2</h1>
    <button onclick={handleClick}>Click me</button>
</template>

When the button in clicked in screen2 it calls the event handler handleClick(). In the event handler, we are going to dispatch a custom event that I named doit.

export default class Screen2 extends LightningElement {
    @api screen2
    handleClick(){
        console.log('click');
        const custom = new CustomEvent('doit');
        this.dispatchEvent(custom);
    }

}

If you look at the HTML in screen1 you can see that the host has a property of 'ondoit' and that calls the handleDoIt method in screen1.

so now back to our screen1 JS file. The handleDoIt method is toggling the value of screen3. So when the custom event happens on screen two. It is handled by the parent screen1. And the parent sets the value of the property screen3. This is a public property decorated with API on the screen3 component and switches its rendering on and off.

export default class Screen1 extends LightningElement {   
    screen3;
    handleDoIt(event) {
        this.screen3 ? this.screen3 = false : this.screen3 = true;
    }
}

here is the JS file in screen3.

export default class Screen3 extends LightningElement {
 @api screen3;
}
4
  • 1
    sure, let me add my code in a moment. – Tristan Berger May 26 at 18:48
  • 1
    just added code @Brooks – Tristan Berger May 26 at 19:10
  • 1
    updated my answer – Brooks Johnson May 27 at 12:37
  • 1
    Thank you, this was a better explanation than the documentation. This also solved my issue! – Tristan Berger May 27 at 14:38

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.