Create and Manage Processes page

Author: iaktern

content/reference/script-task-api.mdx

@@ -579,6 +579,27 @@ TODO
 **Example Code**
 
 ```js
+console.info("Server öffnen");
+
+/* let { req, res } = networkServer.getAsync('hallo-test');
+console.info(JSON.stringify(req, null, 2));
+console.info(JSON.stringify(res, null, 2));
+res.send('Hello KAAAAAIIII');
+console.info("Request beantwortet");
+ */
+
+console.info(networkServer.getProcessInstanceListeningPath());
+console.info(networkServer.path())
+
+networkServer.getAsync('hallo-test').then(({ req, res }) => {
+    console.info("Server geöffnet in Then()");
+    console.info(JSON.stringify(req, null, 2));
+    console.info(JSON.stringify(res, null, 2));
+    res.send('Hello PROCEED User');
+});
+
+console.info("Server geöffnet");
+
 ```
 
 ### Trigger Events

content/user-guide/process-editor/_meta.ts

@@ -1,8 +1,7 @@
 import type { MetaRecord } from 'nextra';
 
 const meta: MetaRecord = {
-  'process-editor-manage': 'Create, Manage, Delete',
-  'process-export-import': 'Import and Export',
+  'process-editor-manage': 'Create and Manage Processes',
   'process-editor': 'Process Editor',
   'process-property-panel': 'Property Panel',
   'process-subprocesses': 'Subprocesses',

content/user-guide/process-editor/index.mdx

@@ -2,6 +2,10 @@
 asIndexPage: true
 ---
 
-- The _Process Editor_ view in PROCEED allows to create, manage, delete and release processes.
-- The usage is similar to the _Process List_ (TODO Link) and documented there. Some more options exist for editing processes
-- TODO: Show screenshot of Process List with some processes and folders
+# Creating Processes in the Process Editor
+
+The _Process Editor_ view in PROCEED allows you to create, manage, delete, and release business processes. 
+It is intended for process owners and designers.
+In contrast, the read-only [_Process List_](process-list) view is intended for regular employees who need to understand, interact with, or execute existing business processes.
+
+![Process Editor Overview with one BPMN process](/images/user-guide/process-editor/process-editor-overview.png)

content/user-guide/process-editor/process-editor-manage.mdx

@@ -1,34 +1,39 @@
-Basically, there are 2 possible ways to create a process.
-The user can _add_ a new process or [_import_ an existing process](process-export-import).
+# Create, Manage, and Delete Processes
 
-## Add a new Process
+When opening the _Process Editor_ view, you see an table. Here, you can create Folders and Process for your company space. The following screenshot shows the available menu options if you select, hover, or right-click a table row: 
 
-By clicking on the _Add_ button at the top right in the "Process Overview" page a creation window will be opened.
-There, a process name is required.
-You can choose every name for your process up to a maximum of 50 characters.
-Optionally, you can add a description to the process or link multiple departments with the process.
-After adding a name it will be possible to press the _Add Process_ button to create a new process.
+![Process Editor table: overview with all options](/images/user-guide/process-editor/editor-table-overview.png)
 
-![Process-Creation](/images/user-guide/process-creation/AddProcessModal.png?width=700px&classes=border)
+## Add a new Process or Folder
 
-## Organize the Processes in a List
+By right-clicking in the table or by clicking on the _Create Process_ button at the top left, you can add a new process and a window will open.
+There, a process _Name_ is required.
+Optionally, you can add a _ID_ and _Description_. 
+After adding a Name it will be possible to press the _Create_ button to create a new process.
 
-The "Process Overview" page gives you two ways to view the existing processes.
-You can decide which one you prefer.
-By clicking on the _list_ icon at the top left next to 'Processes', the datatable view will open.
+![Process Editor table: window for creating a new process](/images/user-guide/process-editor/editor-table-creation-modal.png)
 
-There, you are able to star your favorite process, search for processes with the search bar, mark one or multiple processes and select actions, like export or delete.
-Furthermore, you can sort the processes by column attributes, like favorites or name, just by clicking on the table header columns.
-By clicking on a process in the table view the process will expand and show some more detailed information about the process, like a preview, some meta information and action buttons.
-By hovering and clicking over the preview you can open the process in the editor.
+This is similar to adding new Folders: you can either right-click or use the three dot drop-down button in the top left.
 
-![DataTable-View](/images/user-guide/process-creation/Process-DataTable-View.png?width=1000px&classes=border)
+## Importing existing Processes
 
-## Organize the Processes in a Card View
+You can also import existing processes from your local hard drive by right-clicking or with the _Import_ button.
+After selecting the process file, a window shows the process meta information that can be changed for import.
 
-By clicking on the _card_ icon at the top (next to the list icon), the process card view will open.
-Here, you have the same options as in the datatable view.
-You can star, search, mark processes, select actions, and expand the process to open it or get further information.
-Moreover, by clicking on the favorite button under the search bar, the favorite processes are shown.
+![Process Editor table: window for importing an existing process](/images/user-guide/process-editor/editor-table-import-modal.png)
 
-![ProcessCard-View](/images/user-guide/process-creation/Process-Card-View.png?width=1000px&classes=border)
+## Organize Processes
+
+Like the _Process List_ view, the _Process Editor_ page gives you two ways to view your folders and processes: as a table with rows or as cards.
+This can be changed by clicking on the two icons at the top right.
+
+![Process Editor table: window for importing an existing process](/images/user-guide/process-editor/editor-table-card-view.png)
+
+The table view is more versatile.
+There, you can mark your favorite processes with a star, filter processes using the search bar, or sort processes by columns.
+You can also select one or more processes in the left column, right-click or hover your mouse over a row. 
+New icons will then appear at the top and right of the row, which you can use to _View the Process Documentation, Open the Process Editor, Change the Meta Data, Move, Release, Download_ and _Share_ processes.
+
+Clicking on a row opens the Folder or the Process Editor to design and change a process.
+
+![Process Editor table: overview with all options](/images/user-guide/process-editor/editor-table-overview.png)

content/user-guide/process-editor/process-export-import.mdx

@@ -1 +1,34 @@
-- Overview of using share and download (inside process table view and BPMN View)
+# Download and Share created Business Processes
+
+PROCEED's Management System can import and export processes.
+Importing is useful to transfer a BPMN process into the MS.
+With the Export you are able to backup the process, create pictures or generate PDFs out of it.
+
+## Download of Processes
+
+Exporting BPMN processes can be done in many formats: PDF, PNG, SVG and BPMN.
+Some additional options can be configured:
+
+- For PDF, you can export an image of the BPMN process along with or without the title.
+- For PNG, you can export the image with a default resolution or you change the resolution.
+- For BPMN, you can export only the BPMN file or you can select to also export the associated HTML files for user tasks and the referenced processes from a call activity (this creates a zip file).
+- For SVG, there are no additional options.
+
+You can export either one process or multiple processes at once.
+
+### Single Download
+
+Single export can be initiated by clicking the export button for one process inside the datatable view, the card view, or inside the BPMN editor.
+A popup will appear and the desired output format can be selected.
+After clicking on the blue _Export_ button at the bottom, a popup will appear to store the file at the desired location.
+
+![Export-Single](/images/user-guide/process-import-export/ExportProcess_Single.png?width=1000px&classes=border)
+
+### Multiple Downloads
+
+Multiple exports can be initiated by selecting multiple processes in the datatable view (via the check-boxes) or by selecting all processes in card view (with the _Select All_ button).
+At the top, the _Select Action_ button will be enabled.
+By clicking on it, you can export all selected processes.
+A ZIP file will be created containing all processes.
+
+![Export-Multiple](/images/user-guide/process-import-export/ExportProcess_multiple.png?width=1000px&classes=border)