Form Viewer for DGS system.
npm install @dotgov/z_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
`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 {}
`
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.formviewer
_Note: Path to 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,
}
For now library doesn't allow you to use a custom theme, but i will be avalaible soon. Keep in touch with us.
| 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 |
| Input | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| task | Task | - | yes | Initial process object |Lang
| language | | The one you sent in fvEnviroment | no | Sends active language to formviewer |boolean
| grid | | false | no | Let formviewer know that you are gonna use instance as a grid |boolean
| hideName | | false | no | Decides to show process name or not |
| Output | Type | Description |
| ------------- | ------------- | ------------- |
| (onDone) | FVDoneResponse | Fired when process got status 1 (done) |boolean
| (onLoaded) | | Fired after process been loaded (AfterViewInit) |string
| (titleUpdated) | | 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;
}
});
}
}
`
Not implemented yet.
| Contributor Name | Contributor Page |
| ------------- | ------------- |
| Grigore Meleca | grigoreme |
Open ng-package.json and setup dest to location where you want your build to go. (example: ../myProject/node_modules/@dotgov/formviewer)
`shell`
npm run build
_For more information read docs/developer_guide.md_
To release to npm just run npm run release, of course if you have permissions ;)
Thanks to ng-select` for README inspiration.