# OneClick Interface Builder

> Interface Builder lets an admin build the Interface views that an Interface button opens in Pipedrive.

## Interface Builder

- [Interface Builder](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder.md): Build custom views for Pipedrive with Interface Builder. Start with a tutorial, or find the how-to guides, the block reference and the concepts of the views.
- [Building Your First Interface](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/tutorials/01-first-interface.md): Create and save a simple interface with Title and Paragraph blocks
- [Displaying Pipedrive Data in Your Interface](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/tutorials/02-data-binding-basics.md): Bind Pipedrive resource data to blocks using the Data Picker
- [Building a Form](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/tutorials/03-building-a-form.md): Create a complete form with inputs and a submit button
- [Building a Multi-View Application](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/tutorials/04-multi-view-app.md): Create an app with multiple views and navigation
- [Building a Table View](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/tutorials/05-table-view.md): Create a data table with columns and actions
- [Creating a New View](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/views/creating-a-view.md): Add views to an interface
- [Managing Interface Views](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/views/managing-interface-views.md): Browse, copy, and delete the views in your interface
- [Navigating Between Views](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/views/navigation.md): Set up view navigation
- [Saving](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/views/publishing.md): Understand how saves reach end users and which validation rules have to pass
- [Snapshots](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/views/snapshots.md): Take a copy of an interface and return the interface to it
- [Testing a View with Real Data](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/views/testing-a-view.md): Render your view against live Pipedrive records and external data sources
- [How to Create a Form](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/forms/creating-a-form.md): Set up a form structure on the canvas
- [Configuring Form Submission](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/forms/form-submission.md): Set up how the form sends data and what the user sees after they submit
- [Form Validation](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/forms/form-validation.md): Understand validation rules
- [Input Field Types and Configuration](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/forms/input-field-types.md): Configure all input types
- [Using the Data Picker](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/data/data-picker.md): Insert dynamic data into block settings
- [Configuring an External Data Source](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/data/external-data-source.md): Connect to external APIs
- [Sending Messages and Toasts from Your Backend](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/data/messages-and-toasts.md): Decide exactly what your API should return so the user sees the right message in the right place
- [Using Search Parameters](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/data/search-params.md): Pass and use URL parameters
- [Managing Interface Variables](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/data/variables.md): Create, use, and manage variables
- [How to Use Alert and Badge Blocks](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/blocks/alert-and-badge.md): Add notification alerts and status badges
- [How to Add Avatars](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/blocks/avatar.md): Display profile/avatar images
- [How to Add and Configure Buttons](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/blocks/button.md): Configure all button types
- [How to Add Charts](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/blocks/chart.md): Create bar, line, area, or pie charts
- [How to Use Hover Cards](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/blocks/hover-card.md): Add tooltip-style hoverable cards
- [How to Use the HTML Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/blocks/html.md): Embed custom HTML content
- [How to Add Images](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/blocks/image.md): Add static or dynamic images
- [How to Add a Navigation Bar](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/blocks/navbar.md): Configure a navbar with links, a title, and a logo
- [How to Configure Tables](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/blocks/table.md): Set up table data source, columns, and actions
- [Using Areas to Group Rows](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/layout/areas.md): Group rows into named areas, control their visibility, and repeat them for each item in your data
- [Styling Individual Blocks](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/layout/block-styles.md): Customize a single block's appearance
- [Using Global Styles](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/layout/global-styles.md): Apply consistent styling across the whole view
- [Managing Rows and Columns](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/layout/rows-and-columns.md): Control layout structure
- [Conditional Visibility](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/visibility/conditional-visibility.md): Show or hide blocks, rows, and areas based on data
- [Connecting Claude Code to Interface Builder](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/how-to/agent/connect-claude-code.md): Let Claude Code read and edit your views through the tools of a browser tab
- [Alert Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/alert.md): The Alert block shows a colored notification banner with a title and description.
- [Avatar Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/avatar.md): The Avatar block shows a circular profile image with a text fallback.
- [Badge Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/badge.md): The Badge block renders a small status label.
- [Button Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/button.md): The Button block renders a clickable button.
- [Chart Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/chart.md): The Chart block renders a bar, line, area, or pie chart from an array in your data.
- [Divider Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/divider.md): The Divider block renders a horizontal separator line.
- [Hover Card Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/hover-card.md): The Hover Card block shows a popup card when the user hovers over a trigger.
- [HTML Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/html.md): The HTML block renders custom HTML markup directly inside the view.
- [Image Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/image.md): The Image block shows an image from a URL.
- [Input Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/input.md): The Input block renders a form field.
- [Navbar Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/navbar.md): The Navbar block renders a navigation menu.
- [Paragraph Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/paragraph.md): The Paragraph block renders body text.
- [Table Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/table.md): The Table block shows a grid of data sourced from an array.
- [Title Block](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/block-types/title.md): The Title block renders a large heading.
- [Binding Reference for Agents](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/data-binding/agent-bindings.md): The data each binding namespace reads, when a placeholder needs arrayPath, what an Area loop's target and count resolve to, and which compiler functions exist.
- [Data Picker](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/data-binding/data-picker.md): The Data Picker is the tool you use to insert dynamic data into any block setting.
- [Form Submission Types](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/data-binding/form-submission-types.md): A submit button's Form Type setting controls how form data leaves the browser.
- [Functions Reference](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/data-binding/functions.md): The Data Picker's Functions tab exposes 57 helper functions that transform, format, and combine values inside placeholders.
- [HTTP Response Format](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/data-binding/http-response-format.md): Two places in an interface call a server: the Submit URL on a Form Submit Button, and the View URL on a view with a data source.
- [Messages & Toasts Reference](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/data-binding/messaging.md): Interface Builder sends each server-authored message (a submission toast, inline alert or data-source message view) through an HTML sanitiser before rendering.
- [Pipedrive Resources Reference](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/data-binding/pipedrive-resources.md): The interface builder connects to Pipedrive CRM data through four resource types.
- [Placeholder Syntax](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/data-binding/placeholder-syntax.md): Placeholders are the way you insert live data values into the interface.
- [View Data Source](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/data-binding/view-data-source.md): When a view's URL is configured under View settings → Configure URL and URL Active is on, the rendered view loads custom data from your endpoint.
- [Areas](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/layout/areas.md): An Area groups consecutive rows on the canvas so they share visibility rules and, optionally, a loop.
- [Block Styles](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/styles/block-styles.md): Every block has a Style sub-tab in Block Settings (next to Configuration and Visibility) that controls how the block looks: background, text, borders, corners.
- [Global Styles](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/styles/global-styles.md): Global Styles are view-wide defaults for font size, font color, row spacing, and column spacing.
- [Builder View](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/ui/builder.md): The builder is where you build a view.
- [Rows, Columns, and Layouts](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/ui/row-layouts.md): A view is built by stacking rows.
- [Settings Panel](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/ui/settings-panel.md): The settings panel is the sidebar on the right side of the builder.
- [Sidebar](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/reference/ui/sidebar.md): The sidebar is the panel on the right side of the builder.
- [How Interface Builder Works](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/explanation/architecture.md): Understand how the system connects to Pipedrive and what data is available
- [External Data Flow](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/explanation/external-data-flow.md): Understand how a view loads data from your endpoint, why some modes skip the fetch, and how Pipedrive data and your custom data are sequenced
- [Floating Window Buttons](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/explanation/floating-window-buttons.md): Understand what a floating window button is, why its views get no Pipedrive record, and what you can still build with one
- [Form System](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/explanation/form-system.md): Understand how forms work in Interface Builder
- [Panel and Floating window](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/explanation/panel-and-floating-window.md): The two places of an Interface button in Pipedrive, the Panel and the Floating window, and the data that each place gives to the view.
- [Securing Your Endpoint](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/explanation/securing-your-endpoint.md): Understand why your endpoint needs authentication and how to verify that requests really come from Interface Builder
- [URL Button Flow](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/explanation/url-button-flow.md): Understand what a URL button does at runtime, when it polls for follow-up updates, and how redirects and toasts come back to the user
- [Visibility System](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/explanation/visibility-system.md): Understand how conditional visibility works
- [What is Interface Builder?](https://help.theoneclick.io/docs/buttons/interface-button/interface-builder/explanation/what-is-interface-builder.md): Conceptual overview of the application