@dotgov/formviewer
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.18 • Public • Published

    Angular6 formviewer - Lightweight form renderer

    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 ;)

    Install

    npm i @dotgov/formviewer

    DownloadsWeekly Downloads

    22

    Version

    2.0.18

    License

    MIT

    Unpacked Size

    8.2 MB

    Total Files

    502

    Last publish

    Collaborators

    • dgs_admin
    • azuredevops
    • artur.chelaru