Merge pull request #1488 from alexed1/CondVis

ReactiveConditionalVisibility Initial Release
alexed1 · Dec 6, 2023 · 30050a0 · 30050a0
2 parents 4843be6 + be55727
commit 30050a0
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 0 deletions.
diff --git a/...main/default/lwc/fsc_reactiveConditionalVisibility/fsc_reactiveConditionalVisibility.html b/...main/default/lwc/fsc_reactiveConditionalVisibility/fsc_reactiveConditionalVisibility.html
@@ -0,0 +1,17 @@
+<!-- 
+
+Lightning Web Component for Flow Screens:   reactiveConditionalVisibility
+
+    Use this component to provide reactive conditional visibility on a flow screen
+
+        Reactive formulas based on screen values cannot be used to control conditional visibility of other components on the same screen.
+        Provide a boolean formula as input to this component and use the component output to control the conditional visibility of other components.
+
+12/05/23 -  Eric Smith -    Version 1.0.0 
+                            Included in the ScreenComponentsBasePack v3.2.6 and later
+-->
+
+<template>
+    <!-- Track, but do not display the reactive attribute(s) -->
+    <span hidden><lightning-formatted-text value={textReactiveValue}></lightning-formatted-text></span>
+</template>
diff --git a/...p/main/default/lwc/fsc_reactiveConditionalVisibility/fsc_reactiveConditionalVisibility.js b/...p/main/default/lwc/fsc_reactiveConditionalVisibility/fsc_reactiveConditionalVisibility.js
@@ -0,0 +1,28 @@
+import { api, track, LightningElement } from 'lwc'; 
+import { FlowAttributeChangeEvent } from 'lightning/flowSupport';
+
+export default class Fsc_reactiveConditionalVisibility extends LightningElement {
+
+    @api
+    get reactiveValue() {
+        return this._reactiveValue;
+    }
+    set reactiveValue(value) {
+        this._reactiveValue = value;
+    }
+    _reactiveValue;
+
+    @track oldReactiveValue;
+
+    get textReactiveValue() {
+        return JSON.stringify(this._reactiveValue);
+    }
+
+    renderedCallback() {
+        if (this.textReactiveValue && this.textReactiveValue != this.oldReactiveValue) {
+            this.dispatchEvent(new FlowAttributeChangeEvent("reactiveValue", this._reactiveValue));
+        }
+        this.oldReactiveValue = this._reactiveValue;
+    }
+
+}
diff --git a/...fault/lwc/fsc_reactiveConditionalVisibility/fsc_reactiveConditionalVisibility.js-meta.xml b/...fault/lwc/fsc_reactiveConditionalVisibility/fsc_reactiveConditionalVisibility.js-meta.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>59.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>Reactive Conditional Visibility</masterLabel>
+    <targets>
+        <target>lightning__FlowScreen</target>
+    </targets>
+    <targetConfigs>
+        <targetConfig targets="lightning__FlowScreen">
+            <property name="reactiveValue" label="Value" type="Boolean" description="Reactive Value (True/False)" required="true"/>
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>