How to Enable Integrated Query Builder Experience for PageBuilder Editor

In order to leverage integrated query building experience within PageBuilder Editor for your custom blocks, you will first need to create a query builder content source and update your organization’s bundle.

Custom Bundle Installation Prerequisites

Knowledge of the following is required to add this functionality to your custom bundle:

Feature Development
Content Source Creation

Creating a query builder content source with your own image resizing method

Below is an example content source to enable QueryBuilder to pull articles. This will, however, display all full-scale images associated with the articles. You will need to insert your choice of image resizing utility within the transform method, as shown below.

Create a new content source file in your content/sources/ folder within your project story-feed-querybuilder.js with the following contents:

export default {
  resolve: (params) => {
    const paramList = [
      ...((params.queryParams && JSON.parse(params.queryParams)) || []),
      `website=${params['arc-site']}`,
    ]
    return `/content/v4/search/published?body=${encodeURI(
      params.queryBody.replace('RePlAcE_ArC_SiTe_HeRe', params['arc-site']),
    )}&${paramList.join('&')}`
  },
  schemaName: 'ans-feed',
  queryBuilder: true,
  params: {
    queryName: 'text',
    queryBody: 'text',
    queryParams: 'text',
    arcQL: 'text',
  },
  transform: (data, query) =>
    // IMAGE RESIZING WOULD HAPPEN HERE
  ttl: 300,
}

Creating a query builder content source with the Themes resizing method

Should you have no image resizing library, here is an example where we’ve included our in-house Arc XP resizing library.

Step 1:

Create a new content source file in your content/sources/ folder within your project story-feed-querybuilder.js with the following contents:

import getResizedImageData from './resizer-image-block'

export default {
  resolve: (params) => {
    const paramList = [
      ...((params.queryParams && JSON.parse(params.queryParams)) || []),
      `website=${params['arc-site']}`,
    ]
    return `/content/v4/search/published?body=${encodeURI(
      params.queryBody.replace('RePlAcE_ArC_SiTe_HeRe', params['arc-site']),
    )}&${paramList.join('&')}`
  },
  schemaName: 'ans-feed',
  queryBuilder: true,
  params: {
    queryName: 'text',
    queryBody: 'text',
    queryParams: 'text',
    arcQL: 'text',
  },
  transform: (data, query) =>
    getResizedImageData(data, null, null, null, query['arc-site']),
  ttl: 300,
}

Step 2

Create the folder content/sources/resizer-image-block

Step 3

Copy the following files from the Arc Resizer Image Block git repo and place them in the newly created folder from above:

Important

Client access to these files is limited to a read-only view.

Step 4

Ensure your bundle has thumbor-lite installed as an npm dependency.

Step 5

Add your decrypted resizerKey and resizerURL to your local .env file.

Step 6

Add the encrypted version of the resizerKey and resizerURL to your properties/index.json.

Note

If you need the values for your resizerKey or resizerURL, contact Arc XP Customer Support.

Step 7

Edit the file properties/index.json that lives in your project and add the following objects:

"imageWidths": [
   158,
   274
],
"aspectRatios": [
   "1.85:1",
   "3:2",
   "4:3"
]

At this point, because we’ve added some new files and updated the properties file we will need to restart the bundle. See Running PageBuilder Engine Locally documentation for more information on this process.

In this section: