1

I am new to LWC and am currently working on a component that sends JSON up to a parent component. Everything works fine, but I just want to send JSON up to the parent NOT anything else. When I use the <c-parent onsendingjsonevent={handleChildJSON} syntax on the parent, I obtain my JSON payload, in addition to the HTML from the child component.

Is it possible to just send the JSON dispatched from my event and hide the child HTML? I do not want any of my Child HTML rendering on the parent component.

Child Dispatch Event

handleSendOHT() {
    console.log("button clicked");
    let date = new Date();
    console.log(date.getDate());

    let sentDate = `${
      date.getMonth() + 1
    }/${date.getDate()}/${date.getFullYear()}`;
    this.emailsSelectedOHT.push({
      Emails: this.selectedEmails,
      Languages: this.languageValues,
      Date: sentDate
    });
    console.log(this.emailsSelectedOHT);
    const emailSubmit = new CustomEvent("emailsubmitevent", {
      detail: this.emailsSelectedOHT
    });
    //dispatch event
    this.dispatchEvent(emailSubmit);
  }
}

Child HTML

<template>
  <template if:true={emailTemplates}>
    <lightning-card>
      <h3 slot="title" class="slds-p-around_small slds-p-left_medium">
        <lightning-icon
          icon-name="standard:email"
          size="small"
          class="slds-m-right_small"
        ></lightning-icon>
        Send Emails to One Hour Translation
        <template if:true={showRefreshButton}>
          <lightning-button-icon
            icon-name="standard:home"
            variant="border-filled"
            onclick={handleRefresh}
            class="slds-float_right"
            style="padding-right: 8%;"
          ></lightning-button-icon>
        </template>
      </h3>
      <div class="slds-grid">
        <div class="slds-col slds-p-around_small">
          <lightning-checkbox-group
            if:true={emailOptions}
            name="emailTemplateNameSelect"
            label="Select the Email Template Name"
            value={selectedEmails}
            options={emailOptions}
            onchange={handleEmailNameChange}
            class="slds-p-around_small"
          >
          </lightning-checkbox-group>
          <div class="slds-m-top_small">
            <template if:true={selectedTemplates}>
              <lightning-button
                variant="success"
                label="Submit Email Templates to OHT"
                onclick={handleSendOHT}
                class="slds-m-top_small"
                disabled={submitButtonDisabled}
              ></lightning-button>
            </template>
          </div>
        </div>
        <template if:true={showLanguage}>
          <div class="slds-col">
            <c-language-selection-child
              onlanguagevaluechange={handleLanguageChange}
            >
            </c-language-selection-child>
          </div>
        </template>
      </div>
      <template if:true={selectedTemplates}>
        <template for:each={selectedTemplates} for:item="template">
          <div key={template.Id} class="slds-p-around_small">
            <div>
              <p class="slds-p-horizontal_small">
                <span class="slds-text-title_bold">
                  Email Template Name:
                </span>
                <span class="slds-m-left_x-small">
                  {template.Name}
                </span>
              </p>
              <p class="slds-p-horizontal_small">
                <span class="slds-text-title_bold">
                  Email Template Subject:
                </span>
                <span class="slds-p-horizontal_small">
                  {template.Subject}
                </span>
              </p>
              <p class="slds-p-horizontal_small">
                <span class="slds-text-title_bold">
                  Email Template HTML:
                </span>
                <lightning-formatted-rich-text
                  value={template.HtmlValue}
                ></lightning-formatted-rich-text>
              </p>
            </div>
          </div>
        </template>
      </template>
    </lightning-card>
  </template>
</template>

Parent JS

export default class SelectedObjectsOHT extends LightningElement {
  @track submitedEmails = [];

  handleEmailSubmit(event) {
    this.submitedEmails = event.detail;
    console.log(JSON.stringify(this.submitedEmails));
  }
}

Parent HTML

<template>
  <lightning-card>
    <h3 slot="title" class="slds-p-around_small slds-p-left_medium">
      <lightning-icon
        icon-name="custom:custom20"
        size="small"
        class="slds-m-right_small"
      ></lightning-icon>
      Emails and Surveys Sent to One Hour Translation
    </h3>
    <c-email-parent onemailsubmitevent={handleEmailSubmit}></c-email-parent>
  </lightning-card>
</template>

I do not want the email-parent HTML to render just the event to be passed up.

Thank you in advance!

8
  • 1
    how exactly are you dispatching? can you show full code? – salesforce-sas Jun 22 '20 at 0:11
  • @salesforce-sas I updated per your request. Thank you – Davis Handler Jun 22 '20 at 1:33
  • What does this render? Can you show child html? – zaitsman Jun 22 '20 at 1:38
  • you should be showing all relevant code - what is this.emailsSelectedOHT? – salesforce-sas Jun 22 '20 at 2:29
  • @salesforce-sas I have made updates per the request – Davis Handler Jun 22 '20 at 3:26
3

Your parent component's code is what is rendering the child component. I am referring to this line in your parent's component:

<c-email-parent onemailsubmitevent={handleEmailSubmit}></c-email-parent>.

This will render your child component. Sending an event from the child to the parent has nothing to do with the child's html rendering in the parent.

I can think of 3 ways of achieving what you are asking for.

  1. Make sure your child component has no HTML, this way no HTML will render inside the parent component. Although I don't see how handleSendOHT() will get triggered without rendering the child component's HTML since it's tied to an onclick event in the child component.
  2. Control the visibility of your child component with a boolean that gets set from the parent component. I can see that you already have if:true={emailTemplates} in your child component. You can control this value from the parent if need be or add another boolean for the same purpose.
  3. Do not import the child component in order to pass the event. Instead use the pubsub library to dispatch the event from the child and then put an event listener in the parent. That will still require to render the child component somehow on the page though. Also the event won't be directly dispatched to the parent but altogether fired to all components on the page.

Here's what your child component's JS would look like if you were to use the pubsub library to dispatch the event.

fireEvent(this.pageRef, 'emailsubmitevent', this.emailsSelectedOHT);

Then in the parent you will need something like:

import { LightningElement, track } from 'lwc';
import { fireEvent, registerListener, unregisterAllListengers } from 'c/pubsub';

export default class SelectedObjectsOHT extends LightningElement {
  @track submitedEmails = [];

connectedCallback() {
    registerListener('emailsubmitevent', this.handleEmailSubmit, this);
}
disconnectedCallback() {
    unregisterAllListeners(this);
}

handleEmailSubmit(emailsSelectedOHT) {
    this.submitedEmails = emailsSelectedOHT;
    console.log(JSON.stringify(this.submitedEmails));
  }
}
1
  • 1
    thank you. I went with option 3 and used import {CurrentPageReference} from "lightning/navigation" – Davis Handler Jun 22 '20 at 13:57

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.