1

I'm trying to store these data until I get the other cards back. enter image description here

So when I press the Previous button and comeback to the checkbox that I made, it will move the value by unchecking the box. However, I would like to keep the data with the checked boxes.

I also want to know about the LWC flow and how it's handling data when I press the Previous and Next button.

enter image description here

.html

<template>
  <lightning-checkbox-group name="CheckboxGroup"
                          label="Check one"
                          required></lightning-checkbox-group>
  <lightning-input type="checkbox" label="Type 0" data-id="checkbox" value="Type 0" onchange={handleInputVal1}></lightning-input>
  <lightning-input type="checkbox" label="Type 1" data-id="checkbox" value="Type 1" onchange={handleInputVal2}></lightning-input>
  <lightning-input type="checkbox" label="Type 2" data-id="checkbox" value="Type 2" onchange={handleInputVal2}></lightning-input>
</template>

.js

value = [];
userConditionsLWC2 = [];

handleInputVal1(e) {
  // keeps the data
  this.value = e.target ? e.target.value : "";
  this.userConditionsLWC2 = [];
  this.userConditionsLWC2.push(this.value);
  this.omniApplyCallResp({ userConditionsLWC2: this.userConditionsLWC2 });

  const checkboxList = this.template.querySelectorAll(
    '[data-id^="checkbox"]'
  );
  for (const checkboxElement of checkboxList) {
    checkboxElement.checked = false;
  }
  e.target.checked = true;
}

handleInputVal2(e) {
  // deleting the data in flow ahead
  this.value = e.target ? e.target.value : "";
  this.userConditionsLWC2 = [];
  this.userConditionsLWC2.push(this.value);
  this.omniApplyCallResp({ userConditionsLWC2: this.userConditionsLWC2 });

  const checkboxList = this.template.querySelectorAll(
    '[data-id^="checkbox"]'
  );
  for (const checkboxElement of checkboxList) {
    checkboxElement.checked = false;
  }
  e.target.checked = true;
}
Improve this question
1
  • Previous and next buttons are in a screen flow and you have added this lwc component to flow is that the case? Commented May 5, 2022 at 5:11

2 Answers 2

Reset to default
1

As suggested by sfdcfox instead of checkbox radio button is ideal for this scenario.

Following answer is just to demonstrate how to maintain state of lwc component in flow when click on Previous and next.

Store selected checkbox value in a flow variable. When component will re-render after clicking on previous or next, check the checkbox value, if checkbox value = flow variable value.

Flow screenshot: Notice lwc selectedValue attribute set to selectedVal flow attribute.

enter image description here

LWC JS file:

import { LightningElement, api } from 'lwc';

export default class ComCheckBoxFlow extends LightningElement {
    @api
    selectedValue;
    value = [];
    userConditionsLWC2 = [];
    renderedCallback() {
        console.log('functiona called');
        const checkboxList = this.template.querySelectorAll(
            '[data-id^="checkbox"]'
          );
          for (const checkboxElement of checkboxList) {

            if(checkboxElement.value == this.selectedValue) {
                checkboxElement.checked = true;
            }
          }
    }
    handleInputVal1(e) {
        // keeps the data
        this.value = e.target ? e.target.value : "";
        this.userConditionsLWC2 = [];
        this.userConditionsLWC2.push(this.value);
      
        const checkboxList = this.template.querySelectorAll(
          '[data-id^="checkbox"]'
        );
        for (const checkboxElement of checkboxList) {
          checkboxElement.checked = false;
        }
        e.target.checked = true;
        this.selectedValue = e.target.value;
      }
      
      handleInputVal2(e) {
        // deleting the data in flow ahead
        this.value = e.target ? e.target.value : "";
        this.userConditionsLWC2 = [];
        this.userConditionsLWC2.push(this.value);
      
        const checkboxList = this.template.querySelectorAll(
          '[data-id^="checkbox"]'
        );
        for (const checkboxElement of checkboxList) {
          checkboxElement.checked = false;
        }
        e.target.checked = true;
        this.selectedValue = e.target.value;
      }

       
      handleInputVal3(e) {
        // deleting the data in flow ahead
        this.value = e.target ? e.target.value : "";
        this.userConditionsLWC2 = [];
        this.userConditionsLWC2.push(this.value);
      
        const checkboxList = this.template.querySelectorAll(
          '[data-id^="checkbox"]'
        );
        for (const checkboxElement of checkboxList) {
          checkboxElement.checked = false;
        }
        e.target.checked = true;
        this.selectedValue = e.target.value;
      }
}

LWC Meta xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="selectedValue" type="String"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
Improve this answer
1
  • Hey @Amit Thanks for the advice. Yeah as sfdcfox said, I should really think about using radio instead. Detailed explanation of the flow of this LWC. Thanks again. I will comeback to you when I have blocker. Thanks. Commented May 5, 2022 at 20:04
1

First of all, you should consider using a radio instead of a checkbox, since the user can only choose one. Aside from that, you can store the selected values for every page in order to determine which is selected. I wrote some code for a similar problem here. The solution is a Set. That looks like:

allSelectedValues = new Set();

...

[...checkboxList].map(box => this.allSelectedValues.delete(box.value));
this.allSelectedValues.add(event.target.value);
Improve this answer
1
  • Hey, sfdcfox thanks for the help. yeah, I should really be thinking about using the radio instead. I had lots of conflicts using the checkbox as radio. I'll be testing out Set for the solution. Thanks! Commented May 5, 2022 at 20:00

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.