Search

When a user attempts to publish their design, they may want to publish that design to a specific container. If that container is nested deep in a hierarchy though, it might be difficult to find. To improve the user experience, you can let users search for containers.
This guide explains how to add a search field to a publish extension.
To support search, a publish extension must use the Flat list or Nested list layout.
Step 1: Enable search
By default, publish extensions don't support search. You need to enable the feature.
To enable search for a publish extension:
1.Navigate to an app via the Developer Portal.
2.On the Extensions page, expand the Publish panel.
3.Enable Display search field.
If you preview the extension, a search field is visible in the Publish menu.
Step 2: Receive search requests
When a user performs a search, Canva sends a POST request to the following endpoint:
1
<base_url>/publish/resources/find
Copied!
This is the same endpoint that Canva sends requests to when a user loads a publish extension or opens a container. The only difference is that the request body includes a query parameter:
1
{
2
  "user": "AUQ2RUzug9pEvgpK9lL2qlpRsIbn1Vy5GoEt1MaKRE=",
3
  "brand": "AUQ2RUxiRj966Wsvp7oGrz33BnaFmtq4ftBeLCSHf8=",
4
  "label": "PUBLISH",
5
  "limit": 100,
6
  "type": "IMAGE",
7
  "locale": "en-US",
8
  "query": "funny memes",
9
  "preferredThumbnailHeight": 100,
10
  "preferredThumbnailWidth": 100
11
}
Copied!
The query parameter contains the value of the search field.
Step 3: Detect when a user performs a search
When a POST request is not triggered by a search, the query property is null. This makes it possible to determine whether or not the user has performed a search:
1
app.post("/publish/resources/find", async (request, response) => {
2
  if (request.body.query) {
3
    // The user has performed a search
4
  } else {
5
    // The user hasn't performed a search
6
  }
7
});
Copied!
The query and containerId properties are mutually exclusive. This means a user cannot search inside a specific container.
Step 4: Respond to search requests
When a user performs a search, a publish extension should respond to the request with a "SUCCESS" response:
1
{
2
  "type": "SUCCESS",
3
  "resources": []
4
}
Copied!
This response should include resources relevant to the search query. What "relevancy" means is up to the extension. It could be as simple as returning resources that have the search query in their names or something more sophisticated.
If a publish extension supports search, it should also support pagination. This lets users paginate through more results than can be included in a single response.
Example
1
const axios = require("axios");
2
const express = require("express");
3
const app = express();
4
​
5
app.use(express.json());
6
​
7
app.post("/publish/resources/find", async (request, response) => {
8
  // Get fake data for containers
9
  const { data } = await axios.get(
10
    "https://jsonplaceholder.typicode.com/albums"
11
  );
12
​
13
  // Create a list of containers
14
  let resources = data.map((resource) => {
15
    return {
16
      id: resource.id,
17
      name: resource.name,
18
      type: "CONTAINER",
19
    };
20
  });
21
​
22
  // Handle search requests
23
  if (request.body.query) {
24
    resources = resources.filter((resource) => {
25
      return resource.name.toLowerCase().includes(request.body.query);
26
    });
27
  }
28
​
29
  // Respond to the request
30
  response.send({
31
    type: "SUCCESS",
32
    resources: resources,
33
  });
34
});
35
​
36
app.listen(process.env.PORT || 3000);
Copied!

Continuation

Published URL

Last modified 7mo ago

Copy link

Contents

Step 1: Enable search

Step 2: Receive search requests

Step 3: Detect when a user performs a search

Step 4: Respond to search requests

Example