> ## Documentation Index
> Fetch the complete documentation index at: https://calcs.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Dynamic Lookup Widget

> Create dynamic dropdowns with values that change based on conditions

![Dynamic Lookup Demo](https://t6927027.p.clickup-attachments.com/t6927027/bbee1722-0073-40ff-809e-8404bf4c5d1c/MAFI%20Solar%20Calculator%20\(VALID_%20Andersson%20%26%20Nordgren%2C%20Ex%20B.3.1\)%20-%20PR%2014660%20\(EU%20-%20MKS\)%20_%20ClearCalcs%20-%20Google%20Chrome%20-%205%20July%202024.gif)

Dynamic Lookup Widgets are a powerful tool for allowing users to select values from a predefined set of options that can change based on conditions or other inputs. This guide walks through setting up and using dynamic lookup widgets.

## Setup Process

### 1. Creating the Options Data

<Steps>
  <Step title="Create a Equation Widget">
    Start by creating a equation widget or equation widget to store your options data
  </Step>

  <Step title="Structure Data as a Matrix">
    Organize your data in a matrix format, where each option set is separated into rows

    **Example format**: `[[A,a], [B,b], [C,c]]`
  </Step>
</Steps>

The Equation Widget would look like this:

![Options Data Setup](https://t6927027.p.clickup-attachments.com/t6927027/02f8a8e3-1c5c-42f7-92b7-b2607d5d6157/image.png)

### 2. Setting Up the Dynamic Widget

<Steps>
  <Step title="Create the Dynamic Widget">
    Add a new dynamic lookup widget to your template
  </Step>

  <Step title="Link Data Source">
    In the data source field, input the ID of the equation widget you created in step 1. This ensures the dynamic widget pulls its options from the correct source
  </Step>
</Steps>

![Data Source Configuration](https://t6927027.p.clickup-attachments.com/t6927027/3b3e36de-480d-4717-acfc-b3f8d470457a/image.png)

### 3. Setting the Default Value

<Steps>
  <Step title="Select Default Value">
    Decide on a default value that should be presented to the user initially
  </Step>

  <Step title="Use matrixSubset">
    Use `matrixSubset` to select the first value from the matrix created in the equation widget

    **Example**: `matrixSubset(t_avail, 0, 0)` selects the first element
  </Step>
</Steps>

![Default Value Setup](https://t6927027.p.clickup-attachments.com/t6927027/4cfc42aa-355c-4986-8ad5-2f7f72a98181/image.png)

This formula selects the first element from the `t_avail` matrix to be the default value.

### 4. Testing and Final Adjustments

<Steps>
  <Step title="Thorough Testing">
    Test the widget extensively to confirm that values are displayed correctly according to the conditions you've set
  </Step>

  <Step title="Hide Equation Widget">
    Hide the equation widget to prevent user confusion and ensure a clean user interface
  </Step>

  <Step title="Make Adjustments">
    If any issues are identified during testing, make necessary adjustments to formulas, connections, or settings
  </Step>
</Steps>

## Data Structure Examples

### Simple Options Matrix

```javascript theme={null}
[
  ["Option 1", "value1"],
  ["Option 2", "value2"], 
  ["Option 3", "value3"]
]
```

### Conditional Options Matrix

```javascript theme={null}
// Based on material type
material_type == "steel" ? [
  ["S275", 275],
  ["S355", 355],
  ["S420", 420]
] : [
  ["C20/25", 20],
  ["C25/30", 25],
  ["C30/37", 30]
]
```

## Common Use Cases

<CardGroup cols={2}>
  <Card title="Material Selection" icon="materials">
    Different materials available based on design code or region
  </Card>

  <Card title="Section Properties" icon="ruler">
    Available cross-sections filtered by material or size constraints
  </Card>

  <Card title="Load Factors" icon="weight">
    Load combination factors that vary by building type
  </Card>

  <Card title="Code Parameters" icon="book">
    Design parameters that change based on selected standard
  </Card>
</CardGroup>

## Best Practices

<Tip>
  * Always provide a sensible default value using `matrixSubset`
  * Hide the data source equation widget to keep the interface clean
  * Test all possible conditions that affect the dropdown options
  * Use descriptive labels for both display text and underlying values
  * Consider performance impact with very large option sets
  * Document the data structure in `authorNotes` for future developers
</Tip>

<Warning>
  Ensure your data matrix structure is consistent across all conditions. Inconsistent matrix shapes can cause errors when the dynamic lookup widget tries to process the data.
</Warning>

## Matrix Functions

### Common Matrix Operations

* **`matrixSubset(matrix, row, col)`** - Extract specific values
* **`matrixLength(matrix)`** - Get number of rows
* **`matrixColumn(matrix, col)`** - Extract entire column
* **`matrixRow(matrix, row)`** - Extract entire row

### Example Implementation

```javascript theme={null}
// Data source widget (hidden)
material_type == "steel" ? [
  ["S275", 275, 430],
  ["S355", 355, 510] 
] : [
  ["C20/25", 20, 25],
  ["C25/30", 25, 30]
]

// Default value in dynamic lookup
matrixSubset(material_options, 0, 0)  // First option display text

// Accessing selected values in other widgets  
matrixSubset(material_options, selected_index, 1)  // Yield strength
matrixSubset(material_options, selected_index, 2)  // Ultimate strength
```