Creating the interfacing service

Interfacing Service

Any application that intends to use FormQL needs to implement a service that follows the IFormQLService signature (in the package @formql/core), this allows FormQL to interact with the form and data and gives the flexibility to use any backend technology.

IFormQLService

export interface IFormQLService {
    getData(dataSource: FormDataSource, ids: Array<string>): Observable<any>;
    getForm(name: string): Observable<FormWindow>;
    getForms(): Observable<Array<FormWindow>>;
    saveForm(name: string, form: FormWindow): Observable<any>;
    saveData(dataSource: FormDataSource, ids: Array<string>, data: any): Observable<any>;
}

In order to let FormQL use the service, the app needs to

1. Define the Service in 'NgModule' making sure to link it with the string 'FormQLService' (see below the line providers: [MyAppService, {provide: 'FormQLService', useClass: MyAppService }])

import { FormQLModule } from '@formql/core';
import { FormQLEditorModule } from '@formql/editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormQLModule,
    FormQLEditorModule,
  ],
  providers: [MyAppService, {provide: 'FormQLService', useClass: MyAppService }],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Create the service implementing the IFormQLService interface. NOTE: The FormWindow object used in getForm and getForms is the interface that represents the form, it's advised that you implement the same object in your backend rather than storing it as a string

import { IFormQLService, FormWindow, FormDataSource } from "@formql/core";

@Injectable()
export class MyAppService implements IFormQLService {

    constructor(private http: HttpClient) {}

    getData(dataSource: FormDataSource, ids: Array<string>): Observable<any> {
        // get data implementation
    }    

    getForm(name: string): Observable<FormWindow> {
        // get form implementation
    }

    getForms(): Observable<Array<FormWindow>> {
        // get forms implementation ( return a list with all the forms available)
    }

    saveForm(name: string, form: FormWindow): Observable<FormWindow> {
        // save form implementation
    }

    saveData(dataSource: FormDataSource, ids: Array<string>, data: any): Observable<any> {
        // save data implementation
    }

}