0

Lets say I have 3 screens I want to show. The 1st screen is the initial search screen utilizing a combobox with an option of name search and phone number search. Given the user selects either and clicks a button on the footer of the modal labeled "Search", it would then re-render the modal to show the search results. On that new screen it would link to the 3rd page by having a "View Details" button on each search result that will re-render the window to show the search result in detail. On the 3rd page it can go back to the 2nd screen with a button labeled "Search Results" and the 2nd screen can go back to the 1st screen by a button that is labeled "Refine Your Search".

I am assuming I will have to possibly embed these 3 screens in a aura component since that is what the documentation calls for when calling a LWC directly, but I am unsure since this. Added code below so you could get an idea of what I am trying to achieve with

HTML for Search Results Modal window:

<template>
     <lightning-button variant="brand"
        label="Search People"
        title="Search people"
        onclick={openModal}
        class="slds-m-left_x-small">
     </lightning-button> 
     
     <template if:true={isModalOpen}>
         <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
 aria-describedby="modal-content-id-1" class="slds-modal
 slds-fade-in-open">
             <div class="slds-modal__container">
                 <!-- Modal/Popup Box LWC header here -->
                 <header class="slds-modal__header">
                         <lightning-button-icon icon-name="utility:close"
                             class="slds-modal__close"
                            icon-class="slds-button_icon-inverse"
                            title="Cancel Search"
                             onclick={closeModal}></lightning-button-icon>
                     <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Add Person</h2>
                 </header>
                 <!-- Modal/Popup Box LWC body starts here -->
                 <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                     <div class="slds-text-body_small slds-border_bottom">
                         <div class="slds-float_left">Found 2 results for this "searched Term"</div>
                         <div class="slds-float_right"><lightning-input type="checkbox" label="Select Service" onchange={handleFilter}</div>  
 
                     </div>
                     <lightning-layout> <div class="custom-box slds-border_bottom">
                      <p>XYZ Person Services</p><div class="slds-float_right slds-badge">Select Person</div>
                      <p class="slds-text-body_small">1234 Sundrive Lane, Raleigh NC 27617</p>
                      <p class="slds-text-body_small"><a href='#'>123 456 5678</a> | <a href='#'>xyz@email.com</a> | <a href='#'>www.xyzpeople-nc.com</a></p>
                      <p><lightning-button label="View Details" title="View Details"></lightning-button></p>
                     </div>
                     </lightning-layout>
                     <template if:false={areOutofServiceVisible}> <div class="custom-box slds-border_bottom">
                      <p>ABC People Shop</p><div class="slds-float_right slds-badge slds-theme_warning">Out of
 Area</div>
                      <p class="slds-text-body_small">82 Lakeview Road, Chicago IL 60607</p>
                      <p class="slds-text-body_small"><a href='#'>123 456 5678</a> | <a href='#'>abc@email.com</a> | <a
 href='#'>www.abcpeopleshop.com</a></p>
                      <p><lightning-button label="View Details" title="View Details"></lightning-button></p>
                     </div>
                     </template>
                 </div>
                 <!-- Modal/Popup Box LWC footer starts here -->
                 <footer class="slds-modal__footer slds-modal__footer_directional">
                     <button class="slds-button slds-button_neutral" onclick={closeModal} title="Refine Your Search">Cancel</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>
             </div>
         </section>
         <div class="slds-backdrop slds-backdrop_open"></div>
     </template>  
</template>

JS for Search Results Modal window:

import { LightningElement, track } from 'lwc'; 
 export default class SearchResults extends LightningElement { 
      @track isModalOpen = false;
      areOutofServiceVisible = false;
      
      handleFilter(event) {
           this.areOutofServiceVisible = event.target.checked;
      }

      openModal() {
           this.isModalOpen = true;
      }
      closeModal() {
           this.isModalOpen = false;
      }
      searchForPeople() {
           this.isModalOpen = false;
      }
 } 

HTML for View Details:

