How to Integrate Retool with Joomla

Joomla's REST API is disabled by default in a fresh installation. Log in to your Joomla Administrator backend (yoursite.com/administrator). Navigate to Extensions → Plugins and search for 'Web Services'. You will find two relevant plugins: 'Authentication - Web Services' (required for token-based auth) and individual 'Web Services - Content', 'Web Services - Users', and 'Web Services - Tags' plugins for each resource type you want to expose. Enable all of these plugins by clicking each one and toggling Status to Enabled, then clicking Save. Next, generate your API token by clicking your username in the top-right of the Joomla backend and selecting 'Edit Account'. On your profile page, click the 'Joomla API Token' tab. If no token exists, click 'Invalidate Token' to generate a new one — this creates a long token string associated with your user account. Note that the token inherits your user's permissions, so use a dedicated administrator account for full API access or a lower-privileged account for read-only dashboards. Copy the token string and store it securely. The token does not expire unless explicitly invalidated from the same profile tab.

In Retool, navigate to the Resources tab in the left sidebar and click Add Resource in the top-right. Select REST API from the resource type list. Name the resource 'Joomla CMS'. In the Base URL field, enter your Joomla API base URL: https://yoursite.com/api/index.php/v1 — replace yoursite.com with your actual domain. This path includes the /api/index.php/v1 prefix which is the standard Joomla 4 API route prefix. Do not include a trailing slash. Scroll to the Headers section and add two default headers. First, add Authorization with the value Bearer YOUR_JOOMLA_API_TOKEN — replace YOUR_JOOMLA_API_TOKEN with the token you generated in the previous step. Second, add Content-Type with value application/json for POST and PATCH request bodies. You do not need to configure the Authentication section since auth is handled via the Authorization header. Click Save Changes. To verify the connection, you can create a quick test query in an app with GET method and path /articles — a successful response confirms the resource is correctly configured. If you receive a 401 Unauthorized, ensure the Authentication - Web Services plugin is enabled and the token is correctly prefixed with 'Bearer '.

Open or create a Retool app. In the Code panel, click + to create a new query named 'getArticles'. Select your Joomla CMS resource. Set Method to GET and Path to /articles. Joomla's API supports several URL parameters for filtering and pagination. In the URL Parameters section, add the following parameters: 'page[limit]' set to {{ pagination.pageSize || 25 }} for result count per page, 'page[offset]' set to {{ (pagination.page - 1) * (pagination.pageSize || 25) }} for pagination offset, 'filter[state]' set to {{ stateFilter.value || '' }} where stateFilter is a Select component with options '' (all), '1' (published), '0' (unpublished), '-1' (archived), and 'list[ordering]' set to 'a.modified' with 'list[direction]' set to 'DESC' for most-recently-modified first. Joomla's API returns JSON:API formatted responses where article data lives in the 'data' array and each item has 'id', 'type', and 'attributes' keys. Add a transformer to flatten this structure into table-friendly rows. Enable 'Run query when app loads' and also set it to re-run when the stateFilter selection changes using an event handler on that component.

1// Transformer: flatten Joomla JSON:API response to table rows
2const items = data.data || [];
3return items.map(item => ({
4  id: item.id,
5  title: item.attributes?.title || '',
6  alias: item.attributes?.alias || '',
7  state: item.attributes?.state === 1 ? 'Published' : item.attributes?.state === 0 ? 'Unpublished' : 'Archived',
8  category_id: item.attributes?.catid || '',
9  author: item.attributes?.author || '',
10  created: item.attributes?.created ? new Date(item.attributes.created).toLocaleDateString() : '',
11  modified: item.attributes?.modified ? new Date(item.attributes.modified).toLocaleDateString() : '',
12  hits: item.attributes?.hits || 0
13}));

In the app canvas, drag a Table component and set its Data property to {{ getArticles.data }}. Configure visible columns: title, state, category_id, author, modified, hits. Set the title column to a text type and add a Link column that opens the article in Joomla's edit view using the URL format https://yoursite.com/administrator/index.php?option=com_content&task=article.edit&id={{ row.id }}. Above the table, add a row of filter controls: a Select component for state filtering (named 'stateFilter'), a Text Input for search (named 'searchInput' — bind to filter[search] in the query), and a Date Range Picker for modified date filtering. Add a Pagination component below the table and bind the getArticles query's page parameters to it. Create a second query named 'updateArticleState' with Method PATCH, Path /articles/{{ articlesTable.selectedRow.id }}, and Body Type JSON. The request body should be { "state": {{ newStateSelect.value }} } where newStateSelect is a Select component in a side panel. For bulk publishing, add a Multi-select checkbox to the Table (enable row selection in Table settings) and create a 'publishSelected' query using Retool's JavaScript query type that loops through the selected rows and triggers the PATCH query for each: use Promise.all with selectedRows.map() to send requests in parallel. Add event handlers to show notifications and refresh getArticles on success.

1// JavaScript query: bulk publish selected articles
2const selectedRows = articlesTable.selectedRows || [];
3if (selectedRows.length === 0) {
4  return utils.showNotification({ title: 'No articles selected', notificationType: 'warning' });
5}
6
7const requests = selectedRows.map(row =>
8  fetch(`${retoolContext.origin}/proxy`, {
9    method: 'POST',
10    body: JSON.stringify({
11      resource: 'joomla_cms',
12      method: 'PATCH',
13      path: `/articles/${row.id}`,
14      body: { state: 1 }
15    })
16  })
17);
18
19await Promise.all(requests);
20return await getArticles.trigger();

Create a second query named 'getCategories' with GET method and path /categories?filter[extension]=com_content to list all content categories. The com_content extension filter scopes results to article categories, excluding other component categories. Add a transformer similar to the articles transformer to flatten JSON:API items into rows with id, title, alias, parent_id, level, and item count. Create a third query named 'getUsers' with GET method and path /users — this endpoint requires administrator-level permissions on your Joomla API token account. Apply a transformer to extract username, email, user groups, registration date, last visit date, and block status from each user's attributes. Build a tab layout in your Retool app with three tabs: Articles, Categories, and Users. On the Categories tab, display categories in a Table with inline editing for title — set the column to 'editable' type and create a PATCH query named 'updateCategory' triggered by the Table's on-change event. On the Users tab, show users with a Block/Unblock toggle that sends PATCH /users/{{ usersTable.selectedRow.id }} with body { "block": {{ row.block === 0 ? 1 : 0 }} }. For complex multi-content-type management and automated content Workflows connecting Joomla with your CRM or email platform, RapidDev's team can help architect your Retool content operations solution.

1// Transformer: flatten Joomla categories JSON:API response
2const items = data.data || [];
3return items.map(item => ({
4  id: item.id,
5  title: item.attributes?.title || '',
6  alias: item.attributes?.alias || '',
7  parent_id: item.attributes?.parent_id || 0,
8  level: item.attributes?.level || 0,
9  published: item.attributes?.published === 1 ? 'Yes' : 'No',
10  note: item.attributes?.note || ''
11}));