Doc

doc/Documentation/articles/components/data_dictionary/boolean_component.md

@@ -0,0 +1,17 @@
+## Boolean Component
+
+This option will be used for values in general. There will be an explanation for every option inside *Boolean Component*.
+
+To learn how to access the *Components* field : [Overview Component ](../../components/data_dictionary/overview_component.md)
+
+It's important to change the *Data Type* field to *Boolean*
+
+#### Check Box
+
+The Check Box allows the user to check or uncheck an option, indicating a true (checked) or false (unchecked) value.
+
+![](../../../media/Component_boolean_checkbox_example.png)
+
+#### Additional Settings
+
+- **Layout**: Allows changing the appearance of the button created for *CheckBox*, *Switch*, and *Button*.

doc/Documentation/articles/components/data_dictionary/calendar_component.md

@@ -0,0 +1,37 @@
+## Calendar Component
+
+This option will be used for values in general. There will be an explanation for every option inside *Calendar Component*.
+
+It's important to change the *Data Type* field to *Date Time*
+
+To learn how to access the *Components* field : [Overview Component ](../../components/data_dictionary/overview_component.md)
+
+#### Date
+
+Allows the field to be filled with *Date* information.
+
+The format will be MM/DD/YYYY.
+
+![](../../../media/Component_calendar_date_example.png)
+
+#### Date Time
+
+Allows the field to be filled with both *Date* and *Time* information.
+
+The format will be MM/DD/YYYY HH:MM.
+
+![](../../../media/Component_calendar_datetime_example.png)
+
+#### Hour
+
+Allows the field to be filled with *Time* information.
+
+The format will be HH:MM.
+
+![](../../../media/Component_calendar_hour_example.png)
+
+#### Additional Settings
+
+- *AutoComplete*: Displays the current date when selecting the component on the edit screen.
+
+

doc/Documentation/articles/components/data_dictionary/dataitem_component.md

@@ -0,0 +1,79 @@
+## Data Item Component
+
+This option will be used for values in general. There will be an explanation for every option inside *Data Item Component*.
+
+To learn how to access the *Components* field : [Overview Component ](../../components/data_dictionary/overview_component.md)
+
+#### Combo Box
+
+This component allows multiple options for the user to choose from. The image below shows how it works.
+
+![](../../../media/component_dataitem_checkbox_example_1.png)
+
+There is a place to include the options for your Combo Box.
+
+![](../../../media/component_dataitem_checkbox_example_2.png)
+
+#### Lookup
+
+This component will allow information from another table to be selected for the current grid column.
+
+When clicking on the search field:
+
+![](../../../media/component_dataitem_lookup_example_2.png)
+
+The image below shows the **Nome da Campanha** and **Data Criação**, as they were selected during the *Lookup* component registration. It is possible to change which values are displayed. *Element Map* will be used to register the search information mentioned above. *Element Name* is used to select the existing table, and *ID* and *Description* define which information will be displayed. It is important to note that the information can be changed according to the *Type* field. More information about this field can be found at the end of the page, in *Additional Settings*.
+
+The image below illustrates the display:
+
+![](../../../media/component_dataitem_lookup_example_1.png) 
+
+#### Radio Button Group
+
+This component allows enabling a set of radio buttons that let the user select one option among them. The registered options can be configured according to the selection in the *Type* field. More information about this field can be found at the end of the page, in *Additional Settings*.
+
+![](../../../media/component_dataitem_radiobutton_example_1.png) 
+
+#### Search Box
+
+An input field that allows the user to enter search terms to find specific information. As the user types, the component can suggest matching results to facilitate the search.
+
+![](../../../media/component_dataitem_serachbox_example_1.png)
+
+#### Additional Settings
+
+- **Type**: Allows you to choose how the displayed information will be collected. Information can be selected through an *SQL Command*, manually entered by the creator, or selected from another existing dictionary via the *Element Map*.
+
+- **Grid Behavior**: Allows you to choose which information from your record will be displayed in the grid column of the data dictionary.
+
+- **First Option**: Allows you to change which option will be the first displayed in the *Combo Box*.
+
+- **Enable Multi Select**: Allows the user to select more than one value displayed in the *Combo Box*.
+
+- **Show Icon**: Allows an icon to be added next to the *Combo Box* options.
+
+- **Element Map**: Allows you to register which table and which information will be displayed when adding new information to the current dictionary. Element Name is used to select an existent table. The field ID and Description can be user to set which informations will be displayed in the grid.
+
+- **Sql Command**: A busca *Sql* também é uma das opções de busca, ela pode ser usada para retornar as informações de outro dicionário. A *Query* utilizada deve respeitar as informações selecionadas, as informações selecionadas deverão ser *Id*, *Description* e *Group*, e caso a opção Icon esteja selecioanda, as informações selecionadas deverão ser *Id*, *Description*,*Icon Id*, *Icon Color* and *Group*. A *Query* abaixo é um exemplo de busca.
+
+    ```
+    sql 
+    select 
+    1 as Id,
+    'item1' as Descri,
+    25 as Icon,
+    '#000000' as Hexa,
+    'Group1' as Groups
+
+    union all
+
+    select 
+    2 as Id,
+    'item2' as Descri,
+    40 as Icon,
+    '#000000' as Hexa,
+    'Group1' as Groups
+    ```
+
+- **Filter**: Allows you to enable the existing filter in the table selected through the *Element Map* field.
+

