TYPO3

This step happens entirely outside FlutterFlow, and it is the single most important prerequisite. TYPO3 core does not expose a REST API — if a developer has not installed and configured a headless extension, there is literally nothing for FlutterFlow to call. Before you open FlutterFlow, verify the endpoint in your browser or a REST client like Hoppscotch (a free browser-based API tester). Open the endpoint URL in your browser — something like `https://your-typo3-site.com/?type=834` (EXT:headless default) or `https://your-typo3-site.com/api/pages` (custom setup). You should see a JSON response. If you see HTML (your TYPO3 site's normal output), the extension is either not installed or not configured. If you see a 403 or 401, the endpoint exists but requires authentication credentials. If the endpoint is not yet live, ask your TYPO3 developer to install **EXT:headless** (available in the TYPO3 Extension Repository, search 'headless' at extensions.typo3.org) and configure it to output pages and content elements as JSON. EXT:headless is the community-standard choice — it maps TYPO3's page tree and content elements (tt_content) to a JSON response and supports multiple JSON types (news, pages, breadcrumb, navigation). Once you can paste the URL in a browser and get JSON back, you are ready for FlutterFlow. Save the example JSON response — you'll paste it into FlutterFlow's Response & Test tab to generate JSON Paths automatically.

With a confirmed working JSON endpoint, open FlutterFlow and click API Calls in the left navigation panel. Click + Add → Create API Group. Configure it: - **Group Name:** `TYPO3` - **Base URL:** The root of your TYPO3 JSON endpoint, e.g., `https://your-typo3-site.com/api/` or `https://your-typo3-site.com/` In the Headers section, click + Add Header for each required header: **Header 1:** `Accept` → `application/json` This tells the TYPO3 server (and any proxy in front of it) that you expect JSON, not HTML. **Header 2 (if JWT auth):** `Authorization` → `Bearer [App Constant: TYPO3_JWT]` Store the JWT in an App Constant: Settings & Integrations → App Settings → App Constants → add constant `TYPO3_JWT`. **Header 2 alternative (if Basic Auth):** `Authorization` → `Basic [base64(username:password)]` You can compute the Base64 value once (there are free online tools) and store it as an App Constant. Basic Auth credentials should be for a limited read-only API user, not a TYPO3 admin account. Note: the exact auth mechanism depends on how the TYPO3 developer configured the extension. Ask them which authentication method the endpoint expects before configuring the header. Click Save on the API Group.

1{
2  "api_group_name": "TYPO3",
3  "base_url": "https://your-typo3-site.com/api/",
4  "headers": [
5    {
6      "name": "Accept",
7      "value": "application/json"
8    },
9    {
10      "name": "Authorization",
11      "value": "Bearer [App Constant: TYPO3_JWT]"
12    }
13  ]
14}

Inside the TYPO3 API Group, click + Add API Call. Set: - **Call Name:** `GetPages` - **Method:** GET - **Endpoint (relative):** Leave blank or set to the pages path as configured by your extension (e.g., `pages` or `?type=834&L=0`) For EXT:headless, the content structure wraps page and content data in a nested envelope. Add any required variables — for example, a `pageId` variable passed as a query parameter: in the Variables tab, add variable `pageId` (type Integer), then reference it in the endpoint as `?id=[pageId]`. In the Response & Test tab, paste your saved example JSON response into the Mock Response field (or click Test to fire a live request if your endpoint is public). FlutterFlow will offer to auto-generate JSON Paths from the response structure — click Generate. Then verify and add the paths you need: - `page_title` → `$.page.title` (EXT:headless structure) or `$.data[0].title` (varies by extension) - `page_uid` → `$.page.uid` - `content_elements` → `$.content.colPos0` (EXT:headless nests content by column position) - `element_header` → `$.content.colPos0[*].content.header` - `element_bodytext` → `$.content.colPos0[*].content.bodytext` - `last_changed` → `$.page.lastUpdated` (Unix epoch integer — see next step for conversion) The exact JSON Path depends entirely on which TYPO3 extension is installed and how it structures its response. Always test against your actual response — don't assume a path shape from documentation examples, because EXT:headless and EXT:rest produce different envelopes.

1{
2  "call_name": "GetPages",
3  "method": "GET",
4  "endpoint": "?type=834&id=[pageId]&L=[language]",
5  "variables": [
6    { "name": "pageId", "type": "Integer", "default": "1" },
7    { "name": "language", "type": "Integer", "default": "0" }
8  ],
9  "json_paths": [
10    { "name": "page_title", "path": "$.page.title" },
11    { "name": "page_uid", "path": "$.page.uid" },
12    { "name": "content_col0", "path": "$.content.colPos0" },
13    { "name": "element_header", "path": "$.content.colPos0[*].content.header" },
14    { "name": "element_bodytext", "path": "$.content.colPos0[*].content.bodytext" },
15    { "name": "last_updated", "path": "$.page.lastUpdated" }
16  ]
17}

TYPO3 stores all timestamps — page creation date, last modification time, content element date — as Unix epoch integers in fields like `tstamp`, `crdate`, and `lastUpdated`. For example, a value of `1720396800` represents a point in time that your app needs to display as a human-readable string like 'July 8, 2024'. FlutterFlow's Text widgets cannot convert an integer to a date string directly in a binding expression. You need a Custom Function for this conversion. In FlutterFlow, go to Custom Code in the left nav → + Add → Function. Name it `epochToReadableDate`. In the function editor: 1. Set the return type to `String` 2. Add one argument: `epochSeconds` of type `int` 3. Paste the Dart code below into the function body After saving the function, go back to any Text widget that should show a date. In the Value binding field, instead of binding directly to the `last_updated` JSON Path value, click Set from Function → select `epochToReadableDate` → pass the `last_updated` JSON value (cast to int) as the argument. The widget will now display a formatted date string. Note: Custom Functions run in both Test mode and on device — unlike Custom Actions, they don't require an APK build to verify. You can see the result immediately in FlutterFlow's canvas.

1// FlutterFlow Custom Function: convert TYPO3 epoch to readable date
2// In FlutterFlow: Custom Code → + Add → Function
3import 'package:intl/intl.dart';
4
5String epochToReadableDate(int epochSeconds) {
6  if (epochSeconds == 0) return '';
7  final dateTime = DateTime.fromMillisecondsSinceEpoch(
8    epochSeconds * 1000,
9    isUtc: true,
10  ).toLocal();
11  return DateFormat('MMM d, yyyy').format(dateTime);
12}

With API Calls and JSON Paths configured, bind the content to your FlutterFlow UI. Add a ListView to your screen → open its Backend Query panel → select the TYPO3 API Group and GetPages call. Inside the ListView, add a Column with Text widgets: - Bind the first Text widget to `element_header` (article or content element title) - Bind the second to `element_bodytext` (body text — note that TYPO3 bodytext fields often contain HTML markup from the rich text editor; use FlutterFlow's HTML widget or a `flutter_html` Custom Widget to render it properly) - Bind the date Text widget through the `epochToReadableDate` Custom Function applied to the `last_updated` value For write operations — submitting forms, approval workflows, publishing content — the TYPO3 extension may expose PATCH or POST endpoints. Treat any credential that has write access to TYPO3 as secret: route those calls through a Firebase Cloud Function or your own backend, never directly from FlutterFlow. **CORS for web builds:** If you publish your FlutterFlow app to the web (FlutterFlow's web publishing or Flutter web export), browser CORS restrictions apply. A web-published FlutterFlow app running in a browser will make cross-origin requests to your TYPO3 server. If the TYPO3 server doesn't respond with `Access-Control-Allow-Origin: *` (or your specific origin), the browser will block the request with an XMLHttpRequest error even though the API Call works fine in FlutterFlow's native mobile preview. Ask your TYPO3 administrator to configure CORS headers on the server — this is typically done at the nginx/Apache level or within the TYPO3 extension's middleware. Native iOS and Android builds are not affected by CORS. If you'd rather have a team configure the TYPO3-to-FlutterFlow pipeline, RapidDev sets up FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.