BUILDING YOUR FIRST QUIP LIVE APP

Posted on May 17th, 2019 by Vaishali Garg

INTRODUCTION:

Quip for Salesforce is another step for increasing productivity & collaboration by Salesforce. Quip is a simple platform for teams to enable collaboration and better document management. It combines chat, docs, task lists, and spreadsheets in one app — making collaboration fast and easy. Salesforce Quip integration allows the user to skip the endless chain of emails, meetings, chats and document versions by working simpler and faster with Quip on your desktop, tablet and phone.

The functionality of Quip is similar to Microsoft Online or Google docs where as Quip for Salesforce being a native SFDC product comes with an added advantage to get data from Salesforce to show dynamic information into Quip.

WHY QUIP for Salesforce

Quip for Salesforce creates a platform where developers can integrate solutions directly into the Quip canvas. The Apps that are built with Quip & Salesforce integration works on cross-platform and inherit collaboration and social features as well as notification and offline capabilities.

REQUIRED INSTALLS

LANGUAGES TO BUILD QUIP APPS

Instructions below are based on the Quip standard documentation[1],[2].

SETTING UP ENVIRONMENT

  1. Create a Quip login account first.
  2. Install Node version v6 and NPM version v3 or higher installed.
  3. Make Sure your Python installed version is at least v2.7.
  4. Run npm install -g create-quip-app in your terminal.
    quiplive
  5. Open your browser to allow self-signed certificates on localhost for HTTPS:
    1. In Chrome, copy this URL and open it in a new tab: chrome://flags/#allow-insecure-localhost Then click "Enable" and click the "Relaunch" button at the bottom of the page.
    2. In Firefox and Safari, go to https://localhost:8888, then click "Advanced → Add Exception → Confirm Security Exception".

STEPS FOR CREATING YOUR APP

  1. To create your live app, Go to the https://quip.com/dev/console/ and click "Create a Live App".
  2. Copy your App Id and paste it somewhere.
  3. From CLI run create-quip-app my-app in your terminal. After this step you will get the project structure similar to below: my-app |---package.json |---node_module |---webpack.config.js |---app |____manifest.json |---src |____App.less |____App.jsx |____root.jsx
  4. Go to CLI and run cd my-app.
  5. Open the file app/manifest.json.
  6. Paste your app ID in manifest.json.
  7. Give the name of app Hello World. This `Hello World` will be the title of your app.
  8. Save app/manifest.json file. So that changes will reflect on the Quip document.

STEPS FOR DEPLOYING YOUR APP:

Follow these steps for live your app on Quip document.

  1. Go to app directory “my-app” using CLI.
  2. Run npm run build in your CLI.
  3. Click on the “Upload app.ele” button in the https://quip.com/dev/console/.
  4. Select your app/app.ele file then click the "Upload" button.
  5. Open https://quip.com/ and create a new document.

    quiplive
  6. Create new document and write @Hello World or your app’s name from app/manifest.json file.
  7. Press ENTER or click on insert for insert an app to the document.
  8. Finally, you did it, and if all goes well, your app should be live on quip document.
    quiplive

SETTING A BUILD PROCESS:

You have business logic and some operations to perform with quip app. So you need to iterate your app locally many times. So follow below steps.

  1. Make sure you are in my-app directory, run npm start from CLI.
    • This command will compile your code and update the changes.
      quiplive
    • If the code compiles successfully, then upload app.ele to Quip.
      quiplive
  2. To get all changes reload your app by clicking on Reload
  3. Open my-app/src/App.jsx file, find the text "Hello, world!", and change it to something like “I did it!”: import Styles from "./App.less"; export default class App extends React.Component { render() { return <div className={Styles.hello}>I did it!</div>; } }
  4. Again click on Reload button from app’s menu and you will get all your changes to the quip document.
    quiplive

UNDERSTAND YOUR APP CODE:

Let’s understand code of your first app. Go to src/ directory, it contains three files Root.jsx, App.jsx and App.less.

// root.jsx import quip from "quip"; import App from "./App.jsx"; quip.apps.initialize({ initializationCallback: function(rootNode) { ReactDOM.render(<App/>, rootNode); }, }); // App.jsx import Styles from "./App.less"; export default class App extends React.Component { render() { return <div className={Styles.hello}>YES it worked!</div>; } } // App.less .hello { display: flex; justify-content: center; }

WHAT'S GOING ON:

  • quip.apps.initialize() is the starting point. It is loading code and making it ready for setup.
  • To check if your instance is ready, quip document makes a call to initializationCallback to notify setup is complete.
  • In Quip document iframe rootNode is empty HTML you can add html element.
  • In root.jsx file, tag is used for rendering your html element. ReactDOM.render(, rootNode);
    • We can import styles.less file by using import Styles from ‘./App.less’; all css part we can write in App.less file.
  • As you develop your app, you'll add new .jsx and .less files as component to the src/directory. New .jsx file we can call it component.

NOTE: The term used in document CLI means command-line interface.

References

  1. https://quip.com/dev/liveapps/documentation
  2. https://github.com/quip/quip-apps

If you have any requirements related to building Quip apps or need to understand how you can use Salesforce and Quip together, please feel free to connect with our team at quip@astreait.com

For any query on Quip, contact support@astreait.com