doc/Documentation/articles/components/data_dictionary/file_component.md

@@ -0,0 +1,39 @@
+## File Component
+
+This option will be used for values in general. There will be an explanation for every option inside *File Component*.
+
+To learn how to access the *Components* field : [Overview Component ](../../components/data_dictionary/overview_component.md)
+
+#### Uploading the File
+
+This component will be used to configure file uploads.
+
+The image below shows how the file upload option will look once configured.
+
+![](../../../media/component_file_example_1.png)
+
+Clicking on "Manage File" will open a new tab, allowing you to attach the desired file.
+
+![](../../../media/component_file_example_2.png)
+
+
+#### Additional Settings - Data File
+
+- **Folder Path**: Defines which folder the imported files will be stored in. If the variable {app.path} is used, the default application path will be applied.
+
+- **Allowed Extensions**: Allows you to choose which file extensions are accepted by the system. The extensions are: txt, csv, xlsx.
+
+- **Max File Size**: Sets the maximum allowed size for each imported file.
+
+- **Show Files in Gallery**: After clicking "Manage Files," a new upload tab will open. When the "Show Files in Gallery" option is enabled, a preview of the file will be displayed below the import area. If the option is not enabled, only file information such as *Name*, *Size*, and *Last Modified* will be shown.
+
+- **Drag and Drop**: Allows enabling file import simply by dragging the file directly to the import area.
+
+- **Allow Multiple Files**: Allows multiple files to be imported in a single entry.
+
+- **Export as Link**: This option will change the name of the attachment within the exported file when exporting through the grid.
+
+- **Allow Pasting Files**: Allows the content of the file to be pasted to perform the import, or just a part of the content. It is not necessary to insert the entire file.
+
+- **Show Upload Outside Modal**: If this option is enabled, there will be no "Manage Files" option, and the import field will be displayed alongside the information after clicking edit.
+

doc/Documentation/articles/components/data_dictionary/mask_component.md

@@ -0,0 +1,24 @@
+## Mask Component
+
+This option will be used for values in general. There will be an explanation for every option inside *Mask Component*.
+
+To learn how to access the *Components* field : [Overview Component ](../../components/data_dictionary/overview_component.md)
+
+#### Masks Available
+
+The *Mask* component will be used for information that follows a standard format, so the data entered will adhere to predefined patterns.
+
+The information below will show the standard format for each option.
+
+- **CEP**: 00000-000
+
+- **CNPJ**: 00.000.000/0000-00
+
+- **CPF**: 000.000.000-00
+
+- **Email**: The *Email* pattern must follow this format to be accepted: ...*@email.com*.
+
+- **Password**: Password information will not have a standard format, but the characters will be hidden. (12345 = *****).
+
+- **Phone**: (00) 00000-0000
+

doc/Documentation/articles/components/data_dictionary/numeric_component.md

