Build a custom front end

What you will build

An Angular app that signs users in, lists vendors in a platform grid styled by your own theme, and moves them through their lifecycle.

Architecture

1. Client SDK
2. Authentication
3. Data
4. UI

Steps

1. 1Scaffold the app

   In TAF Studio link a front-end repository to the app and choose the Angular scaffold. Studio installs and builds it and runs it locally against Development.

2. 2Provide the client

   Register the client once with the service base URLs and your app id.

   app.config.tsCopy

   import { provideTafClient } from 'taf-client-angular';
   
   export const appConfig = {
     providers: [
       provideTafClient({
         appId: environment.appId,
         apiBaseUrls: {
           identity: environment.identityUrl,
           crud: environment.dataUrl,
           metadata: environment.metadataUrl,
         },
       }),
     ],
   };

3. 3Read data

   Inject TAF_DATA and query an entity. Rows outside the user's scope are never returned.

   vendors.page.tsCopy

   import { inject } from '@angular/core';
   import { TAF_DATA } from 'taf-client-angular';
   import { RelOp } from 'taf-client-core';
   
   const data = inject(TAF_DATA);
   
   const vendors = await data.entity('Vendor').query()
     .select('Id', 'Name', 'Country')
     .where('Country', RelOp.EqualTo, 'India')
     .orderBy('Name')
     .take(25)
     .toArray();

4. 4Use platform components

   Drop in <taf-grid>, <taf-form> or <taf-inbox>. The components ship without styling on purpose, so your theme decides how they look.

5. 5Move records through the lifecycle

   Use TAF_WORKFLOW to read available statuses and move a record by status name with transitionTo('Vendor', id, 'Approved').

Result

A front end that looks entirely like your product, with the platform providing data, access rules, lifecycles and approvals behind it.