Client SDK

The client SDK has a framework-agnostic core, an Angular adapter with injection tokens and components, and React hooks. It handles sign-in, token refresh (one refresh and retry on 401), asynchronous writes confirmed by reading back, and real-time updates.

See SDKs for packages and a full example.

When to use the SDKs

A standard TechAppForce app uses screens designed in TAF Studio or the web app. When a product needs its own look and interaction, for example a customer-facing portal, build a custom frontend with the client SDKs instead. TechAppForce still provides the records, access rules, sign-in, menus, lifecycles and workflows, so your team writes UI, not plumbing.

How the SDKs are built

• Core. Framework-free TypeScript that talks HTTP and storage through two small ports. It handles configuration, the request context, token refresh and typed errors.
• Slices. One package per capability, each created from the core.
• Adapters. The Angular adapter provides the client and exposes each slice as an injection token, and bundles every slice, so an Angular app installs the adapter plus the components it uses. The React adapter provides a TafProvider and hooks.
• Components. Unstyled Angular components for common screens. There is no React component library.

The packages are published on npm. Your TechAppForce contact will give you the package names and versions to pin for your project.

Set up

Angular

// app.config.ts — providers
providers: [
  provideHttpClient(withFetch()),
  ...provideTafClient(environment.taf),   // your TafClientConfig
],

// any component or service
const data = inject(TAF_DATA);
const identity = inject(TAF_IDENTITY);

React

const taf = await createReactTafClient(config);

<TafProvider client={taf}>
  <App />
</TafProvider>

// inside components
const { user, isAuthenticated, signIn, signOut } = useTafAuth();
const roles = await useTafClient().roles.listRoles();

The configuration names the base address of each platform service you use (identity is required; data, metadata, files, reports, notifications and workflow as needed), the app id, and in practice the tenant id, which token refresh needs. Optional settings cover environment, release, API version, storage prefix and a retry policy for transient failures. There is no separate auth setting: when a call gets a 401, the SDK refreshes the token once and retries.

Data

The data slice works with records of any object through entity(name), which provides list, get, create, update, remove and a query builder:

const invoices = data.entity<Invoice>('Invoice');

const open = await invoices.query()
  .where('Status', RelOp.EqualTo, 'Open')
  .orderBy('DueDate')
  .take(20)
  .toArray();

const { id } = await invoices.create({ Amount: 100, Status: 'Open' });
await invoices.update(id, { Status: 'Paid' });

The query builder chains select, where, orderBy, skip, take, search, distinct, aggregate and groupBy, and ends with toPage, toArray, first or count. You can also run a saved query by name, and bulk-insert rows.

Identity, roles and permissions

• Identity. signIn returns an explicit result (success, MFA required, new password required, account locked or invalid) for your sign-in screen to handle, plus sign-out, password change and password reset.
• Users and roles. List and invite users, assign roles, list sessions; create, update and delete roles.
• Permissions. getMyAccess() and can(appObjectId, 'update') decide what to show or hide, and there are calls to grant and revoke access. These checks are for the UI only: the server always enforces the real permissions.
• Menu. getMenuTree() reads the app's navigation.

Lifecycles, approvals and inbox

• Status. transitionTo(entity, id, 'StatusName') moves a record along its lifecycle and reports where it moved from and to. There are also calls for available statuses and bulk transitions.
• Approvals. Start an approval, list approvals, and record a decision: approve, reject, return, comment, recall, resubmit, delegate or reassign.
• Workflows. Run a workflow directly by id.
• Inbox. Build a “my work” list from your own objects (each source names the assignee, title, status and due fields), merged with the platform's own inbox.

Files, metadata and realtime

• Files. Upload, list, rename, remove and download files, create expiring share links, and attach files to records.
• Metadata. Read the app's entities, field types, screens and queries.
• Realtime. Opt-in: watch an entity for changes, or wait for a queued write to land. It needs the SignalR client.
• Reports, notifications, comments and lookups. Run and schedule saved reports, send notifications, read a record's comment trail, and load dropdown option lists.
• Virtual URLs. Call your own versioned endpoints, with an optional generated typed client. See Custom APIs.

Angular components

The component packages render platform data in your app's own look. They ship with no colours or fonts; you style them through their taf-<name>__* class hooks.

<taf-grid entity="Invoice" [fields]="['Number', 'Customer', 'Amount', 'Status']"></taf-grid>

• <taf-grid>: a data grid bound to an entity, a saved query or your own rows, with sorting, search, client or server paging, inline editing and row actions.
• <taf-form>: a form generated from entity metadata, or driven by your own form group and layout.
• <taf-list>, <taf-entity-list>, <taf-inbox>, <taf-metric>, <taf-status> and <taf-card>, plus dialog, filter bar, detail, record header, tabs, lookup, steps, calendar and print components.

Platform facts to know

• A write can be accepted before it is stored. The SDK re-reads to confirm; with realtime you can wait for the write to land.
• A unique-constraint conflict surfaces as a typed conflict error. Catch the error type, not the status code.
• Name the columns you select explicitly. Dotted paths into related records work.
• Status and approval calls act on the record's lifecycle, which stays inactive until lifecycle support is turned on for the object.
• Your own routes do not appear in the platform menu; the menu only knows items registered in the app. Add custom routes to your own navigation.