@@ -0,0 +1,43 @@
+## Numeric Component
+
+This option will be used for values in general. There will be an explanation for every option inside *Numeric Component*.
+
+To learn how to access the *Components* field : [Overview Component ](../../components/data_dictionary/overview_component.md)
+
+#### Currency
+
+The *Currency* option applies a currency format to the value entered in the field.
+
+![](../../../media/Component_numeric_currency_example.png)
+
+#### Number
+
+The *Number* option displays the value in its standard numeric format.
+
+![](../../../media/Component_numeric_number_example.png)
+
+#### Percentage
+
+The *Percentage* option sets a percentage format for the field's value.
+
+![](../../../media/Component_numeric_percentage_example.png)
+
+#### Slider
+
+The *Slider* option allows for the selection of a numeric value using a slider bar. The value displayed in the column will match the value in the field beside the *Slider Component*.
+
+![](../../../media/Component_numeric_slider_example.png)
+
+#### Additional Settings
+
+- **Number of decimal places**: Sets the number of decimal places to be displayed.
+
+- **Culture**: Applies currency formatting for the selected region.
+
+- **Placeholder**: Shows a default message when no value is entered.
+
+- **Minimum value**: Allows for setting a minimum value in the field.
+
+- **Maximum value**: Allows for setting a maximum value in the field.
+
+- **Step**: Numeric values can be entered directly or adjusted with up and down buttons. The *Step* setting defines the increment for these adjustments.

doc/Documentation/articles/components/data_dictionary/overview_component.md

@@ -0,0 +1,9 @@
+## Component
+
+The *Component* field will be used to configure the formatting of information shown in the column.
+
+You can access the *Component* field through the tab Fields - Component - Component box.
+
+Information can be individually configured for each column in the table.
+
+![](../../../media/component_overview_example_1.png)

doc/Documentation/articles/components/data_dictionary/text_component.md

@@ -0,0 +1,23 @@
+## Text Component
+
+Text components will be used to enable a text field in the column.
+
+To learn how to access the *Components* field : [Overview Component ](../../components/data_dictionary/overview_component.md)
+
+#### TextArea
+
+*TextArea* will be used to enter text information in the table column.
+
+The *Rows* option allows you to configure the number of lines used to set the *TextArea* field size.
+
+![](../../../media/component_text_example_1.png)
+
+#### TextBox
+
+*TextBox* will be used to enter text information in the table column.
+
+The *Place Holder* field will be used to show predefined information if the field is still empty, for example, "Enter your email here".
+
+Unlike the *TextArea* component, the *TextBox* option allows you to add a New Action along with the information.
+
+![](../../../media/component_text_example_2.png)

doc/Documentation/articles/toc.yml

@@ -47,24 +47,6 @@
       href: actions/cancel_action.md      
     - name: Back
       href: actions/back_action.md
-  - name: Components
-    items:
-    - name: Components Overview
-      href: components/overview_component.md
-    - name: Text Components
-      href: components/text_component.md      
-    - name: Numeric Components
-      href: components/numeric_component.md      
-    - name: Calendar Components
-      href: components/calendar_component.md      
-    - name: Boolean Components
-      href: components/boolean_component.md
-    - name: Data Item Components
-      href: components/dataitem_component.md
-    - name: Mask Component
-      href: components/mask_component.md
-  - name: Component Factories
-    href: component_factories.md
   - name: Custom Rules
     href: custom_rules.md
   - name: TagHelpers
@@ -101,7 +83,27 @@
     href: tutorials/search_id.md
 - name: Components
   href: components/intro.md
+  - name: Data Dictionary
+    items:
+    - name: Components Overview
+      href: components/data_dictionary/overview_component.md
+    - name: Text Components
+      href: components/data_dictionary/text_component.md      
+    - name: Numeric Components
+      href: components/data_dictionary/numeric_component.md      
+    - name: Calendar Components
+      href: components/data_dictionary/calendar_component.md      
+    - name: Boolean Components
+      href: components/data_dictionary/boolean_component.md
+    - name: Data Item Components
+      href: components/data_dictionary/dataitem_component.md
+    - name: Mask Component
+      href: components/data_dictionary/mask_component.md
+    - name: File Component
+      href: components/data_dictionary/file_component.md
   items:
+  - name: Factories Component
+    href: components/component_factories.md
   - name: Alert
     href: components/alert.md
   - name: LinkButton