---
agentTools:
  projectIndex: https://developers.pipefy.com/llms.txt
---

# pipe-view

A full-width view of your own that replaces the Kanban board

A pipe view replaces the Kanban board with a full-width page of your own — a dashboard, a report, a table, or an embedded external tool. It appears alongside Pipefy's own views (Kanban, table, calendar) as another way to look at the pipe.

## How it works

Your `pipe-view` handler returns a **single object** describing the view. The `url` points at a page of yours, which Pipefy loads in a full-width iframe.

```javascript
PipefyApp.initCall({
  'pipe-view': function (p, pipe) {
    return {
      icon: './images/icon.svg',
      text: 'Sprint board',
      url: './pipe-view.html',
    };
  },
});
```

> ⚠️ Pipe views must call `PipefyApp.render()`
>
> Pipefy waits for your page to signal that it has finished loading before it shows the view. A pipe view that never calls [`PipefyApp.render()`](https://developers.pipefy.com/docs/user-interface-functions#pipefyapprendercallback) sends the user straight back to the Kanban board — which looks like the view is broken rather than unloaded.

```html
<!DOCTYPE html>
<html>
  <head><meta charset="utf-8"></head>
  <body>
    <div id="root">Loading…</div>
    <script src="https://platform.staticpipefy.com/pipefy-app.js"></script>
    <script>
      var p = PipefyApp.init();

      // Tell Pipefy the page is ready — required, or the user is redirected away
      PipefyApp.render(function () {
        p.pipe().then(function (pipe) {
          document.getElementById('root').textContent = pipe.name;
        });
      });
    </script>
  </body>
</html>
```

## Receive

* **p**: Pipefy Client
* **pipe**: Pipe object `{ id: '23dfu', name: 'Hotdog app' }`

## Return

A single object.

* **icon**: SVG relative path, resolved against your app's `init_url`
* **text**: The view's name, shown in the view switcher
* **url**: Relative URL to the page that renders the view

## Functions available only here

Two SDK functions exist specifically for pipe views:

* [`PipefyApp.registerListener(eventName, callback)`](https://developers.pipefy.com/docs/user-interface-functions#pipefyappregisterlistenereventname-callback) — subscribe to product events on the pipe (`onCardCreated`, `onCardDeleted`, `onCardUpdated`, `onFilterChanged`) so your view can refresh itself instead of polling.
* [`PipefyApp.pipeFilter(pipeId)`](https://developers.pipefy.com/docs/user-interface-functions#pipefyapppipefilterpipeid) — apply the pipe's current filters, so your view shows the same subset of cards the user filtered to elsewhere.

Note that [`PipefyApp.resizeTo()`](https://developers.pipefy.com/docs/user-interface-functions#pipefyappresizetoselector) **throws** in a pipe view — the frame is already full-width, so there is nothing to size against. See [Where each function works](https://developers.pipefy.com/docs/sdk-availability).

## See also

* [Where each function works](https://developers.pipefy.com/docs/sdk-availability) — mount-point availability
* [Get Pipefy data](https://developers.pipefy.com/docs/get-pipefy-data) — reading the pipe and its fields
* [Make API calls](https://developers.pipefy.com/docs/make-api-calls) — querying the cards to display
* [Sample Apps](https://developers.pipefy.com/docs/sample-apps) — a working pipe view in React