@dotgov/formviewer v2.0.18
Angular6 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
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 ;)
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago