updating structure with proper file names (#422)
* updating structure with proper file names * fixing build issues * build issues * fixing build errors * Adding support section * a little less noise on the index page - maybe we look into adding some intro content here. --------- Co-authored-by: danfunk <daniel.h.funk@gmail.com>
|
@ -43,13 +43,13 @@ ways to present content in different scenarios.
|
|||
|
||||
### Display Content Process Overview:
|
||||
|
||||
![Image](Images/Display_Content.png)
|
||||
![Image](images/Display_Content.png)
|
||||
|
||||
Here is a summary of the process:
|
||||
|
||||
1. **Start Event and Introduction Manual Task**
|
||||
|
||||
![Image](Images/Introduction_manual.png)
|
||||
![Image](images/Introduction_manual.png)
|
||||
|
||||
The process begins with a Start Event, signaling the start of the
|
||||
workflow.
|
||||
|
@ -58,7 +58,7 @@ It is followed by a Manual Task called "Introduction" that displays a
|
|||
welcome message or instructions for the users. The content to be
|
||||
displayed is specified in the task's properties panel.
|
||||
|
||||
![Image](Images/Manu_instructions_panel.png)
|
||||
![Image](images/Manu_instructions_panel.png)
|
||||
|
||||
2. **User Task with Form**
|
||||
|
||||
|
@ -70,7 +70,7 @@ The instructions panel of the User Task guides users to fill out the
|
|||
form, indicating that the entered values will be shown in the
|
||||
subsequent Manual Task.
|
||||
|
||||
![Image](Images/User_instructions.png)
|
||||
![Image](images/User_instructions.png)
|
||||
|
||||
3. **Script Tasks**
|
||||
|
||||
|
@ -83,11 +83,11 @@ focuses on making the colors more playful.
|
|||
Script Task 3 includes a delay with the code "time.sleep(2)" and aims
|
||||
to increase the silliness level.
|
||||
|
||||
![Image](Images/Script_instructions.png)
|
||||
![Image](images/Script_instructions.png)
|
||||
|
||||
4. **Manual Task to Display Content**
|
||||
|
||||
![Image](Images/Manual_instructions.png)
|
||||
![Image](images/Manual_instructions.png)
|
||||
|
||||
A Manual Task will display content based on the collected data
|
||||
and script-generated information. The instructions panel of the Manual
|
||||
|
@ -96,11 +96,11 @@ data entered by the user.
|
|||
It also offers an optional Chuck Norris joke based on user preference
|
||||
and a table of silly color names generated using Jinja templating.
|
||||
|
||||
![Image](Images/Manual_instructionss.png)
|
||||
![Image](images/Manual_instructionss.png)
|
||||
|
||||
5. **End Event**
|
||||
|
||||
![Image](Images/End.png)
|
||||
![Image](images/End1.png)
|
||||
|
||||
The process concludes with an End Event, indicating the end of the
|
||||
workflow.
|
||||
|
@ -108,4 +108,4 @@ The instructions panel of the End Event suggests next steps, such as
|
|||
exploring the diagram in edit mode and completing the "Request a
|
||||
Playground" task.
|
||||
|
||||
![Image](Images/end_message.png)
|
||||
![Image](images/end_message.png)
|
|
@ -28,7 +28,7 @@ Schema as its basis. It enables you to create dynamic and interactive
|
|||
forms with ease. The RJSF library is open source, free to use, and
|
||||
follows the principles of open standards.
|
||||
|
||||
![Image](Images/Form_json.png)
|
||||
![Image](images/Form_json.png)
|
||||
|
||||
Please note that while this guide provides a basic understanding of
|
||||
JSON Schema and RJSF, there is much more to explore. We encourage you
|
||||
|
@ -50,7 +50,7 @@ While the form builder provides convenience and simplicity, using the
|
|||
JSON editor offers greater flexibility and control over the form
|
||||
structure.
|
||||
|
||||
![Image](Images/Form-Builder.png)
|
||||
![Image](images/Form-Builder.png)
|
||||
|
||||
|
||||
## Basic Example for Using Forms
|
||||
|
@ -61,12 +61,12 @@ Lets cover the example of using forms process model in the basics.
|
|||
The BPMN diagram initiates with a start event, which is followed by a
|
||||
manual task aimed at providing a comprehensive understanding of web
|
||||
forms and the various approaches to displaying them.
|
||||
![Image](Images/Form_manual_editor.png)
|
||||
![Image](images/Form_manual_editor.png)
|
||||
|
||||
The expected output of the form during the process execution can be
|
||||
observed in the attached image.
|
||||
|
||||
![Image](Images/manual_outpul.png)
|
||||
![Image](images/manual_outpul.png)
|
||||
|
||||
Moving forward, the diagram incorporates a user task specifically
|
||||
designed for form display. Within the properties panel of the user
|
||||
|
@ -74,19 +74,19 @@ task, two essential files are included: a JSON Schema (containing the
|
|||
form description in RSJF format) and a UI Schema (outlining the rules
|
||||
for displaying the form based on the RSJF schema).
|
||||
|
||||
![Image](Images/BPMN_Form_display.png)
|
||||
![Image](images/BPMN_Form_display.png)
|
||||
|
||||
The anticipated output of the form when the process is executed can be
|
||||
visualized in the attached image.
|
||||
![Image](Images/Form_display.png)
|
||||
![Image](images/Form_display.png)
|
||||
|
||||
|
||||
Following that, a manual task is included, offering a simple form
|
||||
explanation. As users submit the form, the manual task will display
|
||||
the respective explanation.
|
||||
![Image](Images/Manual_lasttt.png)
|
||||
![Image](images/Manual_lasttt.png)
|
||||
|
||||
An attached image provides an overview of the expected form output
|
||||
during the process execution.
|
||||
|
||||
![Image](Images/Manual_last.png)
|
||||
![Image](images/Manual_last.png)
|
|
@ -13,7 +13,7 @@ The process begins with a Start Event, followed by a User Task named "Form." Use
|
|||
|
||||
In the Script Task, we have created a script that collects three variables from the form and calculates a score based on certain conditions. The score is then stored in the "score" variable. Lets delve into how we configured the script tasks:
|
||||
|
||||
![Script_Task](Images/Script_task_example.png)
|
||||
![Script_Task](images/Script_task_example.png)
|
||||
|
||||
**Step 1**: With the script task selected, you will notice the properties tab.
|
||||
|
||||
|
@ -60,7 +60,7 @@ Now we have a configured our script task with a script and unit tests.
|
|||
|
||||
After the Script Task, we have a Manual Task with a pre-script and instructions to display the score.
|
||||
|
||||
![Script_Task](Images/Pre-post_scripts.png)
|
||||
![Script_Task](images/Pre-post_scripts.png)
|
||||
|
||||
- **Prescript** is added as an example, While you can have tasks that are dedicated scripts, it can become a bit noisy, and we want our diagrams to convey a clear sense of the business logic and rules. For this reason it is also possible to add scripts to all Task types - using Pre and Post Scripts. This manual task contains a pre-script that also calculated PI using the Leibniz’s formula. Here is the pre-script:
|
||||
|
|
@ -3,7 +3,7 @@ Sartography (the company developing SpiffWorkflow and SpiffArena) is providing u
|
|||
|
||||
## How to Login to SpiffArena
|
||||
|
||||
```{image} ./Images/Login.png
|
||||
```{image} ./images/Login.png
|
||||
:alt: Login Screen
|
||||
:class: bg-primary mb-1
|
||||
:width: 230px
|
||||
|
@ -193,53 +193,53 @@ Clicking on the process name will open the directory dedicated to the Essential
|
|||
|
||||
**BPMN editor** : The BPMN editor is a primary file that runs the engine. In the minimal example, we learned that it allows you to visually design and represent business processes using the Business Process Model and Notation (BPMN) standard.
|
||||
|
||||
![image](Images/BPMN_Editor.png)
|
||||
![image](images/BPMN_Editor.png)
|
||||
|
||||
**DMN table**: A file that defines decision-making logic using the Decision Model and Notation (DMN) standard, enabling you to model complex decision rules and outcomes.
|
||||
|
||||
![Image](Images/DMN_table.png)
|
||||
![Image](images/DMN_table.png)
|
||||
|
||||
Here's what a DMN table looks like:
|
||||
|
||||
![Image](Images/DMN_Properties_Table.png)
|
||||
![Image](images/DMN_Properties_Table.png)
|
||||
|
||||
**JSON Schema**: A file that describes the structure, format, and validation rules for data in JSON format, ensuring data integrity and interoperability.
|
||||
![Image](Images/JSONSchema.png)
|
||||
![Image](images/JSONSchema.png)
|
||||
|
||||
**UI Schema**: A file that defines the layout, structure, and behavior of user interfaces, facilitating the development of intuitive and interactive user experiences.
|
||||
![Image](Images/UI-Schema.png)
|
||||
![Image](images/UI-Schema.png)
|
||||
|
||||
#### **Process Workflow**
|
||||
In this BPMN diagram example, the process is outlined step by step: The process initiates with a start event, serving as the entry point for the workflow.
|
||||
|
||||
Following the start event, a manual task named "Introduction" is incorporated, responsible for displaying a welcoming message to the user.
|
||||
|
||||
![](Images/Manual_EM.png)
|
||||
![](images/Manual_EM.png)
|
||||
|
||||
Next, a **User task** named "Display Questions"is added, facilitating the collection of information from real individuals through web forms. In the properties section, a JSON form is created to specify the questions for the users to respond to.
|
||||
|
||||
![](Images/User_EM.png)
|
||||
![](images/User_EM.png)
|
||||
|
||||
Once the user completes the form, the gathered data is passed on to a **script task** named "Modify Information", responsible for calculating the data score. The script for this calculation is embedded in the properties section.
|
||||
|
||||
![](Images/Script_Em.png)
|
||||
![](images/Script_Em.png)
|
||||
|
||||
As an alternative approach, the data score can also be determined using a **DMN table** named "Determine Score Message". Decision tables offer an effective means of defining business rules in an easily comprehensible format. The DMN table calculates the score based on pre-defined rules.
|
||||
|
||||
![](Images/DMN_EM.png)
|
||||
![](images/DMN_EM.png)
|
||||
|
||||
After the score calculation, an **exclusive gateway** is employed to make decisions based on the determined score. Three manual tasks are defined, each displaying a different message based on the obtained score:
|
||||
|
||||
![](Images/Exclusive_Em.png)
|
||||
![](images/Exclusive_Em.png)
|
||||
|
||||
a. **Worst Possible Response**: If the score indicates the worst possible response, a manual task displays a message stating that it is completely wrong.
|
||||
|
||||
|
||||
b. **At Least One Correct Response**: If the score indicates that at least one response was correct, a manual task displays a message acknowledging the correct response.
|
||||
|
||||
c. **Perfect Score**: If the score indicates a perfect score, a manual task displays a message recognizing the excellent performance.
|
||||
|
||||
Once the score messages are displayed, a **signal event** is included, providing users with the option to continue and conclude the process or choose to repeat the process from the beginning. Signal events enable external forces or internal errors to interact with the process, and in this scenario, a button press allows for the interruption of the diagram's normal course.
|
||||
|
||||
![](Images/Signal_EM.png)
|
||||
![](images/Signal_EM.png)
|
||||
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
When starting to model a business process, it can indeed be a challenging task, especially when multiple departments and users are involved. Here are some helpful tips to guide you through the process and create effective process models:
|
||||
|
||||
**Understand BPMN Symbols:**
|
||||
Begin by thoroughly understanding the meaning and usage of each BPMN symbol. This will ensure that you use the symbols correctly to represent the various elements of your business process. Refer to the [Learn Basics](../learn_basics/bpmn_terminology.md) section to learn more about each symbol.
|
||||
Begin by thoroughly understanding the meaning and usage of each BPMN symbol. This will ensure that you use the symbols correctly to represent the various elements of your business process. Refer to the [Learn Basics](../appendices/bpmn_terminology.md) section to learn more about each symbol.
|
||||
|
||||
Grouping it together can create a mindmap thats easy to remember.
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
Before Width: | Height: | Size: 305 B After Width: | Height: | Size: 305 B |
Before Width: | Height: | Size: 451 B After Width: | Height: | Size: 451 B |
Before Width: | Height: | Size: 235 B After Width: | Height: | Size: 235 B |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 676 B After Width: | Height: | Size: 676 B |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 61 KiB |
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 421 KiB After Width: | Height: | Size: 421 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 965 B After Width: | Height: | Size: 965 B |
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 1003 B After Width: | Height: | Size: 1003 B |