Interface Builder

Appearance

Building Your First Interface ​

Type: Tutorial | Audience: New end-user | Goal: Create and save a simple interface with Title and Paragraph blocks

Opening the Application ​

Interface Builder is accessed from Pipedrive via a OneClick button. When the app loads, you land on the Interface Selection Page, which lists all views belonging to this button. You will see two tabs at the top: Views and Variables.

Interface Selection Page when no views exist yet. The Views tab is selected at the top alongside a Variables tab. The 'Fortnox Invoicing / Interface Views' heading is followed by a yellow Beta Feature notice. The 'Your Views (0)' section shows an empty state with a 'No views yet' message, the helper text 'Create your first interface view to get started building custom interfaces.', and a Create New button.

Creating a New Interface ​

  1. On the Interface Selection Page, click the Create New button next to the Your Views heading.
  2. The Create new view dialog opens.
  3. Enter a descriptive Name — this name is how you will reference it later when setting up navigation between views. The optional Description and Default view toggle can be left at their defaults.
  4. Click Create. The new view opens in the Builder.

Create new view dialog overlaid on an empty Views list. The dialog contains a focused Name input, an empty Description input, a Default view toggle, and a Create button at the bottom.

Understanding the Builder ​

When you open a view, the Builder loads with three main areas:

  • Canvas (left side) — the main working area where you build your interface by arranging rows and blocks.
  • Sidebar (right side) — shows configuration options for whatever is selected. It has two main tabs at the top: the current selection tab (Block Settings, Row Settings, etc.) and View settings.
  • Top Bar — a navigation bar at the top of the canvas with the interface name, a back arrow to return to the view list, and three buttons on the right: Preview, Test, and Sample data.

The top bar also shows a Saving... spinner indicator whenever your changes are being auto-saved.

Empty Builder view. The top bar shows the view name 'docs-first-interface' on the left, a back arrow, and Preview, Test, and Sample data buttons on the right. The canvas in the center shows a 'Start building' placeholder with an 'Add first row' button. The right sidebar shows the View settings tab with View URL, Global Styles, and View ID fields.

Adding a Row ​

Before you can place any content blocks, you need a row. Rows define the column layout of your interface.

  1. On an empty canvas, click the Add first row button. On a non-empty canvas, hover the gap between two rows and click the + button that appears.
  2. The Add row dialog opens.
  3. Pick a layout:
    • Full width — a single column at 100% width
    • Two columns — two equal 50/50 columns
    • Three columns — three equal 33/33/33 columns
    • Sidebar left — 25/75 split
    • Sidebar right — 75/25 split
    • Form — adds a Form Start + Form End marker pair (covered in Building a Form)
  4. The dialog closes and the new row appears on the canvas as an empty container with a grey column placeholder.

Add row dialog open over the empty canvas. The dialog lists six layout options stacked vertically with icons and short descriptions: Full width, Two columns, Three columns, Sidebar left, Sidebar right, and Form.

Adding a Title Block ​

  1. Click an empty column inside the row you just created. The Add block dialog opens.
  2. Pick Title from the list.
  3. The block appears on the canvas with an empty text value.

Add block dialog open over the canvas with the empty Column on the left. The dialog grid lists Button, Title, Paragraph, Image, Divider, Table, HTML, Input (disabled), Navbar, Avatar, Hover Card, Chart, Alert, and Badge. The Title tile is highlighted with a hover state.

Editing Block Content ​

  1. Click on the Title block in the canvas to select it.
  2. The sidebar switches to the Block Settings tab.
  3. You will see a Text field. This is a Data-Picker-enabled input that supports both static text and dynamic data placeholders.
  4. Type your title text, for example: Welcome to My Interface.
  5. The canvas updates in real-time to reflect your changes.

Builder canvas with a Full row containing a selected Title block. The right sidebar shows the Block Settings tab with the Configuration sub-tab open. Block Configuration fields are visible: Name 'Title' and Text 'Welcome to My Interface'.

Adding a Paragraph Block ​

  1. Add another row using the + button (or use a multi-column row from before).
  2. Click an empty column to open Add block and pick Paragraph.
  3. Click the new Paragraph block to select it.
  4. In the Block Settings tab you will see a Value field — the same Data-Picker-enabled input as the Title block's Text field.
  5. Type your paragraph text, for example: This is my first interface built with Interface Builder.

Builder canvas with two Full rows. Row 1 contains a Title block; Row 2 contains a Paragraph block which is currently selected (blue outline). The right sidebar shows the Paragraph block's Block Configuration with Name 'Paragraph' and the Value field filled with 'This is my first interface built with Interface Builder.'

Previewing Your Interface ​

  1. Click the Preview button in the top bar.
  2. The view switches from the Builder to Preview mode.
  3. In Preview mode, you see your interface rendered as it will appear to end users. Click the Pipedrive resource button at the top to pick a specific deal, person, or organization to test with.
  4. To return to the Builder, click the back arrow at the top-left of the Preview screen.

Preview mode header (back arrow, 'Preview' title, 'Deal #1995' context badge) above the rendered interface. The interface shows the heading 'Welcome to My Interface' and the paragraph 'This is my first interface built with Interface Builder.'

Saving ​

Your work is saved automatically. After a brief pause in editing, the Builder saves your latest changes to the server. You will see a Saving... indicator with a spinner in the top bar while the save is in progress.

There is no manual save button — just keep building and your changes are persisted.

Summary ​

In this tutorial you learned to:

  • Open Interface Builder from the Interface Selection Page
  • Create a new view via the Create New button and the Create new view dialog
  • Understand the Builder layout: canvas, sidebar, and top bar
  • Add rows from the Add row dialog and pick column layouts
  • Add Title and Paragraph blocks from the Add block dialog
  • Edit block content via the sidebar
  • Preview your interface
  • Rely on auto-save for persisting your work