Angular5 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

$3

#### NPM

``shell
npm install --save @dotgov/formviewer
`

$3

`js
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 {}

`

$3

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._

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

$3

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 |
| FVEnviroment |
| GridComponentConfig |
| Store |
| GridColumn |
| EditHandler |
| GridSort |
| GridFilter |
| GridConfig |
| Lang |
| Menu |
| Folder |

API

$3

| Input | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| task | Task | - | yes | Initial process object |
| language | Lang | The one you sent in fvEnviroment | no | Sends active language to formviewer |
| grid | boolean | false | no | Let formviewer know that you are gonna use instance as a grid |
| hideName | boolean | false | no | Decides to show process name or not |

$3

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

Also you may communicate with FVNotificationService. Example:

`js
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.handleNotificationnotify.type;
}
});
}
}
`

Custom styles

Not implemented yet.

Contributors

| Contributor Name | Contributor Page |
| ------------- | ------------- |
| Grigore Meleca | grigoreme |

Development

$3

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

$3

`shell
npm run build
`

_For more information read docs/developer_guide.md_

$3

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

$3

Thanks to ng-select` for README inspiration.