Adding Building blocks (#381)

* Adding Building blocks

* Adding examples of building blocks

* Formatting

* Formatting images and text

* Fixing KB Comments

---------

Co-authored-by: burnettk <burnettk@users.noreply.github.com>

docs/UsingSpiffdemo/Basic_Tools.md

@@ -0,0 +1,228 @@
+# Building Blocks of the System
+These process models serve as the foundational components of our 
+system, forming the building blocks for creating powerful workflows. 
+
+It is essential to gain a thorough understanding of each process model
+on an individual level, comprehending their functionalities and
+capabilities. 
+
+Here are fundamental blocks of our system:
+
+## Displaying Content
+The Spiffarena platform offers powerful features for displaying 
+content  within your BPMN processes.
+Follow the steps below to effectively display content in your 
+processes:
+
+In this guide, we'll explore how to effectively display content in 
+Spiffarena, providing a seamless user experience and engaging 
+presentation of information. 
+
+Let's dive in and learn the key aspects of displaying content within 
+your workflows.
+
+### Markdown: Formatting Content
+Markdown is a powerful tool for formatting and styling your content in 
+Spiffarena. With Markdown, you can easily add headings, lists, tables, 
+hyperlinks, and more to enhance the readability and visual appeal of 
+your displayed content. 
+
+### Jinja Templating: Dynamic Content Generation
+
+Jinja Templating in Spiffarena empowers you to generate dynamic 
+content based on variables, conditions, and logic. By leveraging 
+Jinja's syntax and functionality, you can customize your content to 
+adapt to specific scenarios, display personalized information, or 
+perform calculations based on collected data.
+
+### Combining Markdown and Jinja: Unleashing the Power
+
+By utilizing the strengths of Markdown and Jinja, you can create rich, 
+interactive, and data-driven content that goes beyond static text.
+We'll demonstrate using an example on how to leverage Markdown and 
+Jinja together to create captivating content that responds to user 
+input and presents  dynamic information.
+
+### Basic Example for displaying content
+
+In our Spiffarena dashboard, we have a simple example of how to 
+display content in the basics section. Now, let's explore the process 
+workflow of the content display process model and discover various 
+ways to present content in different scenarios.
+
+
+#### Display Content Process Overview:
+
+![Image](Images/Display_Content.png)
+
+Here is a summary of the process:
+
+1. **Start Event and Introduction Manual Task**
+
+![Image](Images/Introduction_manual.png)
+
+The process begins with a Start Event, signaling the start of the 
+workflow.
+
+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)
+
+2. **User Task with Form**
+
+A User Task named "simple form" is included, allowing users to 
+complete a form.
+The properties panel of the User Task contains a JSON form schema, 
+defining the structure of the form.
+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)
+
+3. **Script Tasks**
+
+Three Script Tasks are incorporated into the process, each serving a 
+specific purpose.
+Script Task 1 introduces a delay using the code "time.sleep(3)" and 
+generates a dictionary of colors.
+Script Task 2 includes a delay with the code "time.sleep(1)" and 
+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)
+
+4. **Manual Task to Display Content**
+
+![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 
+Task provides the content to be displayed, which includes the form 
+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)
+
+5. **End Event**
+
+![Image](Images/End.png)
+
+The process concludes with an End Event, indicating the end of the 
+workflow.
+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)
+
+## Using Forms
+
+This feature allows you to create custom forms for collecting and 
+managing data within your workflows. Whether you need a simple 
+feedback form or a complex multi-step form, Spiffarena provides you 
+with the tools to build and integrate forms seamlessly.
+
+With Spiffarena's form builder, you can start with basic form elements 
+and gradually add more advanced components as your form requirements 
+evolve. 
+Let's dive in and explore the possibilities of creating forms in 
+Spiffarena.
+
+### Instructions on Creating Forms
+
+Forms play a crucial role in capturing data, and Spiffarena offers a 
+powerful form-building capability. Here are the ways to create forms:
+
+1. Leveraging JSON Schema
+
+JSON Schema is an emerging standard for describing the structure of 
+data in a JSON file. JSON Schema forms the foundation for building 
+forms in Spiffarena.
+
+To simplify the form creation process, we leverage the React JSON 
+Schema Form (RJSF) library. RJSF is a powerful tool that uses JSON 
+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)
+
+Please note that while this guide provides a basic understanding of 
+JSON Schema and RJSF, there is much more to explore. We encourage you 
+to refer to the official [RJSF documentation](https://rjsf-team.github.
+io/react-jsonschema-form/docs/) for comprehensive details 
+and advanced techniques.
+
+2. Using Form Builder
+
+An alternative approach to creating JSON code is to utilize the form 
+builder feature, which allows you to easily create various fields 
+without the need for writing JSON manually. 
+
+However, it's important to 
+note that the form builder may have certain limitations in terms of 
+features and may not be as powerful as using the JSON editor directly. 
+
+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)
+
+
+### Basic Example for Using Forms
+Now that you have a grasp of how to create forms in Spiffarena using 
+JSON Schema and RJSF, it's time to put your knowledge into action. 
+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)
+
+The expected output of the form during the process execution can be 
+observed in the attached image.
+
+![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 
+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)
+
+The anticipated output of the form when the process is executed can be 
+visualized in the attached image.
+![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)
+
+An attached image provides an overview of the expected form output 
+during the process execution.
+
+![Image](Images/Manual_last.png)
+
+
+## Writing Scripts 
+
+
+asdas
+## Making Decisions
+
+asda
+## Assigning Tasks
+
+asda
+## Gathering Information
+asdads

