How to Integrate Retool with JFrog Artifactory

Before configuring Retool, you need an Artifactory API key or access token with appropriate permissions. Log in to your Artifactory instance as an admin user. Click your username in the top-right corner and select 'Edit Profile' from the dropdown menu. On your profile page, scroll to the 'Authentication Settings' section. Here you have two options: generate an API Key by clicking 'Generate API Key' (a legacy method still widely supported), or create an Access Token by navigating to the 'Access Tokens' section and clicking 'Generate Token'. Access Tokens are the recommended modern approach — when generating one, set an expiration (or select 'Never expires' for long-lived service accounts), assign a username/service ID, and select the appropriate scope (admin scope for full resource management, or reader scope for read-only dashboards). Copy the generated token immediately as it is shown only once. For self-hosted Artifactory behind a corporate VPN, ensure the Retool server (or Retool Cloud's IP range) has network access to your Artifactory hostname on the relevant port. Store the token securely before proceeding to the Retool configuration step.

In Retool, navigate to the Resources tab in the left sidebar (or visit your Retool instance's /resources page). Click the Add Resource button in the top-right corner. From the resource type list, scroll to REST API and click it. Name the resource descriptively, such as 'JFrog Artifactory'. In the Base URL field, enter your Artifactory URL including the /artifactory path segment — for example: https://yourcompany.jfrog.io/artifactory for Artifactory Cloud, or https://artifactory.internal.company.com/artifactory for self-hosted. Do not include a trailing slash. Scroll to the Headers section and add a default header. If you are using an API Key, set the header key to X-JFrog-Art-Api and the header value to your API key. If you are using an Access Token, set the header key to Authorization and the value to Bearer YOUR_ACCESS_TOKEN. Add a second default header: Content-Type with value application/json — this is required for AQL POST requests and other write operations. Leave the Authentication dropdown set to None since you are handling authentication via headers. Click Save Changes. Retool will verify the configuration — if you see an error, double-check the base URL ends with /artifactory and that the header name matches exactly (Artifactory is case-sensitive on X-JFrog-Art-Api).

Open or create a Retool app. In the Code panel at the bottom, click the + button to create a new query. Select your JFrog Artifactory resource. Set the Method to GET. In the Path field, enter /api/repositories to list all repositories. This endpoint returns an array of repository objects including rkey, type (LOCAL, REMOTE, VIRTUAL), packageType, and description. Name this query 'getRepositories' and enable 'Run query when app loads' so the repository list loads immediately. In the app canvas, drag a Table component and set its Data property to {{ getRepositories.data }}. Next, create a second query named 'getArtifactsInRepo' that fetches artifacts in a selected repository. Set Method to GET and Path to /api/storage/{{ repoTable.selectedRow.key }} — this queries the storage info for the selected repository's root. To browse folder contents within a repository, use the path /api/storage/{{ repoTable.selectedRow.key }}/{{ folderPath.value }} where folderPath is a Text Input component. In the query's Advanced tab, add a transformer to extract and flatten the children array from the API response, adding columns for name, type (file vs folder), size, and lastModified. Set this query to run when the row selection on the repository table changes, using the Event Handler 'On row click → Trigger query → getArtifactsInRepo'.

1// Transformer for Artifactory storage/folder response
2const children = data.children || [];
3return children.map(item => ({
4  name: item.uri.replace('/', ''),
5  type: item.folder ? 'Folder' : 'File',
6  path: (data.path || '') + item.uri,
7  repo: data.repo || '',
8  lastModified: data.lastModified ? new Date(data.lastModified).toLocaleDateString() : 'N/A',
9  size: data.size ? `${(data.size / 1024).toFixed(1)} KB` : 'N/A'
10}));

Artifactory Query Language (AQL) is a powerful domain-specific language for searching artifacts with complex filters across repositories. In Retool, create a new query named 'searchArtifacts' targeting your Artifactory resource. Set the Method to POST and the Path to /api/search/aql. Set the Body Type to Raw and the Content-Type to text/plain (AQL queries are sent as plain text, not JSON). In the Body field, write an AQL query that incorporates values from Retool UI components. AQL syntax uses a dot-notation structure starting with 'items.find()'. The query shown in the code example searches artifacts matching a name pattern, within a specific repository, created after a date provided by Retool UI inputs. Add URL Parameter components for repository selection (a Select component named 'repoSelect' populated from getRepositories.data), a Text Input for name pattern (named 'nameSearch'), and a Date Picker for created-after date (named 'dateFilter'). Set the query to Manual trigger (not auto-run) since it requires user input. Add a Search button in the app UI that triggers this query. In the transformer, extract the results array from the AQL response and format it into table-friendly rows with artifact name, path, repository, size, created date, and download count from the stats sub-field.

1// AQL query body — set as the POST body (Body Type: Raw, Content-Type: text/plain)
2items.find(
3  {
4    "repo": {"$match": "{{ repoSelect.value || '*' }}"},
5    "name": {"$match": "*{{ nameSearch.value || '' }}*"},
6    "created": {"$gt": "{{ dateFilter.value || '2020-01-01' }}"}
7  }
8)
9.include("repo", "path", "name", "size", "created", "modified", "stat")
10.sort({"$desc": ["created"]})
11.limit(100)

To build a storage and usage analytics dashboard, create a query named 'getStorageInfo' targeting your Artifactory resource with GET method and path /api/storageinfo. This endpoint returns aggregate storage statistics for all repositories including used space, file count, and percentage of quota consumed. Create a second query named 'getArtifactStats' with GET method and path /api/storage/{{ repoSelect.value }}/{{ artifactsTable.selectedRow.path }}/{{ artifactsTable.selectedRow.name }}?stats to get download statistics for a selected artifact. In the app canvas, add a Stats component row at the top showing total storage used, total artifact count, and total repository count pulled from getStorageInfo.data. Below the stats row, add a Chart component configured with Bar type to visualize the top repositories by storage consumption — set the Chart's data to a JavaScript transformer that extracts repositoriesSummaryList from the storageinfo response and sorts by usedSpace descending. Add a second Chart showing artifact type distribution (Docker vs Maven vs npm, etc.) by mapping packageType from the repositories list. For artifact-level download stats, bind a separate statistics panel to the selectedRow of your artifact table, showing total downloads, last download date, and last downloaded-by user from the stats response. Include a Retool Workflow setup note: for scheduled reports of storage growth over time, consider building a Retool Workflow that runs nightly, fetches storageinfo, and inserts the results into Retool Database for historical trending. For complex multi-repository analytics, custom transformers, and automated reporting Workflows, RapidDev's team can help architect and build your Retool artifact management solution.

1// Transformer: format repository storage summary for Chart component
2const repos = data.repositoriesSummaryList || [];
3const sorted = [...repos]
4  .filter(r => r.repoKey !== 'TOTAL')
5  .sort((a, b) => (b.usedSpace || 0) - (a.usedSpace || 0))
6  .slice(0, 10);
7
8return {
9  datasets: [{
10    label: 'Storage Used (MB)',
11    data: sorted.map(r => Math.round((r.usedSpace || 0) / (1024 * 1024) * 10) / 10)
12  }],
13  labels: sorted.map(r => r.repoKey)
14};

To enable artifact property editing from Retool, create a query named 'setArtifactProperties' with PUT method, path /api/storage/{{ repoSelect.value }}/{{ artifactsTable.selectedRow.path }}?properties={{ encodeURIComponent(propertyString.value) }}, where propertyString is a Text Input component where users type key=value;key2=value2 pairs in Artifactory's property syntax. For a more user-friendly interface, add a Form component with two Text Inputs (for property key and value), build the property string in a JavaScript transformer, and trigger the PUT request on form submit. To manage repository-level permissions, create a query named 'getPermissionTargets' with GET method and path /api/security/permissions to list all permission targets defined in Artifactory. Select a permission target from a dropdown to load its details via /api/security/permissions/{{ permSelect.value }}, which returns which repositories the permission covers and which users and groups are assigned. Display this in a two-column layout: the left column shows repositories included in the permission, the right shows users and groups with their privilege levels (r=read, d=delete, w=deploy, m=manage, managedXrayMeta, distributeMeta). Add validation before triggering any write operations — use a Confirm Modal component in the button's event handler to require explicit confirmation before updating permissions or setting artifact properties. Set query Event Handlers to show a success notification and refresh the relevant data queries on success.

1{
2  "method": "PUT",
3  "path": "/api/storage/{{ repoSelect.value }}/{{ artifactsTable.selectedRow.path }}",
4  "params": {
5    "properties": "{{ propertyKey.value + '=' + propertyValue.value }}"
6  }
7}