<template>
         <lightning-button variant="brand"
            label="Search People"
            title="Search people"
            onclick={openModal}
            class="slds-m-left_x-small">
         </lightning-button> 
         
         <template if:true={isModalOpen}>
             <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
     aria-describedby="modal-content-id-1" class="slds-modal
     slds-fade-in-open">
                 <div class="slds-modal__container">
                     <!-- Modal/Popup Box LWC header here -->
                     <header class="slds-modal__header">
                             <lightning-button-icon icon-name="utility:close"
                                 class="slds-modal__close"
                                icon-class="slds-button_icon-inverse"
                                title="Cancel Search"
                                 onclick={closeModal}></lightning-button-icon>
                         <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Add Person</h2>
                     </header>
                     <!-- Modal/Popup Box LWC body starts here -->
                     <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                         <div id="ExpandableCalendarSection" class={BookCalClass}>
    <h3 class="slds-section__title" style='padding-bottom:0;'>
      <button aria-controls="expandoBookingCalendar" aria-expanded="true" class="slds-button slds-section__title-action" onclick={ExpBookCalendar}>
        <lightning-icon icon-name="utility:switch"
        alternative-text="button icon"
        size="x-small"
        class="slds-section__title-action-icon slds-button__icon_left"></lightning-icon>
        <span class="slds-truncate" title="Section Title">Booking /Avaiability Calendar</span>
      </button>
    </h3>
    <div aria-hidden="false" class="slds-section__content" id="expandoBookingCalendar" style='padding-top:0;'>
        <div class="slds-grid">
           <p> Info inside expandable section </p>
          </div>
    </div>
  </div>
  <div id="ExpandableCalendarSection1" class={BookCalClassTwo}>
    <h3 class="slds-section__title" style='padding-bottom:0;'>
      <button aria-controls="expandoBookingCalendar" aria-expanded="true" class="slds-button slds-section__title-action" onclick={ExpBookBookCalendarTwo}>
        <lightning-icon icon-name="utility:switch"
        alternative-text="button icon"
        size="x-small"
        class="slds-section__title-action-icon slds-button__icon_left"></lightning-icon>
        <span class="slds-truncate" title="Section Title">Booking /Avaiability Calendar</span>
      </button>
    </h3>
    <div aria-hidden="false" class="slds-section__content" id="expandobook" style='padding-top:0;'>
        <div class="slds-grid">
           <p> Info inside expandable section </p>
          </div>
    </div>
  </div>
                     <!-- Modal/Popup Box LWC footer starts here -->
                     <footer class="slds-modal__footer slds-modal__footer_directional">
                         <button class="slds-button slds-button_neutral" onclick={closeModal} title="Refine Your Search">Cancel</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>
                 </div>
             </section>
             <div class="slds-backdrop slds-backdrop_open"></div>
         </template>  
    </template>

JS for View Details:

import { LightningElement, track } from 'lwc';

export default class calendarView extends LightningElement {
    @track BookCalClass = 'slds-section slds-is-open'; //this starts as section open
    ExpBookCalendar(){
        if(this.BookCalClass.includes('slds-is-open')){ // if section is open
            this.BookCalClass = 'slds-section'; //set class to close 
        }else{
            this.BookCalClass = 'slds-section slds-is-open'; //set class to be open
        }
    }
    @track BookCalClassTwo = 'slds-section slds-is-open'; //this starts as section open
    ExpBookBookCalendarTwo(){
        if(this.BookCalClassTwo.includes('slds-is-open')){ // if section is open
            this.BookCalClassTwo = 'slds-section'; //set class to close 
        }else{
            this.BookCalClassTwo = 'slds-section slds-is-open'; //set class to be open
        }
    }
}
2

navigationMixin is ideally to navigate to a standard, custom record page, you can rather use lightning-card or lightning-tabs within a same modal and render each card based on the button click.

something like:

<Lightning-modal>
    <template if:true={showSearchCard}
        <lightning-card title='Search Card'>

            <!-- search input fields -->
            
        </lightnin-card>
    </tempalte>

    <template if:true={showSearchResultCard}
        <lightning-card title='Search Results'>

            <!-- search results -->
        <c-search-results> </c-search-results> <!-- ideally this component would have a button that will dispatch event when the button is clicked -->
        <lightning-button onClick={getDetails} title='Get detail> </lightning-button>
        </lightnin-card>
    </tempalte>

    <template if:true={showDetailCard}
        <lightning-card title='Record Detail Card'>

            <!-- Show Record Detail fields or child component -->

        </lightnin-card>
    </tempalte>

</lightning-modal>

and this would be your JS.

handleSearch(event){
        //get search results
        if(results){
            this.showSearchResultCard = true; // Show the record details
            this.showSearchCard = false; //basically hide the search card
        }
    }

    getRecordDetails(event){
        this.showsearchResultCard = false;
        //If you get record details
        this.showDetailCard = true;
        }

If you are adding a search for standard/custom records, to show details you can use lighthning-record view form and then use navigation mixin to just show standard layout. BUT if you want to show the record in the modal itself like you are asking, you can use above structure and render each card as you want.

Also, I forgot to add that if you want to add a next and previous button, you can basically do that just with those booleans that handle the visibility of your lightning-card.

Main Component with Search Fields : - If search found, render the Search results (preferrably a new component) - If button clicked on a record, Render the Detail component and hide the above 2.

4
  • Ah so if I was grabbing data from an outside source, nothing from salesforce objects or data, I wouldn't be able to do that with a navigation mixin? I would have to go the route of having it all on 1 modal window and just keep it all to template tags then? – Tristan Berger May 20 at 17:52
  • Exactly, so if those are not records within salesforce, you wouldn't be able to use navigationMixin. You can just show/hide different component or section of a same component based on the user's action. Preferable to use different component so your maintenance in future becomes easier. And when the user clicks button, you can dispatchEvent to the parent component. So essentially, You can have main component (with Modal and search fields) - then when they search, show the search results beneath it and then onClick of each row of those records, you can show them the detail. – anxiousAvocado May 20 at 17:55
  • ah okay, thank you @anxiousAvocado. I was told there was a possibility of it working without records but could not locate any working examples. Will stick to your suggestion. – Tristan Berger May 20 at 18:00
  • You can refer this It is very easy to follow, much better explained about navigationMixin. Gald I was able to help. – anxiousAvocado May 20 at 18:02

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.