@asoftwareworld/form-builder-pro

ASW Form Builder PRO - Design dynamic web forms.

ASW Form Builder PRO helps you with rapid development and designed web forms which includes several controls
using Angular/Angular-Material and Bootstrap.

https://asoftwareworld.com/product/form-builder/demo

Contributing Guidelines · Submit an Issue · Blog

 

---

Documentation

ASW Form Builder helps you with rapid development and designed web forms which includes several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same before final submission.

Form Builder is compatible with the latest version of Angular and Angular Material. Only a few clicks can create an attractive web form and provide a JSON Schema to render all controls.

Installation

Below are some prerequisites before install Form Builder.

Step 1: Install Angular Material

Install Angular Material by running the following command:

ng add @angular/material

Step 2: Install ASW Form Builder PRO

Install Form Builder to set up in the project by running the following command:

npm install @asoftwareworld/form-builder-pro

Step 3: Set the license key

ASW Form Builder Pro will display an invalid key watermark if you do not set a license key. ASW Form Builder validates the license key without any network call. The license key for Form Builder Library is a one-time setup. You don't need to set license key for each instance of form builder you create, just need to set it statically in main.ts file as shown below:

import { AswLicense } from '@asoftwareworld/form-builder-pro/core';

AswLicense.registerLicenseKey('your license key');

Step 4: Import the component modules

Import the NgModule for each component you want to use:

import { AswFormBuilderModule } from '@asoftwareworld/form-builder-pro/form-builder';
import { AswPreviewTemplateModule } from '@asoftwareworld/form-builder-pro/preview-template';
// ...

@NgModule({
  imports: [
    // shown passing global defaults (optional)
    AswFormBuilderModule,
    AswPreviewTemplateModule
    ...
  ]
  // ...
})
export class AppModule {}

Step 5: Include a theme

Including a theme is required to apply the form builder and controls design.

You can include this theme in component SCSS or CSS files to not use this globally in your application.

@import '~@asoftwareworld/form-builder-pro/theme/asw-theme.min.css';

If you're using the Angular CLI, and you want to use themes globally in your application. Then you can add this to your styles.css or angular.json:

styles.css or styles.scss:

@import '~@asoftwareworld/form-builder-pro/theme/asw-theme.min.css';

or

angular.json:

"styles": [
  "./node_modules/@asoftwareworld/form-builder-pro/theme/asw-theme.min.css"
],

If you are not using the Angular CLI, you can include a theme via a <link> element in your index.html.

Add a selector to HTML

In your template, use the component selector:

<asw-form-builder [currentLanguage]="'en'"
    [cssFramework]="CSSFramework"
    [controlPersonalization]="ControlPersonalization"
    [propertyPersonalization]="propertyPersonalization"
    [isShowPreviewButton]="isShowPreviewButton"
    [isShowJsonDataButton]="isShowJsonDataButton"
    [isShowPublishButton]="isShowPublishButton"
    [controlCollectionName]="controlCollectionName"
    [patterns]="pattern"
    (publishClick)="saveJsonData($event)" 
    (previewClick)="previewTemplate($event)"
    (buttonClick)="buttonClick($event)"
    (aswModelChange)="onSelectionChange($event)"></asw-form-builder>

Preview Template, use the component selector in your HTML page:

<asw-preview-template [formContainer]="jsonData" 
    (buttonClick)="buttonClick($event)"
    (aswModelChange)="onSelectionChange($event)">
</asw-preview-template>

Define in your component to get published event :

export class AppComponent {
    title = 'ASW Form Builder Demo';
    jsonData: any[] = [];
    jsonData1: any[] = [];
    isShowPreviewButton = false;
    isShowJsonDataButton = true;
    isShowPublishButton = false;
    ControlPersonalization: string[] = []; // Add those control enum which you want to exculde from the asw form builder.
    propertyPersonalization: string[] = [];
    controlCollectionName = '';
    
    // Publish Template
    saveJsonData(data: any){
        //.... 
        console.log(data);
        // do something
    }
    
    //Preview Template
    previewTemplate(data: any){
        this.jsonData = data;
    }

    buttonClick(data: any): void {
        console.log(data);
    }

    onSelectionChange(control: any): void {
        console.log(control);
    }
}

ASW Form Builder PRO Documentation

Get Started
API

Theme

Angular Material more information and Bootstrap more information

List of Controls available

controls	description
Header	Headings are defined with the <h1> to <h6> tags. Used as a title of the post, template and resume, etc.
Image Upload	Upload image with crop, zoom in, zoom out, reset, rotate, swap etc. features.
Autocomplete	The autocomplete is a normal text input enhanced by a panel of suggested relevant options as the user types.
Text field	Enable native inputs to be used within a form field. The styles such as the underline, floating label.
Text area	Enable native inputs to be used within a form field. The styles such as the underline, floating label.
Datepicker	The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar.
Select	Allows the user to select only one option using dropdown.
Multi select	Allows the user to select one or more options using dropdown.
Radio button	Allows the user to select only one option from a group.
Checkbox button	Use multi select check box or single checkbox and captures boolean input with an optional indeterminate mode.
Button	Angular Material interactive button with a range of presentation options.
Paragraph	Paragraphs are the building blocks of papers.
Divider	Create a horizontal or vertical line styled with a Angular Material theme
Slide toggle	Is an on/off control that can be toggled via clicking and draggable switch.
Grid	Configure bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content.
GPS	Add google map key in index.html file to use GPS feature.
QR Code	ASW QR Code library for generating QR Code for Angular projects. Readme file to use feature.
Signature	This control allow for digital signature and display the result. (Uses canvas & fabric.js).
Image Drawing	This control allow to draw on Image and display the result. (Uses canvas & fabric.js).

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Report a bug

We use GitHub Issues as the official bug tracker for the ASW Form Builder. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the ASW Form Builder.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help please email [e-mail]

License

ASW License (A Software World)

Social Media

Twitter: https://twitter.com/asoftwareworld

LinkedIn: https://in.linkedin.com/company/asoftwareworld

Facebook: https://www.facebook.com/asoftwaresworld

(https://github.com/asoftwareworld/ASW-Form-Builder-Pro)

Love ASW Form Builder? Give our repo a star ⭐ ⬆️.