This is the article excerpt...
", "catid": 8, "created": "2024-03-15T10:30:00+00:00", "state": 1 } } ] } // Correct FlutterFlow JSON Paths: // $.data[*].attributes.title → article title (list) // $.data[*].attributes.introtext → excerpt (list) // $.data[*].id → article ID (list) // $.data[*].attributes.created → date string (list) // $.data[*].attributes.catid → category ID (list) ``` **Expected result:** The ListView on your screen shows real Joomla article titles and excerpts populating from the API. Tapping a card navigates to a detail screen with the full article. ### 5. Secure write operations with a backend proxy Reading public Joomla articles on the client side is generally acceptable — the content is public, and the API token with read-only permissions has limited damage potential. However, any write operation (POST to create an article, PATCH to update content, DELETE to remove an item) uses the same token. If that token ships in your compiled Flutter app, anyone who installs the app can extract it and write content to your Joomla site. For write operations, the correct architecture is a Firebase Cloud Function or Supabase Edge Function that accepts parameters from your FlutterFlow app, validates them, adds the Authorization: Bearer {token} header from the server environment, and forwards the request to your Joomla site. Your FlutterFlow app calls the proxy function URL instead of Joomla directly. In Firebase: store the Joomla token using firebase functions:config:set joomla.token=yourtoken. In the Cloud Function, read it via functions.config().joomla.token and construct the request with axios or node-fetch. In Supabase: store the token in Edge Functions > Secrets as JOOMLA_API_TOKEN and read it with Deno.env.get('JOOMLA_API_TOKEN'). For the read-only GET calls, you have two options: keep them client-direct (acceptable for public content with a limited-permission user token) or route them through the proxy too (better security, adds latency). If your Joomla content is public and the API user has no write permissions, the client-direct read pattern is a reasonable tradeoff for a simpler setup. Make the decision based on your token's permission level. ``` // Supabase Edge Function proxy for Joomla writes (index.ts) import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'; serve(async (req) => { const corsHeaders = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'authorization, content-type' }; if (req.method === 'OPTIONS') { return new Response('ok', { headers: corsHeaders }); } const joomlaToken = Deno.env.get('JOOMLA_API_TOKEN'); const joomlaBaseUrl = Deno.env.get('JOOMLA_BASE_URL'); const body = await req.json(); const { endpoint, method, payload } = body; // Allowlist write endpoints const allowedEndpoints = ['/content/articles', '/content/articles/']; const isAllowed = allowedEndpoints.some(e => endpoint.startsWith(e)); if (!isAllowed) { return new Response(JSON.stringify({ error: 'Endpoint not permitted' }), { status: 403, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }); } const response = await fetch(`${joomlaBaseUrl}/api/index.php/v1${endpoint}`, { method: method || 'GET', headers: { 'Authorization': `Bearer ${joomlaToken}`, 'Content-Type': 'application/json' }, body: payload ? JSON.stringify(payload) : undefined }); const data = await response.json(); return new Response(JSON.stringify(data), { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }); }); ``` **Expected result:** The Supabase Edge Function or Firebase Cloud Function is deployed and returns Joomla content when called from Postman with a POST body specifying the endpoint and payload. The Joomla API token does not appear in any FlutterFlow-side code. ## Best practices - Always verify you are running Joomla 4 or higher before attempting this integration — Joomla 3 has no native REST API and requires a third-party extension that is poorly maintained. - Create a dedicated Joomla API user with the minimum access level required (Registered for public content, Author for content creation) rather than using your administrator account's token. - Use JSON:API-correct paths in FlutterFlow ($.data[*].attributes.fieldName) for all Joomla API responses — flat paths always return null with Joomla's response format. - Route any POST, PATCH, or DELETE operations through a Firebase Cloud Function or Supabase Edge Function proxy to keep the Joomla API token off the client device. - Test the Joomla API URL directly in a browser before configuring FlutterFlow to confirm the endpoint is reachable, plugins are enabled, and URL rewriting is not blocking the /api/ path. - Add pagination support using Joomla's page[limit] and page[offset] query parameters from the start — unparameterized article lists will eventually grow too large for a single API response. - Handle the case where introtext contains HTML: use a flutter_html Custom Widget for rich content display or strip tags in a Dart Custom Action for plain-text excerpts. - Monitor your Joomla server logs for API call volumes — Joomla has no built-in API rate limiting, but your hosting provider's server may throttle high-frequency requests. ## Use cases ### Mobile news feed for a community or association website A FlutterFlow app that surfaces articles from a Joomla-powered association website as a mobile news feed. Members install the app, see a ListView of the latest articles from their chosen category, tap to read the full introtext, and share items. The content is authored entirely in the Joomla admin panel by existing editorial staff — no new backend is needed. Prompt example: ``` Build a news feed screen showing the 10 latest articles from a specific Joomla category. Each list item should display the article title, publication date, and a short excerpt. Tapping an item opens a detail screen with the full article text. ``` ### Internal knowledge base app for a company intranet built on Joomla A FlutterFlow mobile app that gives employees access to internal Joomla documentation, policies, and procedure articles from their phones. A search bar queries the /content/articles endpoint with a keyword filter. Articles are organized by Joomla categories displayed as tabs at the top of the screen. Prompt example: ``` Create a searchable knowledge base screen with a text input at the top. When the user types a search term, call the Joomla API to find matching articles and display results in a list with title and category label. ``` ### Event listing app driven by Joomla article categories A FlutterFlow app that reads Joomla articles tagged under an Events category to display a filterable list of upcoming events. Custom fields in Joomla articles store the event date and location. The app reads those fields from the JSON:API attributes object and displays them in event cards sorted by date. Prompt example: ``` Build an events screen that lists articles from the Joomla 'Events' category. Each card should show the event title, a short description from the introtext field, and an event date from a custom field. Sort cards by newest first. ``` ## Troubleshooting ### 401 Unauthorized on all API calls even with the correct token Cause: The 'API Authentication - Token' plugin in Joomla is either not enabled or was disabled. Without this plugin active, Joomla does not recognize Bearer token authentication and rejects all API requests with a 401. Solution: Log in to the Joomla administrator panel and go to System > Plugin Manager. Search for 'API Authentication' and confirm the 'API Authentication - Token' plugin is enabled (green status icon). If it was disabled, enable it, save, and retry your FlutterFlow API call. Also confirm the Authorization header in FlutterFlow includes the word Bearer followed by a space before the token — Bearer yourtoken, not just yourtoken. ### API returns data in the Test tab but response variables are null when bound to widgets Cause: JSON Paths are using flat field names (like $.title or $.name) instead of the JSON:API nested structure ($.data[*].attributes.title). Joomla's REST API wraps all fields under a data array of objects each containing an attributes object. Solution: Open the Response & Test tab of your API Call, paste a fresh JSON response from the Joomla API, and click Generate JSON Paths. Verify that all enabled paths start with $.data[*].attributes. for list calls or $.data.attributes. for single-item calls. Delete any paths that use flat field names and recreate them with the correct nested structure. After saving, retest and confirm the response variables show real values before binding to widgets. ### 404 Not Found when calling https://yoursite.com/api/index.php/v1/content/articles Cause: Either the Web Services plugins are not enabled in Joomla, the site runs Joomla 3 (which has no native REST API), or the server's URL rewriting rules are intercepting the /api/ path and returning a page-not-found response. Solution: First, confirm your Joomla version: in the admin panel go to Help > System Information and check the Joomla Version field. If it shows 3.x, upgrade to Joomla 4 before proceeding. If it shows 4.x, go to the Plugin Manager and confirm both 'Web Services - Content' and 'API Authentication - Token' are enabled. If plugins are enabled but you still get 404, add a .htaccess rule that passes through the /api/ path: RewriteCond %{REQUEST_URI} ^/api/ [NC] then RewriteRule .* - [L]. Contact your hosting provider if you cannot modify .htaccess. ### The introtext field contains HTML tags that appear as raw text in the FlutterFlow widget Cause: Joomla stores article content as HTML, and FlutterFlow's standard Text widget renders the string literally, showing, , and
tags as visible characters instead of formatting.
Solution: To display formatted Joomla article content, add the flutter_html pub.dev package via a Custom Widget. In FlutterFlow, go to Custom Code > + Add > Widget, declare flutter_html as a dependency, and write a minimal HtmlWidget that accepts an htmlContent String parameter. Use this Custom Widget anywhere you want to render Joomla article bodies. Alternatively, strip HTML tags in a Custom Action using a Dart regex before binding to a standard Text widget if formatting is not important.
```
// Dart Custom Widget for HTML rendering (flutter_html)
import 'package:flutter_html/flutter_html.dart';
class HtmlContentWidget extends StatelessWidget {
final String htmlContent;
const HtmlContentWidget({required this.htmlContent});
@override
Widget build(BuildContext context) {
return Html(data: htmlContent);
}
}
```
## Frequently asked questions
### Does this integration work with Joomla 3?
No. Joomla 3 does not include a native Web Services REST API. Third-party REST API extensions exist for Joomla 3 but they are poorly maintained and use different URL structures. If your site runs Joomla 3, the recommended path is to migrate to Joomla 4 using Joomla's official upgrade tool, then follow this guide. Check your version at Help > System Information in the Joomla admin panel.
### Is it safe to put the Joomla API token directly in FlutterFlow for read-only content?
For truly public content (articles with public access level, read-only operations), storing the token client-side is a lower-risk tradeoff because the same content is publicly accessible without a token. However, the token is still tied to a user account that could have broader permissions, and exposing it allows anyone to make authenticated API calls at your server's expense. The safer default is always to use a backend proxy, especially if the token belongs to an account that can write content.
### Why are my JSON Paths returning null even though the Test tab shows data?
Joomla uses the JSON:API specification, which nests all fields under data[].attributes rather than at the top level. A path like $.title does not exist in a Joomla response — the correct path is $.data[*].attributes.title for list results or $.data.attributes.title for a single article. Regenerate your JSON Paths from a fresh pasted response and ensure all paths include the .attributes. segment.
### Can I create or update Joomla articles from the FlutterFlow app?
Yes. The Joomla 4 REST API supports POST to create articles and PATCH to update them. However, these operations require the API token to have at least Author-level permissions, and that token must never ship in the compiled app. Route all write operations through a Firebase Cloud Function or Supabase Edge Function proxy that holds the token server-side and forwards authenticated requests to your Joomla API.
### Can I filter articles by category in the FlutterFlow API Call?
Yes. Add a filter[category_id] query parameter to your GetArticles API Call using Joomla's bracket query parameter notation. In FlutterFlow, set this as a variable (categoryId of type Integer) and pass the Joomla category ID when triggering the call. You can also filter by tag, author, or publication state using similar filter[] parameters — check Joomla's official Web Services API documentation for the full list of supported filters.
---
Source: https://www.rapidevelopers.com/flutterflow-integrations/joomla
© RapidDev — https://www.rapidevelopers.com/flutterflow-integrations/joomla