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.
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()sends the user straight back to the Kanban board — which looks like the view is broken rather than unloaded.
<!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)— subscribe to product events on the pipe (onCardCreated,onCardDeleted,onCardUpdated,onFilterChanged) so your view can refresh itself instead of polling.PipefyApp.pipeFilter(pipeId)— apply the pipe's current filters, so your view shows the same subset of cards the user filtered to elsewhere.
Note that PipefyApp.resizeTo() throws in a pipe view — the frame is already full-width, so there is nothing to size against. See Where each function works.
See also
- Where each function works — mount-point availability
- Get Pipefy data — reading the pipe and its fields
- Make API calls — querying the cards to display
- Sample Apps — a working pipe view in React