> ## Documentation Index
> Fetch the complete documentation index at: https://docs.communityhub.cloud/llms.txt
> Use this file to discover all available pages before exploring further.
# Live Variable Filter Playground
> An interactive, in-browser tool that fetches live filter options from GET /variable/get-variable-filter-data and lets you build and run a real GET /variables request from your selections.
## Why a custom playground
`GET /variables` doesn't have a static Mintlify OpenAPI playground here, on purpose: its filter parameters aren't confirmed yet (see [Discovery Endpoints](/api-reference/query/saved-queries)), and the option values for each filter come from a *different, live* endpoint — [`GET /variable/get-variable-filter-data`](/api-reference/query/variable-filters) — rather than a fixed enum. A static OpenAPI spec can't express "fetch the real choices at request time," so this page does it with a small React component instead.
This tool runs entirely in your browser. Your token is never sent anywhere except directly to `api.communityhub.cloud` — but treat it like any other credential, and don't paste a token you don't want visible in browser dev tools. It also requires `api.communityhub.cloud` to allow cross-origin requests (CORS) from this docs site; if that isn't enabled yet, the requests below will fail with a CORS error rather than a normal API error.
If this site's login is wired up to auto-fill your token (via Mintlify's JWT/OAuth authentication + a `user` object with a `content.token` or `apiPlaygroundInputs.header.Authorization` value), the field below fills in automatically once you're signed in. Until that's wired up on the backend, paste your token manually — see [Authentication](/api-reference/authentication) for how to generate one.
export const FilterVariablesPlayground = () => {
const BASE_URL = "https://api.communityhub.cloud/dh/public/v1";
const loggedInUser = typeof user !== "undefined" ? user : {};
const autoToken = loggedInUser?.content?.token || loggedInUser?.apiPlaygroundInputs?.header?.Authorization?.replace(/^Bearer\s+/i, "") || "";
const [token, setToken] = useState(autoToken);
const [orgIdsInput, setOrgIdsInput] = useState("");
const [orgIdsEncoding, setOrgIdsEncoding] = useState("comma");
const [facetGroups, setFacetGroups] = useState(null);
const [facetsLoading, setFacetsLoading] = useState(false);
const [facetsError, setFacetsError] = useState(null);
const [selected, setSelected] = useState({});
const [filterEncoding, setFilterEncoding] = useState("repeated");
const [variablesResult, setVariablesResult] = useState(null);
const [variablesError, setVariablesError] = useState(null);
const [variablesLoading, setVariablesLoading] = useState(false);
const buildOrgIdsQuery = () => {
const ids = orgIdsInput.split(",").map(s => s.trim()).filter(Boolean);
if (ids.length === 0) return "";
if (orgIdsEncoding === "comma") {
return "orgIds=" + encodeURIComponent(ids.join(","));
}
return ids.map(id => "orgIds=" + encodeURIComponent(id)).join("&");
};
const loadFacets = () => {
setFacetsLoading(true);
setFacetsError(null);
setFacetGroups(null);
setSelected({});
const query = buildOrgIdsQuery();
const url = BASE_URL + "/variable/get-variable-filter-data" + (query ? "?" + query : "");
fetch(url, {
headers: {
Authorization: "Bearer " + token
}
}).then(res => {
if (!res.ok) throw new Error("Request failed with status " + res.status);
return res.json();
}).then(data => {
setFacetGroups(Array.isArray(data) ? data : []);
setFacetsLoading(false);
}).catch(err => {
setFacetsError(err.message || String(err));
setFacetsLoading(false);
});
};
const toggleChild = (facetId, childId) => {
setSelected(prev => {
const current = prev[facetId] || [];
const idStr = String(childId);
const next = current.includes(idStr) ? current.filter(v => v !== idStr) : [...current, idStr];
return {
...prev,
[facetId]: next
};
});
};
const buildVariablesQuery = () => {
const parts = [];
Object.keys(selected).forEach(facetId => {
const values = selected[facetId] || [];
if (values.length === 0) return;
if (filterEncoding === "comma") {
parts.push(facetId + "=" + encodeURIComponent(values.join(",")));
} else {
values.forEach(v => parts.push(facetId + "=" + encodeURIComponent(v)));
}
});
return parts.join("&");
};
const variablesUrl = BASE_URL + "/variables" + (buildVariablesQuery() ? "?" + buildVariablesQuery() : "");
const runVariablesQuery = () => {
setVariablesLoading(true);
setVariablesError(null);
setVariablesResult(null);
fetch(variablesUrl, {
headers: {
Authorization: "Bearer " + token
}
}).then(res => {
if (!res.ok) throw new Error("Request failed with status " + res.status);
return res.json();
}).then(data => {
setVariablesResult(data);
setVariablesLoading(false);
}).catch(err => {
setVariablesError(err.message || String(err));
setVariablesLoading(false);
});
};
const inputStyle = {
width: "100%",
padding: "6px 10px",
borderRadius: "8px",
border: "1px solid rgba(0,0,0,0.2)",
fontSize: "14px"
};
return
{autoToken &&
Signed in via Data Hub — token auto-filled below. Edit it if you want to test with a different token.
}
{facetsError &&
Error: {facetsError}
}
{facetGroups &&
Loaded {facetGroups.length} facet group(s) live from GET /variable/get-variable-filter-data. Select values below to build a GET /variables request.
;
};
## What this proves — and what it doesn't
This confirms the *shape* of a working filter flow: fetch facets live, let a user pick values, build a request from those picks. It does **not** confirm that `GET /variables` actually accepts `resourceType`, `pointType`, `buildingType`, `building`, `status`, and `dataReception` as query parameter names — those are still the same unconfirmed guesses flagged in [Discovery Endpoints](/api-reference/query/saved-queries). Use this tool against a real token to find out, then update this page's parameter names (and the static [`openapi.json`](/api-reference/introduction)) to match once confirmed.