Breadcrumbs

Developing Custom Forms in a Library with Angular 19

You can develop custom Pro-Code forms from scratch in a PAS Form Library to use these forms as Low-Code forms or sub-forms in the Designer.

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

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:

You can install the xUML Library Development Kit using the following command:

Bash
npm install @pas/xuml-library-devkit

Expert Advice

For detailed information about multi-project workspaces, visit the Angular documentation.

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:

Generated workspace files:

Bash
/c/Projects/Devkit/my-lib (dev)
$ ls
d-----         20-Jan-26      9:47                .git
d-----         20-Jan-26      9:47                .storybook
d-----         20-Jan-26      9:47                .vscode
d-----         20-Jan-26      9:47                logs
d-----         13-Jan-26     10:04                projects
-a----         20-Jan-26      9:47           6148 .DS_Store
-a----         20-Jan-26      9:47            314 .editorconfig
-a----         20-Jan-26      9:47            587 .gitignore
-a----         20-Jan-26      9:47           1403 angular.json
-a----         20-Jan-26      9:47            333 jest.config.ts
-a----         20-Jan-26      9:47         834985 package-lock.json
-a----         20-Jan-26      9:47           1436 package.json
-a----         20-Jan-26      9:47           2426 README.md
-a----         20-Jan-26      9:47            214 test-setup.ts
-a----         20-Jan-26      9:47            711 tsconfig.json


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

Projects Folder:

Bash
/c/Projects/Devkit/my-lib/projects/my-lib (dev)
$ ls
d-----         20-Jan-26      9:47                src
-a----         20-Jan-26      9:47            227 ng-package.json
-a----         20-Jan-26      9:47            212 package.json
-a----         20-Jan-26      9:47           1445 README.md
-a----         20-Jan-26      9:47            475 tsconfig.lib.json
-a----         20-Jan-26      9:47            401 tsconfig.lib.prod.json
-a----         20-Jan-26      9:47            434 tsconfig.spec.json

Forms:

Bash
/c/Projects/Devkit/my-lib/projects/my-lib/src/lib (dev)
$ ls
d-----         20-Jan-26      9:47                my-form
d-----         20-Jan-26      9:47                my-second-form
-a----         20-Jan-26      9:47            600 my-lib.component.spec.ts
-a----         20-Jan-26      9:47            208 my-lib.component.ts
-a----         20-Jan-26      9:47            363 my-lib.service.spec.ts
-a----         20-Jan-26      9:47            136 my-lib.service.ts


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.

Projects Folder:

Bash
/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.

@PASForm Decorator:

TypeScript
@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.

Building the Library

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

Command

Description

xlib build

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

Refer to Administrating Libraries for detailed information on how to upload libraries. The usage of libraries is explained in detail on Adding Libraries and in chapter Developing and Using Libraries.

Testing and Developing Your Form Component

To test your project you can use Storybook for Angular. From the root folder of your workspace, run

Bash
npm run ng -- run <library name>:storybook

e.g. npm run ng -- run my-lib:storybook

This will automatically open Storybook on port 9009, and then redirect to http://localhost:9009/?path=/docs/<form name>--docs.

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.
Bash
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.
TypeScript
"allowedNonPeerDependencies":[
   "@pas/xuml-library-devkit",
   "ng2-pdf-viewer"]

Related Content

📗

Related Pages:

📘

Related Documentation:

⬇️

Downloads:

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

  • test-libs.zip

  • The project has been created by an xlib new command.

  • Just perform an npm install to install the dependencies.