# Component Configurations

How components connect to your business data, how settings adapt to context, and how you can build interactive, data-driven pages.

## How Components Get Their Data

Many components display data from your business system. The way data flows to components depends on the component type.

### Automatic Data Connection

Some components automatically connect to the current context — no manual setup needed:

* **Customer Field** — Shows data from the currently selected customer.
* **Order Lines** — Reads from and writes to the current order or cart.
* **Summary** — Calculates totals from the current order.
* **Product Field, Product Image** — Show data from the current product (on catalog pages).

These components "just work" when placed in the right context. For example, when you put a Customer Field on an order form page that also has a Customer Select component, the Customer Field automatically shows data from whichever customer is selected.

### Configured Data Sources

Other components need you to tell them where their data comes from:

* **Chart Widget** — Configure a saved search or custom query to populate the chart.
* **Report Widget** — Configure a saved search or custom query for the table data.
* **Record Field** — Specify which record type and field to display.
* **Stats** — Can show fixed values or connect to a data source.

### Session Variable Connection

Components can read from and write to session variables (see [Module Variables](/client-admin-guide/workflow-builder-overview/module-variables.md)):

* **Action Button** can set a variable when clicked.
* **Variables** component sets variables when the page loads.
* **Text** components can display variable values using `{{variableName}}` format.
* Many components accept variable references in their settings.

## Dynamic Settings

Behind the scenes, components have smart settings that adjust based on context. As an admin, you experience this as:

* **Settings that change** based on other settings. For example, selecting "Navigate" as an action type on an Action Button reveals a destination field.
* **Dropdown options that update** based on the current workflow, module type, or subsidiary.
* **Settings that appear or disappear** based on checkbox toggles.

You do not need to configure this behavior — it happens automatically. But understanding that it exists helps explain why the settings panel sometimes changes when you modify a setting.

## The Configure Button

Many components (Action Button, Order Lines, Shipping Method, and many business feature components) have a **Configure** button in their settings panel. Clicking it opens a detailed settings window.

**How to use:**

1. Select the component on the canvas.
2. Look for a **Configure** button in the right panel.
3. Click it to open the settings window.
4. Fill in the required settings.
5. Click **Save** or **Done** to close the window and apply your changes.

**Common components with Configure buttons:**

* **Action Button** — Action type, target, conditions, PIN override settings
* **Order Lines** — Column configuration, pricing rules, discount rules, custom columns
* **Catalog Display** — Catalog selection, display options, cart behavior

## Conditional Behavior

While the Page Builder does not have a full visual programming system, you can create conditional behavior through several approaches:

### Component Visibility

Some components support visibility conditions — they only appear when a condition is met. This is configured in the component's settings.

**Example:** Show a "Manager Override" button only when the order total exceeds a threshold.

### Session Variable Conditions

Action Buttons can be configured to behave differently based on session variable values:

* Show or hide components based on a user role variable
* Change navigation targets based on a selected mode variable
* Enable or disable functionality based on a feature flag variable

### PIN Override Conditions

PIN override is a form of conditional logic — the action only proceeds after successful PIN authorization. This is configured per component. See [PIN Override](/client-admin-guide/workflow-builder-overview/pin-override.md) for details.

## Data Refresh and Caching

### Automatic Refresh

* Components that display live data (queue widgets, dashboard stats) can be configured with a refresh interval.
* Order form components update in real time as the user makes changes.

### When Data Seems Stale

If data appears outdated, users can refresh their browser (Ctrl+Shift+R) to clear cached data and load fresh information.

### Manual Refresh

Some components include a refresh button or action. You can also add an Action Button configured to trigger a data refresh.

## Best Practices

* **Let automatic connections do the work.** Most components connect to the right data automatically when placed in the correct context.
* **Use saved searches for reports.** They are maintained in your back-office system and can be updated without touching the Page Builder.
* **Keep logic simple.** If your page requires complex conditional logic, consider splitting the functionality across multiple modules.
* **Test with edge cases.** What happens when there is no data? When there is too much data? When the user has not selected a customer yet?
* **Document your data sources.** If a Report Widget uses a specific saved search, note the search name and purpose. This helps with future maintenance.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Module Variables</strong></td><td>The full guide to session variables — scopes, sources, and consumers.</td><td><a href="/pages/S9QlmvCWJ8AOsDrFpQtz">/pages/S9QlmvCWJ8AOsDrFpQtz</a></td></tr><tr><td><strong>PIN Override</strong></td><td>How PIN-protection wraps around component actions.</td><td><a href="/pages/ZB1p1C3xoZi8Tr9w4b1S">/pages/ZB1p1C3xoZi8Tr9w4b1S</a></td></tr><tr><td><strong>Best Practices</strong></td><td>Patterns for resilient data-driven pages.</td><td><a href="/pages/vAbsWdSLiwdLsG7BZSoq">/pages/vAbsWdSLiwdLsG7BZSoq</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started/component-configurations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.