Multiexcerpt

MultiExcerptName	introduction
shouldDisplayInlineCommentsInIncludes	false

You can develop custom Pro-Code forms in a PAS Form Library to use these forms as Low-Code forms or sub-forms in the Designer. Either you can start from scratch, or you can export the form definitions of a Designer service (see Modeling Forms) as a Pro-Code PAS Form Library. The library already contains the necessary structure and meta-information to directly start coding.

The xUML Library Development Kit (xlib) helps you with this task. It can be used to build these libraries, and run them for testing purposes.

Prerequisites

Info
Developing custom form libraries for the Scheer PAS platform assumes a basic knowledge of HTML, CSS, JavaScript/TypeScript and the Angular framework. If you want to install the PAS xUML Library Development Kit, please contact our Support team.

You need to have the following installed:

NodeJS
the Angular CLI (version 13.1.1)
the PAS xUML Library Development Kit

Multiexcerpt include

SpaceWithExcerpt	INTERNAL
MultiExcerptName	tip_multi_project_workspaces
PageWithExcerpt	INTERNAL:_designer_excerpts

Working with the xUML Library Development Kit (xlib)

After you have installed the @pas/xuml-library-devkit, you can switch to your project folder and execute the following commands to build a new multiple-projects workspace with a new library project in it.

Creating Workspace and Library

The following table displays an overview on the main features of xlib to use with developing your own form libraries.

Command Description Example

xlib new <library-name>

This command builds a new multiple-projects workspace with a new library project in it. The development kit automatically generates a test form and application.

xlib new my-lib

You will get the multiple-projects workspace <library-name> containing the following files:

Code Block

language	bash
title	Generated workspace files

/c/Projects/Devkit/my-lib (dev)
$ ls -la
drwxr-xr-x 1 u100106 1049089      0 Aug  9 14:46 ./
drwxr-xr-x 1 u100106 1049089      0 Aug  9 14:44 ../
-rw-r--r-- 1 u100106 1049089    274 Aug  9 14:44 .editorconfig
drwxr-xr-x 1 u100106 1049089      0 Aug  9 14:44 .git/
-rw-r--r-- 1 u100106 1049089    620 Aug  9 14:44 .gitignore
drwxr-xr-x 1 u100106 1049089      0 Aug  9 14:44 .vscode/
-rw-r--r-- 1 u100106 1049089   1139 Aug  9 14:45 angular.json
drwxr-xr-x 1 u100106 1049089      0 Aug  9 14:46 node_modules/
-rw-r--r-- 1 u100106 1049089   1285 Aug  9 14:46 package.json
-rw-r--r-- 1 u100106 1049089 843158 Aug  9 14:46 package-lock.json
drwxr-xr-x 1 u100106 1049089      0 Aug  9 14:45 projects/
-rw-r--r-- 1 u100106 1049089   1051 Aug  9 14:44 README.md
-rw-r--r-- 1 u100106 1049089    963 Aug  9 14:45 tsconfig.json

The library project is generated at path <library-name/projects/library-name>.

Code Block

language	bash
title	Projects Folder

/c/Projects/Devkit/my-lib/projects (dev)
$ ls -la
drwxr-xr-x 1 u100106 1049089 0 Aug  9 14:45 ./
drwxr-xr-x 1 u100106 1049089 0 Aug  9 14:46 ../
drwxr-xr-x 1 u100106 1049089 0 Aug  9 14:45 my-lib/

Creating a Form

Your workspace project is created with an automatically generated PAS form from the @pas/xuml-library-devkit under the name my-form. To create your own form, switch to <library-name>/projects/<library-name>/src/lib> in your workspace project. You can now use the @pas/xuml-library-devkit to create a new PAS form using the following command:

Command Description Example

xlib generate form <form-name>

The Development Kit creates a new folder that contains all the files needed for a new PAS form.

Code Block

language	bash
title	Projects Folder

/C/Projects/Devkit/my-lib/projects/my-lib/src/lib/my-form (dev)
$ ls -la
drwxr-xr-x 1 u100106 1049089   0 Aug  9 15:15 ./
drwxr-xr-x 1 u100106 1049089   0 Aug  9 15:15 ../
-rw-r--r-- 1 u100106 1049089   0 Aug  9 15:15 my-form.component.css
-rw-r--r-- 1 u100106 1049089 270 Aug  9 15:15 my-form.component.html
-rw-r--r-- 1 u100106 1049089 627 Aug  9 15:15 my-form.component.spec.ts
-rw-r--r-- 1 u100106 1049089 767 Aug  9 15:15 my-form.component.ts
-rw-r--r-- 1 u100106 1049089  57 Aug  9 15:15 my-form.interface.ts

xlib generate form MyForm

Use the @PasForm decorator in the my-form.component.ts file to set the name of the form in your Designer project and to define the events that can be used to trigger an execution in the BPMN process.

Code Block

title	@PASForm Decorator

@PasForm({
    name: 'MyForm',
    events: [
        'submit'
    ]
})

The Development Kit uses the my-form.interface.ts file to build the PAS Designer types for you, so use this file to define the types for this form.

Note

Do not forget to export the form component class in the library interface file (public-api.ts) to make this new component accessible.

