---
updatedAt: 2025-09-24T21:00:45.000Z
agentTools:
  projectIndex: https://docs.quable.com/v5-EN/llms.txt
---

# Quable Apps

Need a special function from an external app? Integrate it!

<Callout icon="🔔" theme="default">
  ### Subscription to Quable App

  Quable Apps are subscription-based options.

  ➡️ For more information, please contact your Customer Success Manager.
</Callout>

Quable Apps provide extra functionality directly within your Quable PIM. They enable external parties or partners to securely access your Quable PIM content to provide a function or service for all contributors.

## Administrators

The **Quable Apps** page is where you can find and manage all the Quable apps (custom or mainstream) installed on your PIM. On the following page, you can find a table with all your installed app listed, along with their data.

<Image title="Capture d’écran 2022-10-27 à 16.38.20.png" alt={2847} align="center" width="80%" src="https://files.readme.io/874be7b-Capture_decran_2022-10-27_a_16.38.20.png" />

### Creating a Custom Quable App

To add a new Custom Quable, to create a connection with another solution for your ecosystem for example, click the **Create an app** button:

<Image title="Capture d’écran 2022-10-27 à 16.43.30.png" alt={218} align="center" width="auto" src="https://files.readme.io/3e3f699-Capture_decran_2022-10-27_a_16.43.30.png" />

A form is displayed to define the new app and its properties.

<Image title="Capture d’écran 2022-10-27 à 16.50.51.png" alt={2850} align="center" width="80%" src="https://files.readme.io/f311f55-Capture_decran_2022-10-27_a_16.50.51.png" />

<HTMLBlock>{`
<div></div>
<table style="background-color:#ffffff">
<tr style="background-color:#eceff1"><th width="30%">Information</th><th>Description></tr>
<tr style="background-color:#ffffff"><td><strong>Display Name</strong></td><td>Enter a descriptive name for the connection.</td></tr>
<tr style="background-color:#ffffff"><td><strong>Code</strong></td><td>Enter an alphanumeric value to identify the connection.<p><p><strong>Note</strong>: This value cannot be changed after the connection has been created.</td></tr>
<tr style="background-color:#ffffff"><td><strong>Description</strong></td><td>Enter text to describe the purpose of the API connection.</td></tr>
<tr style="background-color:#ffffff"><td><strong>Information type</strong></td><td>Specify the type of information to send to the API:<p><ul><li><strong>Document</strong> - to send document information.<br>You then need to select a <strong>Document type</strong><p></li></ul></td></tr>
<tr style="background-color:#ffffff"><td><strong>Font Awesome icon</strong></td><td>Click on the emoji face to select an icon or enter the name of a <a href="https://fontawesome.com/v5/cheatsheet">Font Awesome icon</a> to display as the QuableApp icon.</td></tr>
<tr style="background-color:#ffffff"><td><strong>URI of external app</strong></td><td>Enter the URI of the app.</td></tr>
<tr style="background-color:#ffffff"><td><strong>Authentication type</strong></td><td>Select the type of authentication to use and enter the value in the appropriate entry area:<p><ul><li><strong>Token</strong> - a random string of letters and numbers provided by the QuableApp API.<p></li><li><strong>Parameter</strong> - JSON code defining the API's required connection information.</li></ul></td></tr>
</table>
<style></style>
`}</HTMLBlock>

Once you've entered all of the information, click the **Apply** button to save your new Quable App.\
You can also click on the breadcrumb on top of the form to return to the **Quable Apps** table page without saving the app.

### Editing an app

You can modify a connection by selecting one from the list and clicking the **Edit** button.

<Image title="Capture d’écran 2022-10-27 à 16.54.45.png" alt={162} align="center" width="auto" src="https://files.readme.io/beb1be2-Capture_decran_2022-10-27_a_16.54.45.png" />

A form is displayed to modify the connection and its properties.  When you've finished making modifications, click the:

* **Apply** button to save your changes, or
* **Back** button to return to the **QuableApp** page without saving the changes.

### Deleting an app

You can delete a connection by selecting one from the list on the **QuableApp** page and clicking the **Remove** button.

<Image title="Capture d’écran 2022-10-27 à 16.54.45 copie.png" alt={162} align="center" width="auto" src="https://files.readme.io/ee95684-Capture_decran_2022-10-27_a_16.54.45_copie.png" />

