Apps Client SDK

  • 27 March 2021
  • 5 replies
  • 525 views
Apps Client SDK
Juliana Spinardi
Rank
Userlevel 7
Badge +8

📌 Introduction

Use the Client SDK to interact with the our Apps framework directly from your iframe. The SDK provides a PipefyApp  global object that allows cross-frame communication between your app and the host Pipefy product. 

 

🔎 Getting the SDK

Import the Pipefy Client SDK from  https://platform.staticpipefy.com/pipefy-app.js  Example:

 

🔎 Using Client SDK

On your Initial page defined by 

init_url

 

🔎 On your iframes inside dropdowns, modals, tabs and  sidebars

 

☝️ CUSTOM APP DATA  

p.set(scope, visibility, key, value) - Store data on Pipefy relative to a card, pipe or organization. Apps can only access their own stored data.

 

🔎 Scope 

 

🔎 Visibility 

 

🔎 p.get(scope, visibility, key) - Get data that the App stored, based on scope, visibility and key passed by parameters.

 

🔎 p.attach({url, name}) - Attach a link to card sending URL and name. Apps can claim these attachments later and render properly.

🔎 p.detach(id) - Detach a link from the current card. Apps can only detach attachments that the same App attached.

 

 

 

☝️  GET PIPEFY DATA

🔎 p.card(ID) - Return Promise with current card in the context as result

Example Call
 

 

Return 

🔎 p.fields() - Return fields of current Pipe

Example Call

Return 

🔎 p.pipe() - Return current Pipe attributes

Return 

🔎 p.cardAttachments() - Return current card Apps attachments, those attached using p.attach function.

Return
Promise will resolve to an array with list of card app attachments object. This object contains the attachment id, url and name.

Example

 🔎 p.timezone() - Return current user timezone (tz database timezone name)

🔎 p.locale - Return current user locale, example: en-gb, pt-br, en, ru, es and fr.

 

☝️ USER INTERFACE FUNCTIONS 

 

🔎  p.sidebar({ title, url }) - Open a sidebar using Pipefy UI. Just need to send the IFrame URL and Sidebar title.

🔎  p.closeSidebar() - Close the sidebar in the current context.

🔎 p.modal({ url, width, height }) - Open a new modal using Pipefy UI. App needs to specify the IFrame URL, width and height of modal.

Options
url: Relative URL to page that will be rendered inside the modal
height: Height of modal, accepts pixels or percentage: Ex.: 500px or 50%
width: Width of modal, accepts pixels or percentage: Ex.: 500px or 50%

Example

🔎 p.closeModal() - Close the modal in the current context.

 

🔎  p.openCard(id) - Send a message to Pipefy to open a Card by sending the Card ID.

 

🔎   p.closeCard() - Send a message to Pipefy close the current open Card.

🔎  p.dropdown(options) - Open a dropdown using Pipefy UI. Every dropdown have a title attribute, you can use dropdown to display a simple list of items using the items attribute or render an IFrame using the url attribute.

Example 

 

🔎 p.closeDropdown() - Close the dropdown in the current context. You can use to close dropdown after an item callback.

🔎 p.search(options)
Open a dropdown with predefined UI for search, you just need to define which items will be displayed based on the query. You can filter using Javascript and pass the query to an external API to get filtered results.

  • Parameters
    1. title: Title that will be displayed on top of dropdown
    2. placeholder: Placeholder will be displayed inside search input
    3. empty: Text will be displayed when no items are returned
    4. loading: Loading text, will be displayed while Promise is not resolved.
    5. items: Function that receives the p(Pipefy Client) and query that user entered, expect to return a Promise that resolves and return an array of items with titleand callback.
  • Example from Emoji App

 

🔎  p.showNotification(text, type) - Send an in-app notification to user using the same kind of Pipefy notifications.
 

 

🔎 Parameters: text: Notification message | type: Type of notification, accepts error and success

 

🔎p.render(callback) - Building…

 

🔎PipefyApp.resizeTo(selector); - Call this function to resize the current iFrame inside dropdown or modal to the current element width and height from selector.

 

 

☝️ PROMISES 

Since all communication between Apps and Pipefy return a Promise, we provide Bluebird Promise with Pipefy Apps Clients SDK.

For more info about Bluebird and Promises:

http://bluebirdjs.com/docs/getting-started.html
http://bluebirdjs.com/docs/why-promises.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

5 replies

silvio.angelo
Userlevel 4
Badge +1

Guys,

I´m trying to open a site inside the pipefy app like the calendar app with the ‘pipe-buttons’ example, but when i click on it, he open a new window instead of open inside like this calendar. I´m using the apper.in tempate example to do this. How can i show my html file inside the pipefy like the calendar?

 

 

genietim
Userlevel 7
Badge +12

What does “p.render(callback) - Building…” refer to? @Juliana Spinardi I guess this is the same as in the dev documentation due to copy-pasting, but it would be nice if there was a documentation for this function somewhere ^^

genietim
Userlevel 7
Badge +12

@silvio.angelo what you are looking for is the `pipe-view` feature, that is undocumented too. An example is given by

Sample React App with Pipe Views

 

you can also look at the source of the calendar app:

manifest, html.

silvio.angelo
Userlevel 4
Badge +1

@genietim 

I Got it.

Can you send me all the Calendar app source or the glitch url, not just the manifest and html files or put it on “Samples Apps” Section that @Juliana Spinardi wrote.

About these files that you showed, i can open the manifest but the html file is not working for download in this comments like you did.

genietim
Userlevel 7
Badge +12

Sorry, dear @silvio.angelo , I am only a user too just as you, I cannot edit the “Sample Apps” sections nor the documentation. Nor do I have the permissions to scrape the code from the calendar app and publish it somewhere else, that’s why I am doing it via links.

I guess the reason you see a difference with the HTML is that it’s HTML, so the browser just shows the empty HTML page instead of downloading it. You can access the corresponding JavaScript here, though be aware that it is post-processed, so barely helpful (includes all the libraries, e.g. moment.js — interestingly, unminified). The manifest with the `pipe-view` is more important, as is probably the following section in the script:

var pipefy = PipefyApp.init(); /* global document, PipefyApp */


pipefy.getAuthToken().then(function (token) {
  var client = (0, _apollo_client2.default)(token, 'internal_api');

  PipefyApp.render(function () {
    return null;
  });

  var renderer = function renderer(filter) {
    _reactDom2.default.render(_react2.default.createElement(
      _reactApollo.ApolloProvider,
      { client: client },
      _react2.default.createElement(_calendar2.default, { pipefy: pipefy, filter: filter })
    ), document.getElementById('calendar'));
  };

  (0, _utils.getPipefyFilter)(PipefyApp, pipefy, renderer);
});

though you will have to follow the _react2 and _reactDom2 variables to find out where they are from. As you can see, the undocumented pipefy.render() that I mention in the comment above plays a vital role too, though I am not sure which one actually, just returning null :/

Reply


Terms & ConditionsCookie settings