Default tab with variable

Author: engPabloMartinez

force-app/main/default/lwc/odFlowTabs/odFlowTabs.js

@@ -6,6 +6,7 @@ export default class OD_FlowTabs extends LightningElement {
   @api title;
   @api variant;
   @api tabs;
+  @api selectedTab;
 
   // output variables
   @api activeTab;
@@ -17,7 +18,7 @@ export default class OD_FlowTabs extends LightningElement {
   // =================================================================
   connectedCallback() {
     // put the default as active at the beginning
-    this.theActiveTab = this.theTabs.find((tb) => tb.isDefault)?.value || this.theTabs[0].value;
+    this.theActiveTab = this.selectedTab || this.theTabs[0].value;
   }
 
   // =================================================================

force-app/main/default/lwc/odFlowTabs/odFlowTabs.js-meta.xml

@@ -20,6 +20,9 @@
             <property name="title" label="Title" type="String"
                 role="inputOnly"
                 description="Displays tooltip text when the mouse moves over the tabset." />
+            <property name="selectedTab" label="Selected Tab" type="String"
+                role="inputOnly"
+                description="Sets a specific tab to open by default using a string that matches a tab's value string. If not used, the first tab opens by default." />
 
             <!-- Output variables -->
             <property name="activeTab" label="Active Tab"

force-app/main/default/lwc/odFlowTabsConfigurationEditor/odFlowTabsConfigurationEditor.html

@@ -34,6 +34,19 @@
           You must create at least one tab. Click the button to do it.
         </div>
       </template>
+      <div class="slds-m-top--small">
+        <lightning-combobox
+          name="selectedTab"
+          label={inputValues.selectedTab.label}
+          value={inputValues.selectedTab.value}
+          placeholder="Select Default Tab"
+          options={selectedTabOptions}
+          onchange={handleInputChange}
+          class="slds-m-top--x-small"
+          field-level-help={inputValues.selectedTab.helpText}
+        >
+        </lightning-combobox>
+      </div>
     </div>
   </fieldset>
 </template>

force-app/main/default/lwc/odFlowTabsConfigurationEditor/odFlowTabsConfigurationEditor.js

@@ -15,8 +15,8 @@ export default class OD_FlowTabsConfigurationEditor extends LightningElement {
       label: 'Title',
       helpText: 'Displays tooltip text when the mouse moves over the tabset.',
     },
-    activeTab: {
-      label: 'Active Tab',
+    selectedTab: {
+      label: 'Selected Tab',
       helpText:
         "Sets a specific tab to open by default using a string that matches a tab's value string. If not used, the first tab opens by default.",
     },
@@ -75,6 +75,57 @@ export default class OD_FlowTabsConfigurationEditor extends LightningElement {
     ];
   }
 
+  get selectedTabOptions() {
+    const result = [];
+
+    // variables
+    const variables = this.builderContext.variables;
+    if (variables.length > 0) {
+      const variablesPerType = variables.filter((vr) => vr.dataType.toLowerCase() === 'string');
+
+      if (variablesPerType.length > 0) {
+        variablesPerType.forEach((vpo) => {
+          result.push({
+            label: vpo.name,
+            value: `{!${vpo.name}}`,
+          });
+        });
+      }
+    }
+
+    // formulas
+    const formulas = this.builderContext.formulas;
+    if (formulas.length > 0) {
+      const formulasPerType = formulas.filter((fml) => fml.dataType.toLowerCase() === 'string');
+
+      if (formulasPerType.length > 0) {
+        formulasPerType.forEach((fml) => {
+          result.push({
+            label: fml.name,
+            value: `{!${fml.name}}`,
+          });
+        });
+      }
+    }
+
+    // constants
+    const constants = this.builderContext.constants;
+    if (constants.length > 0) {
+      const constantsPerType = constants.filter((cnt) => cnt.dataType.toLowerCase() === 'string');
+
+      if (constantsPerType.length > 0) {
+        constantsPerType.forEach((cnt) => {
+          result.push({
+            label: cnt.name,
+            value: `{!${cnt.name}}`,
+          });
+        });
+      }
+    }
+
+    return result;
+  }
+
   // =================================================================
   // setter for inputs
   // =================================================================

force-app/main/default/lwc/odFlowTabsConfigurationTabs/odFlowTabsConfigurationTabs.html

@@ -29,7 +29,6 @@
                 >
                 </lightning-helptext>
               </th>
-              <th class="slds-p-around--x-small slds-text-align--center" style="width: 150px">Default Active?</th>
               <th class="slds-p-around--x-small" style="width: 80px">Order</th>
             </tr>
           </thead>
@@ -111,16 +110,6 @@
                     </div>
                   </template>
                 </td>
-                <td class="slds-text-align--center">
-                  <input
-                    type="radio"
-                    name="isDefault"
-                    value={tab.isDefault}
-                    onchange={handleSelectRadioDefault}
-                    data-value={tab.value}
-                    checked={tab.isDefault}
-                  />
-                </td>
                 <td>
                   <lightning-input
                     type="number"

force-app/main/default/lwc/odFlowTabsConfigurationTabs/odFlowTabsConfigurationTabs.js

@@ -139,16 +139,6 @@ export default class OD_FlowTabsConfigurationTabs extends LightningModal {
     };
   }
 
-  handleSelectRadioDefault(event) {
-    const checked = event.target.checked;
-
-    // all in false
-    this.theTabs.forEach((tb) => (tb.isDefault = false));
-
-    event.detail = { value: checked };
-    this.handleUpdateField(event);
-  }
-
   handleClose() {
     this.close();
   }