~~NOTRANS~~ ~~Title: UI elements~~ Version: 1.0 / 2022-06-01 VisionX offers you a wide selection of user interface elements. UI elements are for example buttons, input fields or panels that are placed in the screen using drag and drop. Each element can be changed using the Customizer. In addition, actions can be created for many elements, which are executed after a user activity. The following chapters describe all the elements that VisionX contains and explains the settings. ====== Elements ====== ===== Genaral Properties ===== These properties are the same for all elements and can be set individually for each one. ^Property ^Description ^ |**Name** |Automatically assigned name. Can also be renamed, but must be unique. | |**Style** |CSS-style information to be applied in web. | |**Focus Order** |Sets the order in which elements are focused in sequence when the Tab key is pressed. | |**Margins** |Amount of empty space around the control. | |**Font** |Font name, size and style of the control's text. | |**Image** |Choose an image or Font Awesome icon to display on the control. | |**Foreground** |Color of the control's text and Font Awesome icon. For changing the color you can use the matrix to specify a color or select a predefined color. Another possibility is to define the color via the RGB code. | |**Background** |The control's background color. For changing the color you can use the matrix to specify a color or select a predefined color. Another possibility is to define the color via the RGB code. | |**Popup menu** |Assign an existing Popup Menu or specify a new one by choosing the plus symbol. If a Popup Menu is selected, it can be edited with the edit button. Use the delete button to delete the selected Popup Menu. | |**Events** |Events that are executed on the table after certain user activities. | ^Property ^Description ^ |**Pencil Button (1)** |Opens and closes the customizer of the element. | |**Eclipse Button (2)** |Jumps in the sourcecode to the position of the implementation of the element. | |**Delete Button (3)** |Deletes the selected element. | {{:visionx:uielements:pencil_eclipse_delete.png?nolink|Customizer VisionX}} For some properties there is an additional button. This will reset the property to the default value. {{:visionx:uielements:resetbutton.png?nolink|Reset Button}} ===== Label/Html ===== Label for input fields, etc. {{:visionx:uielements:label_visionx.png?nolink|Label VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | {{:visionx:uielements:label.png?nolink|Label}} ===== Icon ===== Displays an Image or FontAwsome Icon. {{:visionx:uielements:icon_visionx.png?nolink|Icon VisionX}} ^Property ^Description ^ |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Preserve Aspect Ratio** |Preserves the Aspect Ratio, when image is stretched. | {{:visionx:uielements:icon.png?nolink|Icon}} ===== Checkbox ===== Checkbox for the selection of an option. {{:visionx:uielements:checkbox_visionx.png?nolink|Checkbox VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | {{:visionx:uielements:checkbox.png?nolink|Checkbox}} ===== Option Chooser ===== This element is a panel containing radio buttons. This GUI element has to be associated with a combo box table column. A radio button is created on the panel for each possible value on the dropdown list. Only one value can be selected. This element allows for the effortless creation of data-related radio groups. {{:visionx:uielements:option_chooser_visionx.png?nolink|Option Chooser VisionX}} ^Property ^Description ^ |**Layout** |Sets the Layout of the buttons (horizontal or vertical). | |**Gap** |Defines the gap between the buttons | |**Binding** |Table column that refers to the option chooser. | {{:visionx:uielements:option_chooser.png?nolink|Option Chooser}} ====== Validators ====== ===== Validator (Image) ===== Checks the input of an input field. If the input is correct, a green mark appears, otherwise a red cross. ^Property ^Description ^ |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Binding** |Table column that refers to the validator. | |**Automatic validate** |Executes the validation automatically, no further user activity is necessary. | |**Hide until first validate** |Validation becomes visible after the first execution. | |**Create Validation** |Creates an action to be able to perform the validation. //Note: Every validator needs an action!// | {{:visionx:uielements:designervalidatorimage.png?nolink|Validator Image}} ===== Validator (Text) ===== Checks the input of an input field. If the input is wrong, an error message appears as red text at the desired position. ^Property ^Description ^ |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Binding** |Table column that refers to the validator. | |**Automatic validate** |Executes the validation automatically, no further user activity is necessary. | |**Hide until first validate** |Validation becomes visible after the first execution. | |**Create Validation** |Creates an action to be able to perform the validation. //Note: Every validator needs an action!// | {{:visionx:uielements:designervalidatortext.png?nolink|Validator Text}} ===== Validation Result ===== The Validation Result is used primarily as a summary of incorrect entries of a complete form. The individual fields which should be verified must be provided with text or image validations. ^Property ^Description ^ |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Binding** |Panel or action that refers to the validator. If you select a panel, the result applies to all validators in this panel. | |**Ignore Invisible Components** |Executes the validation automatically, no further user activity is necessary. | |**Automatic validate** |Validation becomes visible after the first execution. | |**Show as Popup** |Shows the error message as a popup. Otherwise as a list at the position of the validator result. | {{:visionx:uielements:resulterrorpopup2.png?nolink|Validator Result Popup}} {{:visionx:uielements:resulterrorlist2.png?nolink|Validator Result List}} ====== Buttons ====== ===== Button ===== Buttons usually trigger certain actions when it is pressed. It consists of a text, an image or both. {{:visionx:uielements:button_visionx.png?nolink|Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | {{:visionx:uielements:button.png?nolink|Button}} ===== Toggle Button ===== A toggle button is a button with two states (clicked, not clicked). {{:visionx:uielements:toggle_button_visionx.png?nolink|Toggle Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | {{:visionx:uielements:toggle_button.png?nolink|Toggle Button}} ===== Radio Button ===== Radio button for the selection of an option. {{:visionx:uielements:radio_button_visionx.png?nolink|Radio Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | {{:visionx:uielements:radio_button.png?nolink|Radio Button}} ===== Insert Button ===== Adds a new row and selects the row. {{:visionx:uielements:insert_button_visionx.png?nolink|Insert Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Tabset Navigation** |Navigates to the second tab when the editing panel mode is Tabset. | |**Binding** |Table that refers to the button | {{:visionx:uielements:insert_button.png?nolink|Insert Button}} ===== Delete Button ===== Deletes the selected row. {{:visionx:uielements:delete_button_visionx.png?nolink|Delete Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Tabset Navigation** |Navigates to the first tab when the editing panel mode is Tabset. | |**Binding** |Table that refers to the button | {{:visionx:uielements:delete_button.png?nolink|Delete Button}} ===== Export Button ===== Creates a CSV Export. {{:visionx:uielements:export_button_visionx.png?nolink|Export Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Binding** |Table that refers to the button | {{:visionx:uielements:export_button.png?nolink|Export Button}} ===== Save Button ===== Saves the selected datarow. {{:visionx:uielements:save_button_visionx.png?nolink|Save Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Always enabled** |Button is always enabled. Otherwise the button is only enabled after a datarow is changed. | |**Tabset Navigation** |Navigates to the first tab when the editing panel mode is Tabset. | |**Binding** |Table that refers to the button | {{:visionx:uielements:save_button.png?nolink|Save Button}} ===== Cancel Button ===== Undoes the current changes. {{:visionx:uielements:cancel_button_visionx.png?nolink|Cancel Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Tabset Navigation** |Navigates to the first tab when the editing panel mode is Tabset. | |**Binding** |Table that refers to the button | {{:visionx:uielements:cancel_button.png?nolink|Cancel Button}} ===== Table Menu Button ===== Table Menu Button When pressed, the Menu Button reveals the table's toolbar items in a menu that "drops down" from the location of the button. {{:visionx:uielements:table_menu_button_visionx.png?nolink|Table Menu Button VisionX}} ^Property ^Description ^ |**Tabset Navigation** |Navigates to the first tab when the editing panel mode is Tabset. | |**Binding** |Table that refers to the button | {{:visionx:uielements:table_menu_button.png?nolink|Table Menu Button}} ===== Previous Button ===== Selects the previous row. {{:visionx:uielements:previous_button_visionx.png?nolink|Previous Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Binding** |Table that refers to the button. | {{:visionx:uielements:previous_button.png?nolink|Previous Button}} ===== Next Button ===== Selects the next row. {{:visionx:uielements:next_button_visionx.png?nolink|Next Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Binding** |Table that refers to the button. | {{:visionx:uielements:next_button.png?nolink|Next Button}} ===== Selection Button ===== Opens a popup window with data of the linked table column. After selecting the value, it will be saved for the corresponding record. {{:visionx:uielements:selectionbuttonvisionx.png?nolink|Selection Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Binding** |Column that refers to the button. | {{:visionx:uielements:selectionbutton.png?nolink|Selection Button}} ===== Search Button ===== Executes the search for the desired record in the linked table. {{:visionx:uielements:searchbuttonvisionx.png?nolink|Search Button VisionX}} ^Property ^Description ^ |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Binding** |Table that refers to the button. | {{:visionx:uielements:searchbutton.png?nolink|Search Button}} ===== Clear Search Button ===== Resets the search to show all records in the table again. Not applicable in combination with the search button. {{:visionx:uielements:clearsearch.png?nolink|Clear Search Button VisionX}} ^Property ^Description ^ |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Binding** |Table that refers to the button. | {{:visionx:uielements:clearsearchbutton.png?nolink|Clear Search Button}} ===== Save all ===== Saves all data that has been changed in the current screen or for all opened screens. {{:visionx:uielements:saveallvisionx.png?nolink|Save all VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Save for** |Screen: Saves all changes for the current screen. | | |Application: Saves all changes of all opened screens of the application. | {{:visionx:uielements:saveall.png?nolink|Save all}} ===== Reload all ===== Reloads all data for the current screen or for all opened screens. {{:visionx:uielements:reloadall_visionx.png?nolink|Reload all VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Reload for** |Screen: Saves all changes for the current screen. | | |Application: Saves all changes of all opened screens of the application. | {{:visionx:uielements:reloadall.png?nolink|Reload all}} ===== Upload ===== Stores the file/image to be uploaded in the database. Two table columns are needed, which have file/image and text defined as data type. {{:visionx:uielements:upload_visionx.png?nolink|Upload VisionX}} ^Property ^Description ^ |**Label** |Creates a label with the entered Text for this button. | |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Databinding** |Image/File: Column in which the file/image is saved (Datatype file/image). | | |Filename: Column in which the filename is saved (Datatype text). | {{:visionx:uielements:upload.png?nolink|Upload}} ====== Popup Menu/Menu Buttons ====== ===== Menu Button ===== Menu Button is a button that toggles a menu. If a popup menu has been assigned to the Menu Button, a dropdown menu with top triangle is displayed on the button. By clicking the menu button, the popup menu drops down. {{:visionx:uielements:menu_button_visionx.png?nolink|Menu Button VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | {{:visionx:uielements:menu_button.png?nolink|Menu Button}} ====== Container ====== ===== Panel ===== Panel is the simplest container. A panel provides space in which an application can attach any other component, including other panels. {{:visionx:uielements:panel_visionx.png?nolink|Panel VisionX}} ^Property ^Description ^ |**Label** |Selection of different types of a group panel. | |**Tooltip** |Informational text that is displayed when the cursor is over this control. | |**Convert Panel** |Left/Top: Label is displayed on the left/above the Cell Editor. Placeholder: Label name is displayed in the Cell Editor, but only if it is empty. None: No labels displayed. | |**Responsive Layout** |Changes padding/margin/font size and menu position dynamically - based on the current browser or device size. | |**Convert to Advanced Form Layout** |VisionX automatically adds the corresponding labels of cell editors. | ===== Scroll Panel ===== Users have the possibility to scroll inside this panel if the displayed elements do not have enough space. A scrollbar appears for horizontal or vertical scrolling automatically when the panel becomes too small. {{:visionx:uielements:scrollpanel_visionx.png?nolink|Scroll Panel VisionX}} ^Property ^Description ^ |**Convert Panel** |Selection of different types of panels. | |**Responsive Layout** |Changes padding/margin/font size and menu position dynamically - based on the current browser or device size. | |**Convert to Advanced Form Layout** |VisionX automatically adds the corresponding labels of the cell editors. | {{:visionx:uielements:scrollpanel.png?nolink|Scroll Panel}} ===== Group Panel ===== With a Group Panel you can make your workscreens more clearly arranged. You can add a heading to the top of each Group Panel and configure the panel as collapsible. {{:visionx:uielements:grouppanel_visionx.png?nolink|Group Panel VisionX}} ^Property ^Description ^ |**Convert Group Panel** |Selection of different types of a group panel. | |**Responsive Layout** |Changes padding/margin/font size and menu position dynamically - based on the current browser or device size. | |**Convert to Advanced Form Layout** |VisionX automatically adds the corresponding labels of the cell editors. | |**Label position** |Left/Top: Label is displayed on the left/above the Cell Editor. Placeholder: Label name is displayed in the Cell Editor, but only if it is empty. None: No labels displayed. | |**Horizontal gap** |Distance between elements in different columns. | |**Label gap (Horizontal)** |Horizontal distance from label to cell editor. | |**Vertical gap** |Distance between elements in different rows. | |**Label gap (Vertical)** |Vertical distance between label and cell editor. | {{:visionx:uielements:grouppanel.png?nolink|Group Panel}} ===== Horizontal Split ===== The horizontal split panel, is divided into two sections, which are aligned horizontally. {{:visionx:uielements:splitpanel_horizontal_visionx.png?nolink|Horizontal Split VisionX}} ^Property ^Description ^ |**Convert Panel** |Selection of different types of a panel. | |**Split Position** |Position where the panel is split. | {{:visionx:uielements:splitpanel_horizontal.png?nolink|Horizontal Split}} ===== Vertical Split ===== The vertical split panel, is divided into two sections, which are aligned vertically. {{:visionx:uielements:splitpanel_vertical_visionx.png?nolink|Vertical Panel VisionX}} ^Property ^Description ^ |**Convert Panel** |Selection of different types of a panel. | |**Split Position** |Position where the panel is split. | {{:visionx:uielements:splitpanel_vertical.png?nolink|Vertical Panel}} ===== Tabset ===== Any number of tab sets can be added to this panel. Each tab set contains its own panel, which can be configured individually. {{:visionx:uielements:tabsetpanel_visionx.png?nolink|Tabset Panel VisionX}} ^Property ^Description ^ |**Convert Panel** |Selection of different types of a panel. | |**Responsive Layout** |Changes padding/margin/font size and menu position dynamically - based on the current browser or device size. | |**Convert to Advanced Form Layout** |VisionX automatically adds the corresponding labels of the cell editors. | |**Label position** |Left/Top: Label is displayed on the left/above the Cell Editor. Placeholder: Label name is displayed in the Cell Editor, but only if it is empty. None: No labels displayed. | |**Horizontal gap** |Distance between elements in different columns. | |**Label gap (Horizontal)** |Horizontal distance from label to cell editor. | |**Vertical gap** |Distance between elements in different rows. | |**Label gap (Vertical)** |Vertical distance between label and cell editor. | {{:visionx:uielements:tabsetpanel.png?nolink|Tabset Panel}} ===== Editing Panel ===== {{:visionx:uielements:editing_panel_visionx.png?nolink|Editing Panel VisionX}} ^Property ^Description ^ |**Navigationtabs** |Selection of different types of a panel. | |**Tabposition** |Changes padding/margin/font size and menu position dynamically - based on the current browser or device size. | |**Display mode** |VisionX automatically adds the corresponding labels of the cell editors. | |**Navigation mode** |Left/Top: Label is displayed on the left/above the Cell Editor. Placeholder: Label name is displayed in the Cell Editor, but only if it is empty. None: No labels displayed. | |**Show Navigation** |Distance between elements in different columns. | |**Show Save and Back** |Horizontal distance from label to cell editor. | |**Split Position** |Distance between elements in different rows. | {{:visionx:uielements:editing_panel_overview.png?nolink|Editing Panel Overview}} {{:visionx:uielements:editing_panel_details.png?nolink|Editing Panel Details}} ===== Fold Group Panel ===== A grouppanel which is configurable as foldable. {{:visionx:uielements:fold_group_panel_visionx.png?nolink|Fold Grpup Panel VisionX}} ^Property ^Description ^ |**Convert Panel** |Selection of different types of a group panel. | |**Collapsible** |Sets the panel collapsible. | |**Collapsed** |Sets the panel collapsed by default. | |**Responsive Layout** |Changes padding/margin/font size and menu position dynamically - based on the current browser or device size. | |**Convert to Advanced Form Layout** |VisionX automatically adds the corresponding labels of the cell editors. | {{:visionx:uielements:fold_group_panel.png?nolink|Fold Grpup Panel}} ===== Advanced Panel ===== A panel where labels are automatically added when adding editors. {{:visionx:uielements:advanced_panel_visionx.png?nolink|Advanced Panel VisionX}} ^Property ^Description ^ |**Label** |Creates a label with the entered Text for this button. | |**Tooltip** |Informational text that is displayed when the cursor is over this control. | |**Convert Panel** |Selection of different types of a panel. | |**Responsive Layout** |Changes padding/margin/font size and menu position dynamically - based on the current browser or device size. | |**Convert to Form Layout** |VisionX automatically removes the corresponding labels of the cell editors. | |**Label position** |Left/Top: Label is displayed on the left/above the Cell Editor. Placeholder: Label name is displayed in the Cell Editor, but only if it is empty. None: No labels displayed. | |**Horizontal gap** |Distance between elements in different columns. | |**Label gap (Horizontal) ** |Horizontal distance from label to cell editor. | |**Vertical gap ** |Distance between elements in different rows. | |**Label gap (Vertical) ** |Vertical distance between label and cell editor. | {{:visionx:uielements:advanced_panel.png?nolink|Advanced Panel}} ===== Advanced Group Panel ===== A group panel where labels are automatically added when adding editors. {{:visionx:uielements:advanced_grouppanel_visionx.png?nolink|Advanced Group Panel VisionX}} ^Property ^Description ^ |**Label** |Creates a label with the entered Text for this button. | |**Tooltip** |Informational text that is displayed when the cursor is over this control. | |**Convert Panel** |Selection of different types of a panel. | |**Responsive Layout** |Changes padding/margin/font size and menu position dynamically - based on the current browser or device size. | |**Convert to Form Layout** |VisionX automatically removes the corresponding labels of the cell editors. | |**Label position** |Left/Top: Label is displayed on the left/above the Cell Editor. Placeholder: Label name is displayed in the Cell Editor, but only if it is empty. None: No labels displayed. | |**Horizontal gap** |Distance between elements in different columns. | |**Label gap (Horizontal)** |Horizontal distance from label to cell editor. | |**Vertical gap** |Distance between elements in different rows. | |**Label gap (Vertical)** |Vertical distance between label and cell editor. | {{:visionx:uielements:advanced_grouppanel.png?nolink|Advanced Group Panel}} ===== Component Table ===== {{:visionx:uielements:componenttable_visionx.png?nolink|Component Table VisionX}} ^Property ^Description ^ |**Responsive Layout** |Changes padding/margin/font size and menu position dynamically - based on the current browser or device size. | |**Convert to Advanced Form Layout** |VisionX automatically adds the corresponding labels of the cell editors. | |**Binding** |Table that refers to the component table. | |**Show Horizontal Lines** |Display the horizontal gridlines of the component table. | |**Show Border** |Displays the borders of this table. | |**Line** |Colour of the gridlines. | |**Repeat Count** |Number of rows displayed in the component table. //Note: 0 displays all entries// | {{:visionx:uielements:componenttable.png?nolink|Component Table}} ====== Mobile Elements ====== ===== Offline ===== {{:visionx:uielements:offline_visionx.png?nolink|Offline VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | {{:visionx:uielements:offline.png?nolink|Offline}} ===== QR Scanner ===== {{:visionx:uielements:qrscanner_visionx.png?nolink|QR Scanner VisionX}} ^Property ^Description ^ |**Label** |Creates a label with the entered Text for this button. | |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Binding** |Table column that refers to the QR scanner button. | {{:visionx:uielements:qrscanner.png?nolink|QR Scanner}} ===== Call number ===== Button that can be used to call a phone number stored in the database. ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Image Gap** |Defines the gap between the image and the text. | |**Image Alignment** |Specifies the alignment of the image and text on the button. | |**Border on Mouseover** |Displays the border when the curser is over this button. | |**Show Border** |Displays the borders of this button. | |**Binding** |Table column that refers to the Call number button. | {{:visionx:uielements:call_number.png?nolink|Call number}} ===== Signature ===== Element for saving a signature as an image in the database. {{:visionx:uielements:signature_visionx.png?nolink|Signature VisionX}} ^Property ^Description ^ |**Data binding** |Table column where the signature is stored as an image. | {{:visionx:uielements:signature.jpg?nolink|Signature}} ====== Dashboard ====== ===== Panel (Gridline Panel) ===== A panel that shows your screen grid lines in design mode when dragging elements in order to better place and size them. ^Property ^Description ^ |**Grid Layout** |Number for columns and rows. | |**Convert Panel** |Selection of different types of a panel. | ===== KPI ===== **K**ey **P**erformence **I**ndicator is an element that shows you the currently selected value. ^Property ^Description ^ |**Tooltip** |Informational text that is displayed when the cursor is over this control. | |**Binding** |Table column that refers to the KPI. | ===== Table ===== The table can be used to display and edit your corresponding data in the screen. {{:visionx:uielements:table_visionx.png?nolink|Table_VisionX}} ^Property ^Description ^ |**Show Header** |Displays column names in the first row. | |**Show Export Button** |Sets the export button to visible, which allows you to download the data as a CSV file. | |**Show Gridlines** |Displays the grid lines of your table. | |**Auto Size** |Column width changes when the window is reduced or enlarged, so that all columns are always visible without scrolling. | |**Record Buttons** |Record buttons (add, delete, edit) become visible on the left side of the table. | |**Enable Search** |Displays a search bar for the table. | |**Allow data modification** |New: allows to create a new record, Update: allows to edit records, Delete: allows to delete a record. | |**Binding** |Database table which refers to the table. | |**Show Export Button Settings** |Here you can specify which columns from the table will be used for exporting your data. | | |All columns: All columns will be selected | | |All visible columns: All columns that are visible in the table and also all cell editors that are displayed on the screen | | |Visible columns of this table: Only columns that are displayed in the table on the screen | | |Custom selection: Individual selection of columns by selecting the corresponding export checkboxes. With the All checkbox , in the lower left corner of the window, all columns can be selected. | | |Use column name as labels: The column names of the database are used as column names in the CSV file. | | |Forbidden: Checkboxes for deselecting columns. | | |Standard: Sets the selection to the default settings - Visible columns of this table | The selection of checkboxes configures the columns that will be displayed in the table on the screen. Also the order can be changed with the arrow keys and column names can be renamed with the pencil icon. {{:visionx:uielements:table.png?nolink|Table}} ===== Chart ===== Selection of different charts to visualize data. ^Property ^Description ^ |**Binding** |Database table which refers to the table. | |**Style** |A list with all availible chart types | |**Title** |Title that is displayed at the top of the control. | |**X-Axis** |Name of the X-Axis | |**Y-Axis** |Name of the Y-Axis | |**X-Column** |Table column used for the X-values | |**Y-Columns** |Checkboxes to select the table columns to be displayed in the chart. Also the order can be changed with the arrow keys and column names can be renamed with the pencil icon. | {{:visionx:uielements:chart.png?nolink|Chart VisionX}} ===== Ring ===== {{:visionx:uielements:ring_visionx.png?nolink|Ring VisionX}} ^Property ^Description ^ |**Binding** |Database table which refers to the table. | |**Style** |A list with all availible chart types | |**Title** |Title that is displayed at the top of the control. | |**X-Axis** |Name of the X-Axis | |**Y-Axis** |Name of the Y-Axis | |**X-Column** |Table column used for the X-values | |**Y-Columns** |Checkboxes to select the table columns to be displayed in the chart. Also the order can be changed with the arrow keys and column names can be renamed with the pencil icon. | {{:visionx:uielements:ring.png?nolink|Ring}} ====== Data Elements ====== ===== Assignment Elements ===== ==== Assignment Table ==== {{:visionx:uielements:assignment_table_visionx.png?nolink|Assignment Table VisionX}} ^Property ^Description ^ |**Change Assignment Element** |Selection of all assignment elements for changing. | |**Show Search Area** |Displays a search bar for the table. | |**Binding** |Table that refers to the Assignment Element. | {{:visionx:uielements:assignment_table.png?nolink|Assignment Table}} ==== Assignment Editor ==== {{:visionx:uielements:assignment_editor_visionx.png?nolink|Assignment Editor VisionX}} ^Property ^Description ^ |**Change Assignment Element** |Selection of all assignment elements for changing. | |**Binding** |Table that refers to the Assignment Element. | {{:visionx:uielements:assignment_editor.png?nolink|Assignment Editor}} ==== Assignment Boxes ==== {{:visionx:uielements:assignment_boxes_visionx.png?nolink|Assignment Boxes VisionX}} ^Property ^Description ^ |**Change Assignment Element** |Selection of all assignment elements for changing. | |**Binding** |Table that refers to the Assignment Element. | {{:visionx:uielements:assignment_boxes.png?nolink|Assignment Boxes}} ==== Assignment Matrix ==== {{:visionx:uielements:assignment_matrix_visionx.png?nolink|Assignment Matrix VisionX}} ^Property ^Description ^ |**Change Assignment Element** |Selection of all assignment elements for changing. | |**Table Columns** |. | |**Binding** |Table that refers to the Assignment Element. | {{:visionx:uielements:assignment_matrix.png?nolink|Assignment Matrix}} ===== Label Control ===== A label that can be bound to a database column and display these values from the selected row in the label. {{:visionx:uielements:label_control_visionx.png?nolink|Label Control VisionX}} ^Property ^Description ^ |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Binding** |Table column that refers to the chart | {{:visionx:uielements:label_control.png?nolink|Label Control}} ===== Record Counter ===== The record counter counts the entries of a table, even if they are filtered. {{:visionx:uielements:record_counter_visionx.png?nolink|Record Counter VisionX}} ^Property ^Description ^ |**Binding** |Table that refers to the record counter. | {{:visionx:uielements:record_counter.png?nolink|Record Counter}} ===== Tree ===== For displaying linked data in a hierarchical data structure. {{:visionx:uielements:tree_visionx.png?nolink|Tree VisionX}} ^Property ^Description ^ |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Detect Endnode** |Detects the endnode of tree. | |**Binding** |Tables that refer to the record counter. | {{:visionx:uielements:tree.png?nolink|Tree}} ===== Gauge ===== A gauge chart, whose shape looks like a tachometer, is a type of chart used to display a single data value in a quantitative context. For example, you can use it to visualize the number of pieces produced per day or the sales of a period of time. ^Property ^Description ^ |**Binding** |Table column that refers to the chart | |**Style** |Selecting the gauge variant | |**Title** |Titel of the chart | |**Min Value** |Minimum value displayed in the diagram | |**Max Value** |Maximum value displayed in the diagram | |**Min Warning** |Range between minimum Value and minimum Warning ( highlighted in color) | |**Max Warning** |Range between maximum value and maximum warning ( highlighted in color) | |**Min Error** |Minimum value that should not be undercut | |**Max Error** |Maximum value that should not be reached | {{:visionx:uielements:gauge.png?nolink|}} ===== Tagging ===== Element with the possibility to store several values of a master data table as a concatenation. {{:visionx:uielements:tagging_visionx.png?nolink|Tagging VisionX}} ^Property ^Description ^ |**Label** |Creates a label with the entered Text for this element. | |**Tooltip** |Informational text that is displayed when the cursor is over this control. It can be modified by using the HTML Editor. | |**Binding** |Table column that refers to this element. | |**Input Position** |Position where the selection list is displayed. | |**Tag validation enabled** |!!!!! | |**Adding new tag enabled** |!!!!! | {{:visionx:uielements:tagging.png?nolink|Tagging}} ===== Filter Control ===== ====== Web Elements ====== ===== Hyperlink ===== {{:visionx:uielements:hyperlink_visionx.png?nolink|Hyperlink VisionX}} ^Property ^Description ^ |**Text** |Text that is displayed. It can be modified by using the HTML Editor. | |**Focus Order** |Sets the order in which elements are focused in sequence when the Tab key is pressed. | |**Target** |Specifies if the link is open in a new tab or the current content. | |**URL** |Specifies the URL. | |**Show URL as Tooltip** |Shows the URL as Tooltip | |**Binding** |Column that refers to the link. | |**Text** |Column that refers to the text. | {{:visionx:uielements:hyperlink.png?nolink|Hyperlink}}