A dialog is displayed to cancel or confirm the deletion.

<Image title="Capture d’écran 2022-10-27 à 16.59.08.png" alt={926} align="center" width="auto" src="https://files.readme.io/585d101-Capture_decran_2022-10-27_a_16.59.08.png" />

> ❗️ Attention
>
> This action is irreversible. Once a connection has been deleted, it can't be recovered.

## Integrators

### Call from Quable

> 🚧 Prerequisite
>
> In order to connect an external application, you must have knowledge about the authentication mechanism, headers, endpoints, and parameters

> 👍
>
> Communications are based on REST principles and follow the [RFC2119](https://www.rfc-editor.org/info/rfc2119) guidelines.

Quable PIM takes the information you entered when creating the connection and uses it to "talk" to the external API. The conversation has two parts: the *call* with information being sent and instructions for a *response*.

#### How it works

When a PIM user clicks on the button, an API call is made to the Quable PIM API. The Quable API will call "back" the URL provided in the connection with the requested parameters and will wait for a specific answer (see below).

This answer will include a URL and it is this one that will be loaded in the window that the user will see displayed.

#### Calling the URI

The Quable API makes a <code>POST</code> call to the external API's Resource URI:

```curl
curl --request POST \
  --url http://thirdpartyapp.theirdomain.com/appservice
  --header 'Accept: application/json' \
  --header 'Content-Type: application/json'
```

Here's a breakdown:

<Table align={["left","left"]}>
  <thead>
    <tr>
      <th>

      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        **Request** 
      </td>

      <td>
        HTTP verb / method  to announce that information is being sent and to create a resource in the API:  

        <code>POST</code>
      </td>
    </tr>

    <tr>
      <td>
        **URL** 
      </td>

      <td>
        The address of the API resource:  

        "\{\{http}}://quableapp.theirdomain.com/appservice"
      </td>
    </tr>

    <tr>
      <td>
        **Headers** 
      </td>

      <td>
        Identifies the format of the information sent:  

        "Accept: application/json"\
        "Content-Type: application/json"
      </td>
    </tr>
  </tbody>
</Table>

Next, comes the body of the conversation, the *data*. It includes the information to process and callback instructions for the API:

```json
"data": {
    "quableInstanceName": "my-instance",
    "userName": "johnDoe",
    "userEmail": "jonhDoe@domain.com",
    "userId": 153,
    "sourceAction": "document_page",
    "documentIds": [
        "001234",
        "A23979"
    ],
    "notificationCallback": {
        "url": "http://my-instance.quable.com/myservice",
        "token": "abc1defgh23ijkl4mnopq56urstuv78wxyz9",
        "method": "POST"
    }
}
```

The data contains three parts: Identity, Processing information, and Callback instructions.

Here's a breakdown of them:

<Table align={["left","left"]}>
  <thead>
    <tr>
      <th>

      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        Identity
      </td>

      <td>
        Information identifying Quable PIM and the user requesting access to the QuableApp:  

        "quableInstanceName"\
        "userName"\
        "userId"\
        "userEmail"
      </td>
    </tr>

    <tr>
      <td>
        Processing information
      </td>

      <td>
        Information on the type of content to be processed:  

        "sourceAction"\
         "documentIds"
      </td>
    </tr>

    <tr>
      <td>
        Callback instructions
      </td>

      <td>
        The URL of the Quable API to call at the end of processing in order to send a notification to the user - if desired:  

        "notificationCallback.url"\
        "notificationCallback.token"\
        "notificationCallback.method"
      </td>
    </tr>
  </tbody>
</Table>

### Response to Quable

The Quable App receives a call from the Quable API with the information given in the connection and the data about the user and the objects to be processed.

In order for the PIM to offer the content of the App to the user, the latter must respond with an HTTP <code>200</code> code and a request body as below.

* Success - <code>200</code>:

```json Response of the Third Party Application to the Quable API call
{
  "url": "https://my-app.domain.tld/my-app-form",
  "err": 0,
}
```

Any response other than an HTTP <code>200</code>: code and a body containing the value "0" for the "*err*" attribute will be considered an error and indicated as such to the user.

### Content Management

If all conditions are met, the URL provided in the request body will be called in the window and then the external app will manage its content.