Versions Compared

Key

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

The Designer provides you with two ways to enhance Designer services with custom implementations:

Info

Developing Pro-Code applications for the Scheer PAS platform requires intermediate level knowledge of HTML, CSS, JavaScript and the Angular framework.

Panel
titleRelated Pages:

Children Display

Prerequisites for Pro-Code Development

Info

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

Useful tutorials:

Tool Recommendations

You can use different tools for pro-code development, here are some recommendations from our PAS developers:

NameDescriptionFurther InformationAngular

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

When you develop a low-code application within PAS Designer, you can download the uncompiled Angular resources generated by the Designer. These resources are the starting point for pro-code application development. To get the resources, do the following:

Image Removed

Open your service in the PAS Designer.

Image Removed

Go to the Controls panel, open the menu and select option Application from section Export 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. The zip folder contains a folder project. Open this folder to get access to further files for Services, Models, and Forms, to further develop the existing version.

Image Removed

After extracting the resources, open the project in your IDE, for example Visual Studio Code. If you expand the projects folder, you can see the libraries and the main angular project that was generated for the pas-designer-service.

Libraries that are called with the following suffixes:

  • (...)-form: contain the Angular application code for each form.
  • (...)-main: contain the Angular application code that can be run. This is the application entry point of the main application.
  • (...)-task: contain the Angular application code for each user task.
  • (...)-process: contain the Angular application code for the BPMN process.
Tip

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

Image Removed

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

Update Project in PAS Designer

Once you have finished to develop the application in pro-code, the application project will be deployed in the same environment as the xUML service: In the integration component (Bridge) of the PAS platform.

Info

The node modules do not require manual configuration and installation in package.json. Once the exported application is compiled, the @pas dependencies will be installed and implemented from the projects’ package registry at .npmrc.

When you have developed components in the Angular project, the application can be built and compiled with the command

Code Block
npm run build:all

You can then deploy the application to the server. When you build and deploy the application, a dist directory is compiled.

Image Removed

  • Go back to the Controls panel in your service, open the menu and select option Respository from section Export.
  • In the exported repository, replace the contents of the htdocs folder with the compiled dist folders’ contents from your pro-code project application.

Image Removed

  • Use option Open Bridge Image Removed in the controls panel to open the PAS integration component.
  • In the sidebar on the left select menu option Deployment from section Domain.
  • On the right side, use the Choose File button to select your modified .rep file.
  • Click Upload to proceed with uploading the repository and setting the deployment options.