Versions Compared

Old Version 4

changes.mady.by.user Annegret Bernhardt

Saved on

compared with

New Version 5

changes.mady.by.user Simon Wack

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from space WDESIGNER and version 23.1
Multiexcerpt
MultiExcerptNameintroduction
shouldDisplayInlineCommentsInIncludesfalse

The compiler generates an Angular application for all Designer services, and deploys it as a part of the service repository. You can download the uncompiled Angular resources generated by the Designer, and use them as a starting point for Pro-Code application development. Once you have finished your modified Angular app, you can update your Designer project to use your code instead of the generated Angular code.

  1. Download the Angular resources.
  2. Apply your changes.
  3. Update your Designer service.
Note

Please note: The Designer does not recognize changed Angular apps and generates new Angular code. Once you have changed your process in the Designer, you need to merge your changes into the newly generated Angular code.

Tip
titleExpert Advice

Use Git to track your changes and for easy merging.

Prerequisites

Info

Developing Pro-Code applications for the Scheer PAS platform assumes an intermediate-level knowledge of HTML, CSS, JavaScript, and the Angular framework. If you are completely new to frontend development, we recommended to comprehend some fundamentals before continuing with Pro-Code development.

Tip

Useful tutorials are:

Tool Recommendations

You can use different tools for Pro-Code development. Our PAS developers recommend the following:

NameDescriptionFurther Information
Angular

As you will start with Angular development, you need to install Angular and its dependencies.

Visual Studio CodeOur developers recommend Visual Studio Code as a development environment.
GitTo version your project, we recommend to use Git.

Downloading the Angular Resources

Download the uncompiled Angular resources that have been generated by the Designer, and use them as a starting point for Pro-Code application development. To get these resources, do the following:

Open your service in the PAS Designer.

Go to the Controls panel, open the menu and select option Application from section Export > Pro Code to download the project resources.

Tip

Go to Controls Panel for detailed information about the panel's functionalities.

The Angular app project is then downloaded as a ZIP file.


Applying Changes

Now, extract the zipped resources to a folder, and open the folder as an Angular project in your favorite IDE, for example Visual Studio Code.

Expand the projects folder to see the libraries and the main angular project that was generated for the pas-designer-service.

The project contains the following different library types:

File/FolderDescription
src/app/main.tsContains the executable Angular application code. This is the application entry point of the main application.
src/app/formsContains the Angular application code for forms, one file for each form.
src/app/processContains the Angular application code for the BPMN processes, one subfolder for each process.
src/app/process/<name>/tasks
Contains the Angular application code for the user tasks that have been defined to the Designer process, one subfolder for each task.


Tip

A good starting point to get familiar with the project is the file Readme.md . You can find it in the root directory of the project.



The README.md file describes how to configure the local project so that you can use it in combination with your Scheer PAS system.

Info

The @pas modules are provided by our internal registry and are available for the generated applications.

Once you have your changes applied, you can built and start the Angular application using the following command:

Code Block
npm run start:procode

Updating the Service

Once you have applied your changes to the Angular applications, you can merge the changed application back into the xUML service, and deploy the service to the integration component (Bridge) of the PAS platform.

When you build the application as described above, a dist directory is compiled to the project folder. This folder needs to be copied into the xUML service repository.

  1. So, switch to the Designer and export the repository of the Designer service. To do that, select option Service from menu section Export > Compiled of the Controls panel.

  2. Unzip the exported repository.
  3. The repository contains a folder htdocs. Replace the contents of this folder with the contents of the dist folder of your Angular project.
  4. Zip the repository back to its old name.

  5. Click Open BridgeAdministration (Image Modified) from the the Deployment Controls panel to switch to the integration component (Bridge) and deploy the service repository. How to deploy an xUML service is described on Deployment of xUML Services.
    You can also deploy the service locally using

    Code Block
    npm run build:all

Internationalization: Translations for Forms

Often you want to use a form or an application in different countries and therefore you want to adapt the language. Pro-Code developers can define the languages they want to use and add new languages.

The exported application contains already two translation files for Geman (de.json) and English (en.json). The files contain keys for each form element's translated attributes such as label, placeholders, defaults etc.

You can find them in the export folder under  -main project src/assets/i18n

Otp
Floatingfalse
maxHLevel2

Rp

...