docs/index.md

@@ -6,6 +6,7 @@
 UsingSpiffdemo/Getting_Started.md
 learn_basics/learn_basics.md
 quick_start/quick_start.md
+UsingSpiffdemo/Basic_Tools.md
 ```
 
 ```{toctree}

docs/learn_basics/learn_basics.md

@@ -1,4 +1,4 @@
-# Learn the Basics
+# Understand the terminology
 
 ## BPMN and SpiffWorkflow
 
@@ -9,8 +9,8 @@ BPMN describes details of process behaviors efficiently in a diagram. The meanin
 When using SpiffWorkflow, a client can create the BPMN diagram and still have their product work without a need for you to edit the Python code, improving response and turnaround time.
 
 
-## BPMN Elements
-BPMN (Business Process Model and Notation) elements are the building blocks used to model business processes visually. They represent different aspects of a process, such as tasks, events, gateways, and flows, and are used to describe the flow of activities, decisions, and data within a process.
+## Flow Objects
+The flow objects are divided into the following three groups: Event, Gateways and Tasks.
 
 ### Events
 Events, represented with circles, describe something that happens during the course of a process. There are three main events within business process modeling: start events, intermediate events, and end events.
@@ -36,7 +36,7 @@ Tasks represent activities or work that needs to be performed as part of a proce
 
 | **Task**   | **Symbol**                                                | **Description**                                                                                                                                                                                    |
 |---------------|------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Service       |<div style="height:50px;width:50px"> ![Untitled](images/Service_task.png)       | Task that uses a Web service, an automated application, or other kinds of service in completing the task.                                                                                          |
+| Service       | ![Untitled](images/Service_task.png)       | Task that uses a Web service, an automated application, or other kinds of service in completing the task.                                                                                          |
 | Send          |![Untitled](images/Send.png)         | Task that sends a Message to another pool. The Task is completed once the Message has been sent.                                                                                                   |
 | Receive       | ![Untitled](images/Receive.png)     | A Receive Task indicates that the process has to wait  for a message to arrive in order to continue. The Task is completed once the| message has     received.                                           |
 | User          |  ![Untitled](images/User.png)       | A User Task represents that a human performer performs the Task with the use of a software application.                                                                                            |