Code Block
/* * Public API Surface of my-lib / export from './lib/my-lib.service'; export * from './lib/my-lib.component'; export * from './lib/my-lib.module'; export * from './lib/my-form/my-form.component';

Building the Library

Make sure you generate the build folder before you build the library for the first time.

Command Description

ng build

Generates the build folder.

Note
You need to run this command once, before you can build the library for the first time.

xlib build

Creates an xlib folder and builds the <library-name>-library.xlib package in the root folder.

Tip
Go to Administrating Libraries for detailed information on how to upload libraries. The usage of libraries is explained in detail on page Adding Libraries.

Panel

title	On this Page:

Table of Contents

Panel

title	Related Pages:

Otp

Floating	false

rp

Modeling Forms

Panel

title	Related DocumentsDocumentation:

test-libs.tar.gz

Download the archived (empty) test project if you want to use it as a starting point for a new Pro-Code project.

The project has been created by an xlib new command.
Just perform an npm install to install the dependencies.

Testing and Developing Your Form Component

For testing purposes, your multiple-projects workspace comes with an automatically generated test application along with one Angular component.

Multiexcerpt include

SpaceWithExcerpt	INTERNAL
MultiExcerptName	tip_multi_project_workspaces
PageWithExcerpt	INTERNAL:_designer_excerpts

Test Application Features

All mentioned files reside in folder <name of the library>/projects/<name of the application>/src/app.

File Description

form-test-wrapper.component.html

Contains the <pas-child-form> element. This element is part of the @pas/app-core module and is also used by the Designer to show subform elements. With this element, you can test your Designer integration as close as possible.

The <pas-child-form> element is preadjusted to use events in order to read the form's data. To test that, add text to the input field, open your browser console and click the submit button (see Starting the Test Application below).

Code Block

language	xml
title	form-test-wrapper.component.html

<pas-child-form [form]="form" (formEvent)="onFormEvent($event)" [formGroup]="reactiveForm" [data]="formData"></pas-child-form>

form-test-wrapper.component.ts

Contains an import of your form component from your library's public-api.ts file and a form variable which allows you to use your component MyFormComponent in the <pas-child-form> element.

Code Block

language	js
title	form-test-wrapper.component.ts

import { Component, Input, OnInit, Type } from '@angular/core';
import {AbstractFormComponent, FormEvent} from "@pas/app-core";
import { FormGroup } from '@angular/forms';
import {MyFormComponent} from "../../../../my-lib/src/public-api";

@Component({
  selector: 'app-form-test-wrapper',
  templateUrl: './form-test-wrapper.component.html',
  styleUrls: ['./form-test-wrapper.component.scss']
})
export class FormTestWrapperComponent implements OnInit {
  public form: Type<AbstractFormComponent> = MyFormComponent;
  constructor() { }

  ngOnInit(): void {
  }

  @Input() public reactiveForm: FormGroup = new FormGroup({});
  public formData: any = {};

  async onFormEvent(event: FormEvent) {
    console.log(this.reactiveForm.value);
  }
}

app.module.ts

Contains an import of @pas/app-core module which makes the <pas-child-form> element accessible.

Code Block

language	js
title	app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormTestWrapperComponent } from './form-test-wrapper/form-test-wrapper.component';
import {AppCoreModule} from "@pas/app-core";

@NgModule({
  declarations: [
    AppComponent,
    FormTestWrapperComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AppCoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

Contains the selector of your form-test.wrapper.component to make your component appear.

Code Block

language	xml
title	app.component.html

<app-form-test-wrapper></app-form-test-wrapper>

Tip

You can find how your HTML element is called in the .ts file of your generated form-test-wrapper component. It is the selector entry in the @Component decorator.

@Component({
   selector: 'app-form-test-wrapper' ,
   templateUrl: './form-test-wrapper.component.html' ,
   styleUrls: [ './form-test-wrapper.component.scss' ]
})

Starting the Test Application

To start your test application, use:

Code Block

language	js

ng serve my-form-test --configuration development

This outputs

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

	Open the mentioned URL http://localhost:4200/ in your browser and you will see the following screen:
	Enter some text in the input field in your form. Open the developer console of your browser and click Submit. The entered text will be displayed in the console. Now you can continue extending your form with individual elements and test them in the Designer.

Using External Libraries

If you want to use external libraries in your Pro-Code forms, you need to add the external library to your own library project.

Path

Step

Description

Example Code

my-lib/projects/my-lib

1

Go to my-lib/projects/my-lib and execute the install command for the external library.

Code Block

language	js

npm install ng2-pdfjs-viewer --save

2

Adjust the ng-package.json in the library folder to make the external library available for your applications.

Code Block

language	js

"allowedNonPeerDependencies":[
   "@pas/xuml-library-devkit",
   "ng2-pdf-viewer"]

Page tree

Versions Compared

Old Version 5

New Version Current

Key

Prerequisites

Working with the xUML Library Development Kit (xlib)

Creating Workspace and Library

Creating a Form

Building the Library

Testing and Developing Your Form Component

Test Application Features

Starting the Test Application

Using External Libraries

Page tree

Page History

Versions Compared

Old Version 5

New Version Current

Key

Prerequisites

Working with the xUML Library Development Kit (xlib)

Creating Workspace and Library

Creating a Form

Building the Library

Testing and Developing Your Form Component

Test Application Features

Starting the Test Application

Using External Libraries