Public Form

The Public Form component is a dynamic, reusable form system designed to collect user input efficiently. It is rendered dynamically on the frontend based on the configuration provided by the backend, ensuring flexibility and central control over form structures. You can use it alone without reading the full documentation

Make sure you have applied the Authentication:

Authentication

You have only to download those packages and start your journey:

npm i @tradinos/cms-frontend-entity --force
npm i @tradinos/cms-frontend-form --force
npm i @tradinos/cms-frontend-layout --force
npm install primeng@17 --force

And you need to update your angular.json file to apply the style in your app :

//If you want to use another theme, you need to replace it with "lara" theme 
"styles": [
    "src/styles.css",
    {
      "input": "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
      "bundleName": "lara-light",
      "inject": false
    },
    {
      "input": "node_modules/primeng/resources/themes/lara-dark-blue/theme.css",
      "bundleName": "lara-dark",
      "inject": false
    }
]

In your index.html, you have to put this code:

  <link
      id="app-theme"
      rel="stylesheet"
      type="text/css"
      href="lara-light.css"
    />

In the style.css file, you have to make those imports:

@import "@tradinos/cms-frontend-layout/themes/theme.css";
@import "primeng/resources/primeng.min.css";
@import "primeflex/primeflex.min.css";
@import "primeicons/primeicons.css";

in your app.component.html:

@if(formSchema) {
<lib-cms-generic-form-builder [formSchema]="formSchema!" />

<p-button [outlined]="true" [rounded]="true" (onClick)="submit()">
  <span class="px-2">submit</span>
</p-button>
}

In your app.components.ts

import {
  FormInput,
  FormSchema,
  FormService,
  GenericFormBuilderComponent,
  LIB_FORM_CONFIG,
} from '@tradinos/cms-frontend-form';
import { EntityMetadata, EntityService } from '@tradinos/cms-frontend-entity';
import { ButtonModule } from 'primeng/button';
@Component({
  selector: 'app-root',
  imports: [RouterOutlet,ButtonModule,GenericFormBuilderComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
providers: [
    FormService,
    ConfirmationService,
    {
      provide: LIB_FORM_CONFIG,
      useFactory: () => {
        class ConcreteEntityService extends EntityService<any> {}
        return { cmsService: new ConcreteEntityService() };
      },
    },
  ],
export class AppComponent {
  @ViewChild(GenericFormBuilderComponent, { static: false })
  genericFormBuilder?: GenericFormBuilderComponent<any>;
  formSchema!: FormSchema<any>;

  constructor(
    private http: HttpClient,
    private formService: FormService<any>
  ) {}

  async ngOnInit(): Promise<void> {
    const inputs = await this._getInputs();

    if (inputs === undefined) return;

    this.formSchema = {
      inputs: inputs,
    };
  }

  private async _getInputs(): Promise<(item?: any) => FormInput<any, any>[]> {
    const observable = this.http.get(
      'https://tradinos-cms-back-dev.8byteslab.com/user/metadata/details',
      {
        headers: {
          Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjRjYjU2ZjVhLWQ0ZWQtNDg3MS1iY2FkLWIxZmZiZTExZDVkZCIsInJvbGVzIjpbImFkNjdiMWYyLTM3OTUtNGQ5MS05ZjU1LTIzYTgwMjBlYzZlMyJdLCJ0eXBlIjoiQUNDRVNTX1RPS0VOIiwiaWF0IjoxNzQ1OTMwMjgwLCJleHAiOjE3NDU5MzM4ODB9.BcFdbHh6_tGSM-0pfTv-5MIQg01uEuFnnEP5Vq_kiwo`,
        },
      }
    );

    const metadata = (await firstValueFrom(observable)) as EntityMetadata;
    return this.formService.getInputsByMetadata(metadata, 'CREATE');
  }

Submit function:

submit() {
    if (!this.genericFormBuilder) return;
    const { formGroup } = this.genericFormBuilder;
    console.log(formGroup.value);
  }
}

In your app.config.ts

import { provideHttpClient } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppSharedModule } from '@tradinos/cms-frontend-layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideHttpCache(),
    importProvidersFrom([
      BrowserModule,
      BrowserAnimationsModule,
      AppSharedModule,
    ]),
  ],
};