Form Viewer for DGS system.
npm install @dotgov/formviewer* Features
* Getting started
* Roadmap
* API
* Custom styles
* Custom themes
* Exports
* Contributors
* Development
* [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
Library is under active development and may have breaking changes until stable 2.0.0 release or subsequent major versions after 2.0.0.
#### NPM
``shell`
npm install --save @dotgov/formviewer
must be imported next/in same context as DGSCoreModule. `js
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 {}
`$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 |
| GridComponentConfig |
| Store |
| GridColumn |
| EditHandler |
| GridSort |
| GridFilter |
| GridConfig |
| Lang |
| Menu |
| Folder |
API
$3
| 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. |$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 |
| (taskUpdated) | string | Fired when task 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;
}
});
}
}
`Contributors
| Contributor Name | Contributor Page |
| ------------- | ------------- |
| Grigore Meleca | grigoreme |
| Mihail Racila | mracila25 |
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
Use CI/CD for that.
Or just run
npm run old_school_release`, of course if you have permissions ;)