Path: C:/inetpub/wwwroot/user/pages/03.guides/11.genio-web/11.Genio-web-development/02.genioweb-forms/default.md
Failed to read C:/inetpub/wwwroot/user/pages/03.guides/11.genio-web/11.Genio-web-development/02.genioweb-forms/default.md: Unable to parse at line 2 (near "<<<<<<< HEAD").
---
title: 'GenioWeb - Forms'
<<<<<<< HEAD
media_order: 'Screenshot 2023-06-16 130128.png,Screenshot 2023-06-16 143258.png,GenioWeb Mainpage - Forms edit.png,Screenshot 2023-06-16 144325.png,GenioWeb Mainpage - Forms editor location.png,Screenshot 2023-06-16 154542.png,form-addcomponents-genioweb.png,form-identification-genioweb.png,search-components-forms-genioweb.png,forms-menu-genioweb.png,access-forms-genioweb.png,insertform-moretab-genioweb.png,form-component-coordinate.png,globallist-mainpage-genioweb.png'
---
---
## Contents
- [Accessing Forms Page](#accessing-forms-page)
- [Adding a New Form](#accessing-forms-page)
- [Form Editor](#form-editor)
- [Global list](#global-list)
---
## Accessing Forms Page
### Forms Menu
In the Forms section of GenioWeb, developers can configure the data display and user interaction for their solutions. Forms play a crucial role in shaping the user experience by enabling access, data insertion, and collection.
**1.** After creating tables you can go to forms page either by selecting **Forms** on top of every page or the shortcut card on the Homepage, as you can see in [Figure 1](#).
###### 
*Figure 1: Select forms from GenioWeb Homepage.*
**2.** After doing that you will get on the page showed in [Figure 2](#-1). On the forms page, you can create a new form or edit/delete existing ones if needed.
###### 
*Figure 2: Main page of Forms Section on GenioWeb.*
As you can see on the menu that comes from the arrow near "Forms" in [Figure 2](#-1), there are different options to visualize Forms and Forms Columns:
- Forms;
- Search forms;
- Search components;
- Columns in Lists;
- Mandatory forms.
In [Figure 3](#-2) it's possible to see part of the Search components view of Forms menu, showing how you can configurate what you can view (on Table configuration popup).
###### 
*Figure 3: Search components of Forms on GenioWeb.*
---
## Adding a New Form
To create a new form, click the **+Insert** button in the forms main page (see [Figure 2](#-1)) and it will open the form insertion on identification tab, as you can see in [Figure 4](#-3).
###### 
*Figure 4: Form identification tab on GenioWeb.*
#### 1. Identification
On identification tab of form insertion on GenioWeb you have the following fields:
- Identifier
- Form table
- ~~Schema name~~ (read only)
- Form type
- Form tab (define the position on menu but it's read only and will only be filled in some form types)
- Display name
- Notes
##### 1.1 Identifier
In the Identifier field, define a unique name for the form in the database. The name should be limited to eight characters without spaces.
##### 1.2 Form table
Choose the table that will provide the data for the form.
##### 1.3 Form type
Define the interface behavior when the end user interacts with the form.
- **Normal:** This is a standard form layout where the fields of the table are displayed in a structured manner for the end-user.
- **For Statistics:** This form layout is designed for statistical analysis. It allows the end-user to view and analyze data trends and patterns. It may include additional fields for calculations and averages, and could possibly include charts or graphs for visual representation.
- **Record Tab:** This form layout is used to display detailed information about a single record. Each record is displayed on its own tab, allowing the user to easily navigate through individual records.
- **Subarea:** This form layout is used to display a subset of data from a larger dataset. It's often used to show related records or details that are connected to the main record.
- **Picking List:** This form layout is used to create a list of items to be picked by the end user. It may include fields such as item number, description, quantity, and location. This can be useful in inventory management or order fulfillment processes.
- **Phase/Stage:** This form layout is used to track the progress of a project or process. It may include fields such as phase, stage, task, status, and percentage complete. This is particularly useful in project management or workflow tracking.
- **Popup:** This form layout displays a small amount of information in a separate window that pops up over the main window. This can be used to show additional details or actions without navigating away from the current view.
- **Widget:** This is a small, self-contained component that can be embedded within a form. Widgets can provide additional functionality or display supplementary information. They can be used in a variety of ways.
- **Subform:** This form layout is used to display related records from a different table. It's often used to show details of a record in a main form. It allows users to view and interact with related data without leaving the context of the main record.
##### 1.4 Display name
Name that the form will have in the generated program.
It will appear in the form's top bar on the left side.
##### 1.5 Notes
The use of a field for developer comments in the development environment is essential for several reasons:
- **Communication:** It allows developers to communicate with each other about specific parts of the code, especially in a team setting where multiple people may be working on the same project.
- **Clarification:** Comments can provide clarification on complex sections of code, making it easier for others (or even the same developer at a later date) to understand what the code is doing.
- **Debugging:** They can be useful in debugging, as they can provide context and explanations for specific coding decisions that may affect how the code runs.
- **Maintenance:** Comments can make maintaining and updating the code easier, as they provide insights into why certain coding decisions were made.
> **Note:** *Ensure you **save the data** to avoid errors when adding components.*
=======
media_order: 'access-forms-genioweb.png,forms-menu-genioweb.png,GenioWeb-Mainpage-Forms-edit.png,GenioWeb-formseditorlayout.png,GenioWeb-Mainpage-Forms-editor-location.png,save-floppy-button.png,form-addcomponents-genioweb.png,form-identification-genioweb.png,search-components-forms-genioweb.png,forms-menu-genioweb.png,access-forms-genioweb.png,insertform-moretab-genioweb.png,form-component-coordinate.png,globallist-mainpage-genioweb.png'
---
---
---
## Contents
>>>>>>> genio-web-develop-menus
- [Accessing Forms Page](#accessing-forms-page)
- [Adding a New Form](#accessing-forms-page)
- [Form Editor](#form-editor)
- [Global list](#global-list)
---
---
<<<<<<< HEAD
#### 2. Components
In the **Components tab**, you can set up the elements that the end user can interact with in the form. You can add components from the table by clicking the **+Add components** button, which automatically configures the components based on the table data, as shown in [Figure 5](#-4).
###### 
=======
## Accessing Forms Page
### Forms Menu
In the Forms section of GenioWeb, developers can configure the data display and user interaction for their solutions. Forms play a crucial role in shaping the user experience by enabling access, data insertion, and collection.
**1.** After creating tables you can go to forms page either by selecting **Forms** on top of every page or the shortcut card on the Homepage, as you can see in [Figure 1](#).
###### 
*Figure 1: Select forms from GenioWeb Homepage.*
**2.** After doing that you will get on the page showed in [Figure 2](#-1). On the forms page, you can create a new form or edit/delete existing ones if needed.
###### 
*Figure 2: Main page of Forms Section on GenioWeb.*
As you can see on the menu that comes from the arrow near "Forms" in [Figure 2](#-1), there are different options to visualize Forms and Forms Columns:
- `Forms`;
- `Search forms`;
- `Search components`;
- `Columns in Lists`;
- `Mandatory forms`.
In [Figure 3](#-2) it's possible to see part of the Search components view of Forms menu, showing how you can configurate what you can view (on Table configuration popup).
###### 
*Figure 3: Search components of Forms on GenioWeb.*
---
## Adding a New Form
To create a new form, click the **+Insert** button in the forms main page (see [Figure 2](#-1)) and it will open the form insertion on identification tab, as you can see in [Figure 4](#-3).
###### 
*Figure 4: Form identification tab on GenioWeb.*
#### 1. Identification
On identification tab of form insertion on GenioWeb you have the following fields:
- `Identifier`
- `Form table`
- ~~Schema name~~ (read only)
- `Form type`
- Form tab (define the position on menu but it's read only and will only be filled in some form types)
- `Display name`
- `Notes`
##### 1.1 Identifier
In the Identifier field, define a unique name for the form in the database. The name should be limited to eight characters without spaces.
##### 1.2 Form table
Choose the table that will provide the data for the form.
##### 1.3 Form type
Define the interface behavior when the end user interacts with the form.
- **`Normal`:** This is a standard form layout where the fields of the table are displayed in a structured manner for the end-user.
- **`For Statistics`:** This form layout is designed for statistical analysis. It allows the end-user to view and analyze data trends and patterns. It may include additional fields for calculations and averages, and could possibly include charts or graphs for visual representation.
- **`Record Tab`:** This form layout is used to display detailed information about a single record. Each record is displayed on its own tab, allowing the user to easily navigate through individual records.
- **`Subarea`:** This form layout is used to display a subset of data from a larger dataset. It's often used to show related records or details that are connected to the main record.
- **`Picking List`:** This form layout is used to create a list of items to be picked by the end user. It may include fields such as item number, description, quantity, and location. This can be useful in inventory management or order fulfillment processes.
- **`Phase`/`Stage`:** This form layout is used to track the progress of a project or process. It may include fields such as phase, stage, task, status, and percentage complete. This is particularly useful in project management or workflow tracking.
- **`Popup`:** This form layout displays a small amount of information in a separate window that pops up over the main window. This can be used to show additional details or actions without navigating away from the current view.
- **`Widget`:** This is a small, self-contained component that can be embedded within a form. Widgets can provide additional functionality or display supplementary information. They can be used in a variety of ways.
- **`Subform`:** This form layout is used to display related records from a different table. It's often used to show details of a record in a main form. It allows users to view and interact with related data without leaving the context of the main record.
##### 1.4 Display name
Name that the form will have in the generated program.
It will appear in the form's top bar on the left side.
##### 1.5 Notes
The use of a field for developer comments in the development environment is essential for several reasons:
- **Communication:** It allows developers to communicate with each other about specific parts of the code, especially in a team setting where multiple people may be working on the same project.
- **Clarification:** Comments can provide clarification on complex sections of code, making it easier for others (or even the same developer at a later date) to understand what the code is doing.
- **Debugging:** They can be useful in debugging, as they can provide context and explanations for specific coding decisions that may affect how the code runs.
- **Maintenance:** Comments can make maintaining and updating the code easier, as they provide insights into why certain coding decisions were made.
> **Note:** *Ensure you **save the data** to avoid errors when adding components.*
#### 2. Components
In the **Components tab**, you can set up the elements that the end user can interact with in the form. You can add components from the table by clicking the **+Add components** button, which automatically configures the components based on the table data, as shown in [Figure 5](#-4).
###### 
>>>>>>> genio-web-develop-menus
*Figure 5: Add components on GenioWeb.*
You can also add additional components to the form, such as buttons to navigate to other pages or unfiltered table lists that display data from different tables. Edit and duplicate components as needed, customizing their properties.
As you can see in [Figure 6](#-5), it's possible to edit, duplicate or delete a form component using the three dots next to the component on components list.
<<<<<<< HEAD
###### 
=======
>>>>>>> genio-web-develop-menus
*Figure 6: Edit, Duplicate and Delete component from form.*
Once you've set up the desired form components, click the "Apply" button to save the data and continue editing the form, or click "Save" to finalize the form and exit.
#### 3. Conditions
In the **Conditions tab**, define user limitations based on their level or role. Access levels can be set for reading and changing the form's content, as you can see in [Figure 7](#-6). For example, you can allow public viewing but restrict editing to users with specific roles.
<<<<<<< HEAD
=======
>>>>>>> genio-web-develop-menus
*Figure 7: Form access levels.*
Form conditions can be used to communicate special requirements to the end user. Set up condition types, define messages to be displayed when conditions are triggered, and create custom rules using the Formula editor.
> For more detailed information on setting conditions in forms, refer to the [Table Conditions](http://jenkinsvm/geniodoc/guides/genio-web/genio-web-development/tables#c-business-rules-tab) article in the online support documentation.
#### 4. More
As is possible to see in [Figure 8](#-7), the tab called "More" of inserting a new form has the following options:
<<<<<<< HEAD
- Other features,
- Document number,
- Navigation,
- Extra options, and a collapsible zone called
- Coordinates.
*Figure 8: More tab of inserting form on GenioWeb.*
On **Other features** there are 5 checkboxes saying:
- "Save without leaving";
- "Finished Form" (Check if the Form is completed and it is not necessary to change anything);
- "Manual Form" (If the form fields are positioned manually);
- "Partial Form" (Makes it unnecessary to put all the mandatory fields of the Table on the Form. Not all mandatory fields in the form table have to be included in the form);
- "Same Form" (If the form is the same as the table it belongs to).
In [Figure 9](#-8) it's possible to see a partial view of the Coordinates collapsible zone and the form to insert component coordinate directly when pressed **+Insert** on form coordinates.
*Figure 8: Form component coordinate insertion on GenioWeb.*
=======
- `Other features`,
- `Document number`,
- `Navigation`,
- `Extra options`, and a collapsible zone called
- `Coordinates`.
*Figure 8: More tab of inserting form on GenioWeb.*
On **Other features** there are 5 checkboxes saying:
- `Save without leaving`;
- `Finished Form` (Check if the Form is completed and it is not necessary to change anything);
- `Manual Form` (If the form fields are positioned manually);
- `Partial Form` (Makes it unnecessary to put all the mandatory fields of the Table on the Form. Not all mandatory fields in the form table have to be included in the form);
- `Same Form` (If the form is the same as the table it belongs to).
In [Figure 9](#-8) it's possible to see a partial view of the Coordinates collapsible zone and the form to insert component coordinate directly when pressed **+Insert** on form coordinates.
*Figure 9: Form component coordinate insertion on GenioWeb.*
>>>>>>> genio-web-develop-menus
In this form coordinates it's possible to set some characteristics of how the field will appear to users on Coordinate section, but a easier approach to configure this is using the Form Editor, as you will be able to see next.
---
### Form Editor
The Form Editor allows you to fine-tune the layout, positioning, and size of form components.
As you can see in [Figure 10](#-9), it's possible to access the editor by either selecting the button on the desired form component and select the "Form Editor" button, or through the buttons available both on top and bottom of the form component editor page.
<<<<<<< HEAD
*Figure 9: Form access levels.*
=======
*Figure 10: Form access levels.*
>>>>>>> genio-web-develop-menus
In [Figure 11](#-10) it's a print of GenioWeb Form Editor. As you can see, on the left panel, theremodify component properties such as order position, grouping, character limits, label names, and alignment. The visual representation on the right panel allows you to drag and drop components for precise positioning.
<<<<<<< HEAD
*Figure 10: Form access levels.*
Remember to save your changes by clicking the "**Save**" button that has the symbol
.
---
## Global list
On Forms menu it's also possible to go to global lists main page and then insert new global lists to use across the system as you can see in [Figure 11](#-10).
*Figure 11: Main page showing global lists on GenioWeb.*
=======
*Figure 11: Forms Editor Layout (at left, properities and elements tree; at right, preview of form layout).*
Remember to save your changes by clicking the "**Save**" button that has the symbol
.
---
## Global list
On Forms menu it's also possible to go to global lists main page and then insert new global lists to use across the system as you can see in [Figure 12](#-11).
*Figure 12: Main page showing global lists on GenioWeb.*
---
## Conclusion
Well done on mastering the Form creation in GenioWeb! You're now adept at shaping data displays, enhancing user interactions, and setting precise conditions for your forms.
The Form Editor empowers you with the tools to meticulously craft the layout, positioning, and dimensions of components, ensuring a sleek and intuitive user interface. Harness its customization capabilities to tailor your forms seamlessly to your project's needs.
Next on our journey: diving into Menus!
>>>>>>> genio-web-develop-menus
---
## Conclusion
Well done on mastering the Form creation in GenioWeb! You're now adept at shaping data displays, enhancing user interactions, and setting precise conditions for your forms.
The Form Editor empowers you with the tools to meticulously craft the layout, positioning, and dimensions of components, ensuring a sleek and intuitive user interface. Harness its customization capabilities to tailor your forms seamlessly to your project's needs.
Next on our journey: diving into Menus!