User Interface functions

p.sidebar({ title, url })

Open a sidebar using Pipefy UI. Just need to send the IFrame URL and Sidebar title.

// Example from Emoji Sample App

p.sidebar({
  title: 'Sidebar with Flags',
  url: './sidebar.html',
});

p.closeSidebar()

Close the sidebar in the current context.

p.closeSidebar()

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.modal({
  url: './modal.html',
  height: '70%',
  width: '70%',
});

You can always resize later using PipefyApp.resizeTo

p.closeModal()

Close the modal in the current context.

p.closeModal()

p.openCard(id)

Send a message to Pipefy to open a Card by sending the Card ID.

p.openCard('23123')

p.closeCard()

Send a message to Pipefy close the current open Card.

p.closeCard()

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.

Examples

// Simple list of items with callback
p.dropdown({
  title: 'Emoji app',
  items: [
    {
      title: '😈  Set Card Emoji',
      callback:  function(p) { /*...*/ },
    },
    {
      title: '😎  Open Modal',
      callback: function(p) { /*p.modal(...)*/ },
    },
    {
      title: '👋  Close card',
      callback: function(p) { p.closeCard() },
    },
  ]
});

// Using dropdown to render an Iframe
p.dropdown({
  title: 'Select Card Emoji',
  url: './set-emoji.html',
  height: '500px',
});

You can always resize later your iframe dropdown using PipefyApp.resizeTo

p.closeDropdown()

Close the dropdown in the current context. You can use to close dropdown after an item callback.

p.closeDropdown()

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

• title: Title that will be displayed on top of dropdown
• placeholder: Placeholder will be displayed inside search input
• empty: Text will be displayed when no items are returned
• loading: Loading text, will be displayed while Promise is not resolved.
• 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

var transformToSearchItem = function(emoji) {
  var title = emoji.name + " " + emoji.emoji;
  return {
    title: title,
    callback: function(p) {
      // ...
    }
  }
};

p.search({
  title: 'Select Emoji',
  placeholder: 'Search Emoji',
  empty: 'No Emoji found',
  loading: 'Looking for Emoji...',
  items: function(p, query) {
    return new Promise(function(resolve) {
      if (query && query.length) {
        var filteredEmojis = window.emojis_urls.filter(function(emoji) {
          return emoji.name.toLowerCase().indexOf(query.toLowerCase()) >= 0;
        });
        
        resolve(filteredEmojis.map(transformToSearchItem));
      } else {
        resolve(window.emojis_urls.map(transformToSearchItem));
      }
    });
  },
});

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.showNotification('🎉 Sample success notification', 'success');
p.showNotification('😢 Sample error notification', 'error');

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.

PipefyApp.resizeTo('#attachments');