🧩 Octa Form Preview Web Component

The Octa Form Preview Web Component is a fully framework-independent, reusable UI component that enables developers to dynamically create, edit, and manage forms. It can be used seamlessly in Angular, React, Vue, or pure HTML/JavaScript environments.

🚀 Installation

Step 1: Install the package

npm i @piserve-tech/octa-form-preview-webcomponent

⚙️ Setup Guide

Step 2: Copy Required Assets

Run the following command to copy the assets (bundle.js and bundle.css) into your project’s assets folder.

node .\node_modules\@piserve-tech\octa-form-preview-webcomponent\copy-assets.js

This script will copy files into:

/src/assets/octa-form-preview-webcomponent/

Step 3: Add Component in HTML

Use the web component directly in your HTML file or within any framework template:

<octa-form-preview-webcomponent
submissionid="submissionid" formdata="formdata" language="en"></octa-form-preview-webcomponent>

Step 4: Load JS & CSS (Optional for Frameworks)

If your environment doesn’t automatically include the assets, load them dynamically in your code.

Example (JavaScript or Angular):

loadScript(src: string): Promise<void> {
  return new Promise((resolve, reject) => {
    if (document.querySelector(`script[src="${src}"]`)) {
      resolve();
      return;
    }
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve();
    script.onerror = () => reject();
    document.body.appendChild(script);
  });
}

loadStyle(href: string): Promise<void> {
  return new Promise((resolve, reject) => {
    if (document.querySelector(`link[href="${href}"]`)) {
      resolve();
      return;
    }
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    link.onload = () => resolve();
    link.onerror = () => reject();
    document.head.appendChild(link);
  });
}

async ngAfterViewInit() {
  await this.loadStyle('./assets/octa-form-preview-webcomponent/bundle.css');
  await this.loadScript('./assets/octa-form-preview-webcomponent/bundle.js');
  const el = document.querySelector('octa-form-preview-webcomponent') as any;
  if (el) {
    el.formId = this.id;
    el.edit = true;
    el.showModifyInfo = false;
    el.formData = this.formData;
    el.top = '0';
    el.createDuplicate = false;
    el.formElements = this.formElements;
  }
}

Step 5 (Angular Only): Add CUSTOM_ELEMENTS_SCHEMA

If you are using Angular, include CUSTOM_ELEMENTS_SCHEMA in your module file (e.g. app.module.ts).

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 👈 Important for Web Components
})
export class AppModule {}

Step 6 (Optional): Add Bundle in angular.json

If you prefer referencing the bundle directly via Angular CLI build options, include the following line:

"scripts": [
  "node_modules/@piserve-tech/octa-form-preview-webcomponent/dist/bundle.js"
]

🛠️ Tech Stack

• Web Components (Custom Elements API)
• Angular 16+ Compatible
• TypeScript
• Node.js (for asset copy script)

📄 License

© 2025 Piserve Technologies Pvt Ltd
Licensed under the MIT License.