@dotgov/formviewer

Form Viewer for DGS system.

Stats

StarsIssuesVersionUpdatedCreatedSize
@dotgov/formviewer
2.0.184 months ago3 years agoMinified + gzip package size for @dotgov/formviewer in KB

Readme

Angular6 formviewer - Lightweight form renderer

Features

  • Production Mode (AOT compilation compatibility)
  • Custom controls, html, pdf viewer, file upload, menu grid and other templates
  • Multiple instances
  • 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 ;)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.