Add custom themes and extensions to a tenant

Add custom themes and extensions to a tenant

Qlik Sense applications have several extensible capabilities available you can use to customize the end user experience. Themes and visualization extensions allow creators to customize the styling and provide custom visualizations that work natively with the Qlik Associative Engine.

To use themes and extensions in Qlik Sense applications on a tenant, you upload a zip file containing a manifest and the contents of the theme / extension to the tenant.

Learn more about creating themes on Qlik help.

Learn more about visualization extensions on qlik.dev.

Sections

Prerequisites

  • A Qlik Cloud tenant to perform configuration steps. If you haven't yet created a tenant to configure, please consider reviewing theCreate a tenanttutorial before continuing with this guide.
  • Registered anOAuth clientwith the tenant from My Qlik or theOAuth client settingswithin the tenant's management console.
  • Obtained an access tokento make authorized requests on the tenant.
  • zip files containing theme metadata or extension metadata to upload to the tenant.

Variable substitution

Throughout this tutorial, variables will be used to communicate value placement. The variable substitution format is <VARIABLE_NAME>. Here is a list of commonly referred to variables.

VariableDescription
<HOSTNAME>The domain for the tenant you are accessing. Equivalent to tenant.region.qlikcloud.com.
<ACCESS_TOKEN>A bearer token for authorizing https requests to a tenant.

1 Upload a theme

Upload a theme to a tenant using the

themes endpoint.
curl "https://<HOSTNAME>/api/v1/themes" \
-X POST \
-H "Authorization: Bearer <ACCESS_TOKEN>" \
-H "Content-Type: multipart/form-data" \
-F "file=@/<PATH_TO_ZIP_FILE>"

The JSON object response from the end point will return metadata describing the theme on the tenant.

{
  "id":"CJ_heFlBDEEQ9zYUzZ33OM1wTblHNzL4",
  "tenantId":"<TENANT_ID>",
  "userId":"...",
  "name":"<THEME_NAME>",
  "type":"theme",
  "qextFilename":"<THEME_METADATA_NAME>",
  "qextVersion":"1.0.0",
  "description":"<DESCRIPTION",
  "version":"1.0.0",
  "author":"example.com",
  "tags":[],
  "file":{...},
  "createdAt":"2022-05-02T15:37:45.270Z",
  "updatedAt":"2022-05-02T15:37:45.270Z"
}

2 Upload an extension

Note: Visualization extensions you upload to a tenant may have resources like images or code hosted externally. If your extension requires a content security policy directive, follow the directions in the next section.

Upload a visualization extension to a tenant using the

extensions API.
curl "https://<HOSTNAME>/api/v1/extensions" \
-X POST \
-H "Authorization: Bearer <ACCESS_TOKEN>" \
-H "Content-Type: multipart/form-data" \
-F "file=@/<PATH_TO_ZIP_FILE>"

The JSON object response from the end point will return metadata describing the extension on the tenant.

{
  "id":"qazaofZu_OP17ZONEkyLpIzSXuzYaA9z",
  "tenantId":"<TENANT_ID>",
  "userId":"...",
  "name":"<EXTENSION_NAME>",
  "type":"visualization",
  "qextFilename":"<EXTENSION_METADATA_NAME>",
  "qextVersion":"1.0.0",
  "loadpath":"<EXTENSION_FOLDER_PATH>",
  "description":"<DESCRIPTION>",
  "version":"1.0.0",
  "author":"Jonny Q",
  "homepage":"",
  "keywords":"qlik-sense, visualization",
  "license":"",
  "repository":"",
  "dependencies":{
    "qlik-sense":">=3.0.x"
  },
  "icon":"line-chart",
  "tags":[],
  "bundled":false,
  "supernova":false,
  "file": {...},
  "createdAt":"2022-05-02T15:39:40.048Z",
  "updatedAt":"2022-05-02T15:39:40.048Z"
}

3 Configure content security policy (CSP)

Qlik Cloud uses content security policy directives to allow content from external sources to work in end user browsers. Check with your extension provider to confirm if there are external references in the extension code requiring a CSP directive. See Managing Content Security Policy for details.

Adding a custom security policy directive is possible using the csp-origins API. In the payload of the request, you can specify any number of directives to support for an identified origin. However, you may apply only one domain origin to a CSP entry. This request will allow images, scripts, and css files from the origin domain to render in the browser.

curl "https://<HOSTNAME>/api/v1/csp-origins" \
 -X POST \
 -H "Authorization: Bearer <ACCESS_TOKEN>" \
 -H "Content-type: application/json" \
 -d '{"origin":"<CONTENT_DOMAIN>","name":"<CSP_CONFIG_NAME>","description":"<DESCRIPTION>","imgSrc":true,"scriptSrc":true,"styleSrc":true}'

The JSON object response shows the same information as the request with an id and dates for creation and modification.

{
  "id": "<CSP_ENTRY_ID>",
  "origin": "<CONTENT_DOMAIN>",
  "name": "<CSP_CONFIG_NAME>",
  "description": "<DESCRIPTION>",
  "imgSrc": true,
  "scriptSrc": true,
  "styleSrc": true,
  "createdDate": "2022-07-01T17:20:31.641Z",
  "modifiedDate": "2022-07-01T17:20:31.641Z"
}
Was this page helpful?