0.1.68 • Published 5 years ago

@dotgov/z_formviewer v0.1.68

Weekly downloads
18
License
MIT
Repository
-
Last release
5 years ago

Angular5 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

import { FormViewerModule, FVEnviroment } from '@dotgov/formviewer';

const fvEnviroment: FVEnviroment = {
  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: [FormViewerModule.forRoot(fvEnviroment)],
  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

ModelsServicesModules
ApiResponseApiServiceFormViewerModule
BreadcrumbpsProcessService
FVNotificationServiceFVNotification
ComponentConfig
Control
ControlType
BindingSet
Dock
DockItem
Extract
Field
Item
Model
Path
Proxy
Tab
Task
FVDoneResponse
FVEnviroment
GridComponentConfig
Store
GridColumn
EditHandler
GridSort
GridFilter
GridConfig
Lang
Menu
Folder

API

Inputs

InputTypeDefaultRequiredDescription
taskTask-yesInitial process object
languageLangThe one you sent in fvEnviromentnoSends active language to formviewer
gridbooleanfalsenoLet formviewer know that you are gonna use instance as a grid
hideNamebooleanfalsenoDecides to show process name or not

Outputs

OutputTypeDescription
(onDone)FVDoneResponseFired when process got status 1 (done)
(onLoaded)booleanFired after process been loaded (AfterViewInit)
(titleUpdated)stringFired when process title 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);
      }
    });
  }
}

Custom styles

Not implemented yet.

Contributors

Contributor NameContributor Page
Grigore Melecagrigoreme

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

To release to npm just run npm run release, of course if you have permissions ;)

Inspiration

Thanks to ng-select for README inspiration.