@@ -46,7 +46,19 @@ Tasks represent activities or work that needs to be performed as part of a proce
 | Call Activity        | ![Untitled](images/Callactivity.png)        | A call activity allows you to call and invoke another process as part of this process.processes.                                                                                   |
 | Sub-Process        | ![Untitled](images/SubProcess.png)        | Sub-processes allow you to collapse and expand tasks to quickly convey information.                                                                                   |
 
-### Artifacts
+
+## Connecting Objects
+
+Connecting objects are lines that connect BPMN flow objects. There are three different types: sequence flows, message flows, and associations.
+
+| **Connecting Objects**   | **Symbol**                                                | **Description**                                                                                                                                                                                    |
+|---------------|------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| 	Sequence flow symbol       | ![Untitled](images/BPMN_sequence_flow-80x31.png)       | Connects flow objects in proper sequential order.                                                                                        |
+| Message flow symbol          |![Untitled](images/BPMN_message_flow-80x30.png)         | Represents messages from one process participant to another.                                                                                           |
+| Association symbol       | ![Untitled](images/BPMN_association-80x31.png)     | Shows relationships between artifacts and flow objects.​​                                          |
+
+
+## Artifacts
 Artifacts are used to provide additional information or documentation within a process. They include data objects (representing information or data needed for the process), annotations (providing explanatory or descriptive text), and groups (used to visually group related elements).
 | **Artifact**   | **Symbol**                                                | **Description**                                                                                                                                                                                    |
 |---------------|------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -54,3 +66,10 @@ Artifacts are used to provide additional information or documentation within a p
 | Data Storage          |![Untitled](images/Data_Storage.png)         | Data storage provides the ability to store or access data that is associated with a business model. If your process outputs any data, it will become necessary to store that data.                                                                                           |
 | Group       | <div style="height:50px;width:50px"> ![Untitled](images/Group.png)     | Groups organize tasks or processes that have significance in the overall process.​​                                          |
 | Annotation          | <div style="height:50px;width:50px"> ![Untitled](images/Annotation.png)       | Annotations allow you to describe the business process and flow objects in more detail.                                                                                            |
+
+## Swimlanes
+Swimlanes are used to organize aspects of a process in a BPMN diagram. Swimlanes visually group objects into lanes, with each aspect of the process added to a separate lane. 
+
+These elements can be arranged either horizontally or vertically. Swimlanes not only organize activities into separate categories, they can reveal delays, inefficiencies, and the workers responsible for each step in a process.
+
+![Untitled](images/BPMN_swimlane-500x197.png)  

docs/quick_start/quick_start.md

@@ -7,21 +7,9 @@
 ```
 
 
-## 🚀 Getting Started with SpiffWorkflow
+## 🚀 Getting Started with SpiffArena
 
-SpiffWorkflow is a platform that facilitates the execution of business processes. To begin using SpiffWorkflow, it is necessary to acquire the appropriate credentials and URL. 
-
-Upon receiving the credentials, here is how you can get started with SpiffWorkflow!
-
-```{image} images/Untitled.png
-:alt: Login Page
-:width: 45%
-```
-
-```{image} images/Untitled_1.png
-:alt: Home Page
-:width: 53%
-```
+Spiffarena is a platform that facilitates the execution of business processes. To begin using SpiffArena, you can create your demo account using spiffdemo as explained [here](https://spiff-arena.readthedocs.io/en/latest/UsingSpiffdemo/Getting_Started.html#how-to-login-to-spiffarena). 
 
 Here, we will provide a generic overview of each section step by step, allowing you to navigate and engage with the platform more effectively.
 
@@ -260,4 +248,4 @@ A prompt will appear, allowing you to provide a name for the identifier associat
 
 If you want to filter by ID, go to the "Find by Id" section of the page. Enter the ID and click "Submit". The system will show you the process instance with the corresponding ID.
 
-You can now view the process instances that you filtered for and take appropriate action based on their status. This can help you manage your workflows more efficiently and keep track of the progress of various process instances.
+You can now view the process instances that you filtered for and take appropriate action based on their status. This can help you manage your workflows more efficiently and keep track of the progress of various process instances.