SysAid

Before writing a single API call in FlutterFlow, make sure the SysAid REST API is switched on for your account. Log into SysAid as an administrator and navigate to Settings → General → REST API. You will see a toggle to enable the API and a section to manage API users. Create a dedicated service account (for example, api-service@yourcompany.com) with the minimum permissions needed: for ticket creation, it needs permission to create Service Records; for status reads, it needs permission to view Service Records. Avoid using a personal admin account because the session will be tied to those credentials. Next, identify your base URL. SysAid Cloud tenants use the pattern https://{yourcompany}.sysaidit.com/api/v1. On-premise installations will have the URL your IT team configured, and it must be reachable from a public IP address — if SysAid is behind your company firewall, a phone on cellular data cannot reach it at all. Confirm public reachability by opening that URL in your browser on a mobile network. Note this URL down; it is the base URL you will enter in the FlutterFlow API Group.

In your FlutterFlow project, click API Calls in the left navigation panel. Click the + Add button and select Create API Group. Give the group a name like SysAid, and enter your base URL (for example https://yourcompany.sysaidit.com/api/v1) in the Base URL field. Leave the Headers section empty for now — SysAid login does not require any headers beyond Content-Type, which FlutterFlow sets automatically when you choose a JSON body. Now add your first call inside this group. Click + Add API Call. Name it Login. Set the method to POST and the endpoint to /login. Switch to the Body tab, choose JSON, and enter the following body structure: { "user_name": "{{ username }}", "password": "{{ password }}" } Go to the Variables tab and add two variables: username (String) and password (String). These will be passed from your FlutterFlow form fields at runtime — never hardcode the credentials in the body. Switch to Response & Test. Enter sample values for username and password and click Test. A successful login returns HTTP 200. The response body may just be {"status":"OK"} or similar. The important part is the Set-Cookie response header — it will look like JSESSIONID=abc123; Path=/; HttpOnly. You need that cookie value; we will capture it in the next step using App State. Note: FlutterFlow does not expose response headers directly in the normal response binding UI. You will need a Custom Action (Dart) to read the cookie from headers — covered in the next step.

1{
2  "method": "POST",
3  "endpoint": "/login",
4  "body": {
5    "user_name": "{{ username }}",
6    "password": "{{ password }}"
7  }
8}

FlutterFlow's built-in response binding can parse JSON body fields, but it cannot natively read response headers like Set-Cookie. To capture the JSESSIONID, you need a small Custom Action that makes the login HTTP request using Dart's http package and reads the response header directly. Go to Custom Code in the left nav → click + Add → select Action. Name it loginAndSaveCookie. In the Dependencies field, add http (the Dart HTTP package is already bundled in Flutter, so no separate version pin is needed). Paste the Dart code below. Set the Action's return type to String (it returns the cookie value). In your App State (left nav → App State → + Add Field), add a field named sysAidCookie of type String with initial value empty. In your login screen's Action Flow Editor (the Submit button), add the loginAndSaveCookie Custom Action, then add an Update App State action to write the returned cookie string into sysAidCookie. After login succeeds, every subsequent API call will read sysAidCookie from App State and attach it as a Cookie header — as shown in the next step. If the action returns an empty string, display an error message to the user and prompt them to retry.

1import 'package:http/http.dart' as http;
2import 'dart:convert';
3
4Future<String> loginAndSaveCookie(
5  String username,
6  String password,
7  String baseUrl,
8) async {
9  final uri = Uri.parse('$baseUrl/login');
10  final response = await http.post(
11    uri,
12    headers: {'Content-Type': 'application/json'},
13    body: jsonEncode({'user_name': username, 'password': password}),
14  );
15
16  if (response.statusCode == 200) {
17    final rawCookie = response.headers['set-cookie'] ?? '';
18    // Extract JSESSIONID value from 'JSESSIONID=abc123; Path=/; ...'
19    final match = RegExp(r'JSESSIONID=([^;]+)').firstMatch(rawCookie);
20    return match != null ? match.group(1) ?? '' : '';
21  } else {
22    return ''; // Login failed
23  }
24}

Now add the ticket-creation call. In the SysAid API Group (API Calls → SysAid), click + Add API Call. Name it CreateServiceRecord. Set method to POST and endpoint to /sr. In the Headers tab, add one header: Key: Cookie Value: JSESSIONID={{ sessionCookie }} Go to the Variables tab and add sessionCookie (String) — this will be bound to the App State sysAidCookie variable at runtime. In the Body tab, choose JSON and set a payload representing the service record fields. At minimum, SysAid Service Records require a title and category. A typical body looks like: { "info": [ { "key": "description", "value": "{{ description }}" }, { "key": "title", "value": "{{ title }}" }, { "key": "urgency", "value": "{{ urgency }}" } ] } Add corresponding variables: description, title, urgency. In the Response & Test tab, paste a sample successful response (SysAid returns a JSON object with the new SR's id and other metadata). Click + Add JSON Path and extract: $.id → newTicketId (String) $.info[0].value → ticketTitle (String) Back in your FlutterFlow form screen, wire the Submit button's Action Flow: 1. Check that App State sysAidCookie is not empty; if empty, run loginAndSaveCookie first. 2. Call the CreateServiceRecord API Call, binding the sessionCookie variable to App State sysAidCookie and the other variables to your text fields. 3. On success, navigate to a confirmation screen showing the returned ticket ID.

1{
2  "method": "POST",
3  "endpoint": "/sr",
4  "headers": {
5    "Cookie": "JSESSIONID={{ sessionCookie }}"
6  },
7  "body": {
8    "info": [
9      { "key": "description", "value": "{{ description }}" },
10      { "key": "title", "value": "{{ title }}" },
11      { "key": "urgency", "value": "{{ urgency }}" }
12    ]
13  }
14}

Now build the UI that drives the API calls. In FlutterFlow, add a new screen called Submit Ticket. Use the Widget palette to add a Column containing: - A TextField widget bound to a Page State variable ticketTitle (String) - A TextField widget with maxLines 4 bound to a Page State variable ticketDescription (String) - A DropdownButton bound to a Page State variable ticketUrgency (String), with options: Urgent (value: 1), High (value: 2), Normal (value: 3), Low (value: 4) - An ElevatedButton labeled Submit On the ElevatedButton's Actions panel, open the Action Flow Editor and set up the chain: 1. Conditional Action: check if App State sysAidCookie is empty. If true → call the loginAndSaveCookie Custom Action and Update App State sysAidCookie with the returned value. 2. Backend/API Call: call CreateServiceRecord, mapping sessionCookie to App State sysAidCookie, title to Page State ticketTitle, description to Page State ticketDescription, urgency to Page State ticketUrgency. 3. Navigate: on success (check response code 200), navigate to a Confirmation screen and pass the returned $.id as a parameter. Create a simple Confirmation screen with a large checkmark icon, a Text widget showing Ticket #[id] submitted successfully, and a button to go back to the home screen. If you need to handle session expiry gracefully, add error handling on step 2: if response code is 401, clear App State sysAidCookie, re-run loginAndSaveCookie, then retry CreateServiceRecord once. This prevents the user from seeing a raw 401 error.

The setup above works for a personal or internal single-user app, but it has a security limitation: the user's SysAid credentials (or a hardcoded service-account password) travel from the phone to the SysAid server. For any app distributed to multiple employees, the right architecture is a Firebase Cloud Function that holds the service-account credentials server-side, performs the SysAid login, and exposes a scoped endpoint to the FlutterFlow app. In your Firebase project (Firebase Console → Functions → Get started), create an HTTPS Cloud Function. The function accepts the ticket fields from FlutterFlow, authenticates with SysAid using the service-account credentials stored in Firebase environment config, and POSTs the Service Record. It returns only the new ticket ID to the client — not the full SysAid session cookie. In FlutterFlow, replace the direct SysAid API Group with a single API Group pointing at your Cloud Function URL. The FlutterFlow app no longer manages cookies at all — that complexity moves entirely to the proxy. The client sends only the ticket data (and a Firebase Auth token to verify the user), and receives a simple { "ticketId": "SR-1234" } response. This approach is strongly recommended for any app deployed beyond your own device. If you would rather skip the Cloud Function setup and have RapidDev's team handle the integration architecture, book a free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function (Node.js) — index.js
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5const SYSAID_BASE = functions.config().sysaid.base_url;
6const SYSAID_USER = functions.config().sysaid.username;
7const SYSAID_PASS = functions.config().sysaid.password;
8
9exports.createSysAidTicket = functions.https.onRequest(async (req, res) => {
10  res.set('Access-Control-Allow-Origin', '*');
11  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
12
13  try {
14    // Step 1: login and grab cookie
15    const loginResp = await axios.post(
16      `${SYSAID_BASE}/login`,
17      { user_name: SYSAID_USER, password: SYSAID_PASS },
18      { headers: { 'Content-Type': 'application/json' }, withCredentials: true }
19    );
20    const rawCookie = loginResp.headers['set-cookie']?.[0] ?? '';
21    const match = rawCookie.match(/JSESSIONID=([^;]+)/);
22    const sessionId = match ? match[1] : '';
23    if (!sessionId) { res.status(401).json({ error: 'SysAid login failed' }); return; }
24
25    // Step 2: create service record
26    const srResp = await axios.post(
27      `${SYSAID_BASE}/sr`,
28      { info: [
29        { key: 'title', value: req.body.title },
30        { key: 'description', value: req.body.description },
31        { key: 'urgency', value: req.body.urgency }
32      ]},
33      { headers: { 'Content-Type': 'application/json', Cookie: `JSESSIONID=${sessionId}` } }
34    );
35    res.json({ ticketId: srResp.data.id });
36  } catch (err) {
37    res.status(500).json({ error: err.message });
38  }
39});