Initialization

quip.apps.initialize​

To initialize your Live App, the app should call quip.apps.initialize with a config of type quip.apps.InitOptions. Your app must call this method within a timeout or it will be considered broken and an error message will be displayed to the user.

quip.apps.InitOptions​

This is the set of initialization options the app can specify when initializing the app instance. It has the following parameters:

initializationCallback​

required

Function(root: Element, params: InitializationParameters) => void

When the app calls initialize, we set up the container and call this callback so you can set up your app. See InitializationParameters for documentation on the possible params.

toolbarState​

optional

quip.apps.ToolbarState

The initial state of the Live App's toolbar menus. See quip.apps.ToolbarState for more details.

InitializationParameters​

isCreation​

required

boolean

true if this app is being inserted into a document.

creationUrl​

optional

string

This will be set to a string representation of the url that generated this app if the app was inserted via an intercept URL. Note that this is only available on web.

initOptions​

optional

string

If this app was created with options (usually via being inserted as HTML via the automation API or another automation), this will be a (typically JSON) string with initialization parameters.

initOptionsSource​

optional

enum initOptionsSource: string {
    NONE = "NONE"
    TEMPLATE = "TEMPLATE"
    HTML_IMPORT = "TEMPLATE"
}

A string enum value indicating how this app was inserted (only provided if the app is being inserted):

• NONE: inserted by a user
• TEMPLATE: created via a template
• HTML_IMPORT: created via an HTML import

creationBlobs​

required

Blob[]

An array of blobs that this Live App was initialized with.

Example​

import {Component}, React from "react";
import ReactDOM from "react-dom";
import quip from "quip-apps-api";

class Root extends Component {
    render() {
        return <div>Hello World!</div>;
    }
}

quip.apps.initialize({
    initializationCallback: async (root, params) => {
        const rootRecord = quip.apps.getRootRecord();

        if (params.isCreation) {
            console.log("App instance created for the first time!");
        }

        ReactDOM.render(<Root />, root);
    },
    toolbarState: {
        menuCommands: [
            {
                id: "addItem",
                label: "Add Item",
                handler: () => console.log("Add Item"),
            },
            {
                id: "deleteItem",
                label: "Delete Item",
                handler: () => console.log("Delete Item"),
            },
        ],
        toolbarCommandIds: [
            "addItem",
            "deleteItem"
        ],
    },
});

import {Component}, React from "react";
import ReactDOM from "react-dom";
import quip from "quip-apps-api";

class Root extends Component {
    render() {
        return <div>Hello World!</div>;
    }
}

quip.apps.initialize({
    initializationCallback: async (root, params) => {
        const rootRecord = quip.apps.getRootRecord();

        if (params.isCreation) {
            console.log("App instance created for the first time!");
        }

        ReactDOM.render(<Root />, root);
    },
    toolbarState: {
        menuCommands: [
            {
                id: "addItem",
                label: "Add Item",
                handler: () => console.log("Add Item"),
            },
            {
                id: "deleteItem",
                label: "Delete Item",
                handler: () => console.log("Delete Item"),
            },
        ],
        toolbarCommandIds: [
            "addItem",
            "deleteItem"
        ],
    },
});