Angular6 formviewer - Lightweight form renderer

• Features
• Getting started
• Roadmap
• API
• Custom styles
• Custom themes
• Exports
• Contributors
• Development

Features

• [x] Production Mode (AOT compilation compatibility)
• [x] Custom controls, html, pdf viewer, file upload, menu grid and other templates
• [x] Multiple instances
• [x] Translable content, inputs, fileds, validation, other..
• [ ] Keyboard navigation
• [ ] Custom styles

Warning

Library is under active development and may have breaking changes until stable 2.0.0 release or subsequent major versions after 2.0.0.

Getting started

Step 1: Install formviewer

NPM

npm install --save @dotgov/formviewer

Step 2: Import the component module

Consider that every DotGov Module including FormViewer must be imported next/in same context as DGSCoreModule.

import { DGSCoreModule, DGSEnvironment } from '@dotgov/core';
import { FormViewerModule } from '@dotgov/formviewer';


const dgsEnviroment: DGSEnvironment = {
  debug: environment.debug,
  apiUrl: environment.apiUrl,
  defaultLanguage: {
    Name: 'English',
    Code: 'en',
    Icon: 'fa fa-globe',
  },
  languages: [{
      Name: 'English',
      Code: 'en',
      Icon: 'fa fa-globe',
    }],
  lowerCaseTranslates: true,
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    DGSCoreModule.forRoot(dgsEnviroment),
    FormViewerModule.forRoot(dgsEnviroment),
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Include assets

To load assets like themes and pdf viewer its ncessary to include assets. IF you're using the Angular CLI, you can add this to your angular-cli.json. Note: Path to formviewer bundle must set relative to basepath inside angular-cli.json.

"apps": {
    ...any,
    "assets": [
        ...any,
        {
          "glob": "**/*",
          "input": "../node_modules/@dotgov/formviewer/assets/",
          "output": "./assets/"
        }
    ],
    ...any,
}

Step 3: Include a theme

For now library doesn't allow you to use a custom theme, but i will be avalaible soon. Keep in touch with us.

Exports

| Models | Services | Modules | | ------------- | ------------- | ------------- | | ApiResponse | ApiService | FormViewerModule | | Breadcrumbps | ProcessService | | FVNotificationService | FVNotification | | ComponentConfig | | Control | | ControlType | | BindingSet | | Dock | | DockItem | | Extract | | Field | | Item | | Model | | Path | | Proxy | | Tab | | Task | | FVDoneResponse | | GridComponentConfig | | Store | | GridColumn | | EditHandler | | GridSort | | GridFilter | | GridConfig | | Lang | | Menu | | Folder |

API

Inputs

| Input | Type | Default | Required | Description | | ------------- | ------------- | ------------- | ------------- | ------------- | | task | Task | - | yes | Initial process object | | firstLevel | boolean | false | no | Tells formviewer process running is not first-level type. ( means its child of another process ) | | parentTask | boolean | false | no | If its not first-level type, please pass whos the parent. | | hideName | boolean | false | no | Decides to show process name or not | | disabled | boolean | false | no | Disable or enable all the controls rendered on given form. |

Outputs

| Output | Type | Description | | ------------- | ------------- | ------------- | | (onDone) | FVDoneResponse | Fired when process got status 1 (done) | | (onLoaded) | boolean | Fired after process been loaded (AfterViewInit) | | (titleUpdated) | string | Fired when process title got updated | | (taskUpdated) | string | Fired when task got updated |

Also you may communicate with FVNotificationService. Example:

import { FVNotificationService, FVNotification } from '@dotgov/formviewer';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
})
export class AppComponent {
  constructor(
    private fvNotification: FVNotificationService,
  ) {
    this.fvNotification.subscription((notify: FVNotification) => {
      const allowedTypes = ['error', 'info', 'success', 'warning'];
      if (allowedTypes.indexOf(notify.type) !== -1) {
        this.handleNotification[notify.type](notify.message, notify.title);
      }
    });
  }
}

Contributors

| Contributor Name | Contributor Page | | ------------- | ------------- | | Grigore Meleca | grigoreme | | Mihail Racila | mracila25 |

Development

Setup build path

Open ng-package.json and setup dest to location where you want your build to go. (example: ../myProject/node_modules/@dotgov/formviewer)

Build

npm run build

For more information read docs/developer_guide.md

Release

Use CI/CD for that. Or just run npm run old_school_release, of course if you have permissions ;)