Page History
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.
| 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 | ||
|---|---|---|
| ||
Use Git to track your changes and for easy merging. |
Prerequisites
Prerequisites for Pro-Code Development| 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 the some fundamentals of frontend development before continuing with pro-code development. |
| Tip |
|---|
Useful tutorials are: |
Tool Recommendations
You can use different tools for pro-code development, here are some recommendations from our . Our PAS developers recommend the following:
| Name | Description | Further Information |
|---|---|---|
| Angular | As you will start with Angular development, you need to install Angular and its dependencies. | |
| Visual Studio Code | Our developers recommend Visual Studio Code as a development environment. | |
| Git | To 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 Download the uncompiled Angular resources that have been generated by the Designer. These resources are the , and use them as a starting point for pro-code application development. To get the 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 to download the project resources.
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. | 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 If you expand the projects folder , you can to see the libraries and the main angular project that was generated for the pas-designer-service. Libraries that are called with The project contains the following suffixes: different library types:
| |||||||||||||||||
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 |
@pas modules are provided by our internal registry and are available for the generated applications. |
Once you have your changes applied, you can built the Angular application using the following command:
| Code Block |
|---|
npm start |
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 aboveYou can then deploy the application to the server. When you build and deploy the application, a dist directory is compiled .
- 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.
to the project folder. This folder needs to be copied into the xUML service repository.
So, switch to the Designer and export the repository of the Designer service. To do that, select option Repository from the Export menu of the Controls panel.
- Unzip the exported repository.
- The repository contains a folder htdocs. Replace the contents of this folder with the contents of the dist folder of your Angular project.
- Zip the repository back to its old name.
Click Open Bridge (
) from the Controls panel to switch to the integration platform (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 usingCode Block npm run build:all
| Otp | ||||
|---|---|---|---|---|
|
| Rp |
|---|
Overview
Content Tools