The JavaScript SDK your app loads inside its iframe
The Apps Client SDK is the JavaScript library your app loads inside its iframe. It gives you a client object — conventionally named p — that talks to the Pipefy product across the frame boundary.
The pages before this one covered declaring your app: the manifest tells Pipefy your app exists, and features tell Pipefy where to render it. This section covers what your app can do once it is rendered.
Load the SDK with a single script tag:
<script src="https://platform.staticpipefy.com/pipefy-app.js"></script>
Apps only run inside Pipefy
The SDK needs an
appIDquery parameter, which Pipefy adds when it builds your iframe. Opening your app's URL directly in a browser tab throws an error instead of returning a client. See Client SDK overview.
What's in this section
| Page | What it covers |
|---|---|
| Client SDK overview | Loading the SDK, and the difference between PipefyApp.initCall() and PipefyApp.init() |
| Get Pipefy data | Reading the current card, pipe, fields, attachments, locale and timezone |
| Make API calls | p.query() and p.mutation() — the full Pipefy GraphQL API, as the logged-in user |
| Custom App Data | Storing your own data against a card, pipe or organization, and attaching links to cards |
| User Interface functions | Opening sidebars, modals, dropdowns and search; notifications; resizing your iframe |
| Where each function works | Which PipefyApp.* methods are available at which mount point |
| Promises | How asynchronous results are returned |
A minimal app
Every app has one entry point — the page at your manifest's init_url. It calls PipefyApp.initCall() once, registering a handler per feature:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://platform.staticpipefy.com/pipefy-app.js"></script>
<script>
PipefyApp.initCall({
'pipe-buttons': function (p, pipe) {
return [
{
text: 'Say hello',
callback: function (p) {
p.showNotification('Hello from ' + pipe.name, 'success');
},
},
];
},
});
</script>
</body>
</html>
Anything you render inside a sidebar, modal, dropdown or card tab is a separate page in a separate iframe. Those pages call PipefyApp.init() instead, to get their own client:
var p = PipefyApp.init();
p.card().then(function (card) {
document.getElementById('title').textContent = card.title;
});
Working example
HelloPipefy is a complete React app that wires up a card tab, a pipe view, pipe buttons, card buttons, a modal and a sidebar. See Sample Apps.