Documentation

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
visionx:documentation [2022/06/01 08:22]
robot
visionx:documentation [2022/06/02 06:32] (current)
admin
Line 10: Line 10:
 VisionX is the Open Low-code Platform with no limits. We combine No-code, Low-code and Pro-code in one Platform. VisionX is the Open Low-code Platform with no limits. We combine No-code, Low-code and Pro-code in one Platform.
  
-VisionX is for businesses users and Citizen Developer to easily ​bUIld applications themselves with No-code/​Low-code and it’s for professional developers to bUIld unlimited complex application extremely fast with No-code/​Low-code/​Pro-code.+VisionX is for businesses users and Citizen Developer to easily ​build applications themselves with No-code/​Low-code and it’s for professional developers to build unlimited complex application extremely fast with No-code/​Low-code/​Pro-code.
  
 This manual is divided into the following sections: This manual is divided into the following sections:
Line 29: Line 29:
   * Add Ons   * Add Ons
  
-More information you find at our documentation page [[:​visionx:​home|VisionX Documentation page]]+More information you find at our [[:​visionx:​home|VisionX Documentation page]]
  
 ===== Learning Material ===== ===== Learning Material =====
Line 35: Line 35:
 To learn VisionX you have also the following different ways to start with it. To learn VisionX you have also the following different ways to start with it.
  
-For a qUIck overview:+For a quick overview:
  
-  * Watch our explainer videos: ​[[https://​visionx.sibvisions.com/​explainer-videos/​|Explainer videos]] +  * Watch our [[https://​visionx.sibvisions.com/​explainer-videos/​|Explainer videos]] 
-  * Read the getting started: ​[[:visionx:home|Full documentation]]+  * Read the [[:visionx:getting_started|Getting started]]
  
 More documentaries to dive deeper: More documentaries to dive deeper:
  
-  * Do our step by step tutorials ​[[:​visionx:​home|Tutorials]] +  * Do our step by step [[:​visionx:​home|Tutorials]] 
-  * Visit our documentation page [[:​visionx:​home|Documentation page]]+  * Visit our [[:​visionx:​home|Documentation page]]
  
 You did not find the right information or you want to talk to us right away: You did not find the right information or you want to talk to us right away:
  
-  * Book a demo session - we are happy to help you with the first steps [[https://​visionx.sibvisions.com/​schedule-demo/​|Book a demo]]+  * [[https://​visionx.sibvisions.com/​schedule-demo/​|Book a demo session]], we are happy to help you with the first steps
  
 ====== Main View / Administration ====== ====== Main View / Administration ======
Line 60: Line 60:
   - To the right is the Ready Made Solution Store to install VisionX Add-ons or demo applications.   - To the right is the Ready Made Solution Store to install VisionX Add-ons or demo applications.
  
-[[images/​visionx-overview.png|{{:images/visionx-overview.png}}]]+{{:visionx:​documentation:​visionx-overview.png?nolink|}}
  
-The first time you start VisionX, you will see several ​gUIdes ​that help explain the first steps.+The first time you start VisionX, you will see several ​guides ​that help explain the first steps.
  
-[[images/​visionx-gUIdes.png|{{:images/visionx-gUIdes.png}}]]+{{:visionx:​documentation:​visionx-guides.png?nolink|}}
  
 You can show or hide them at any time in the top right corner of the toolbar. You can show or hide them at any time in the top right corner of the toolbar.
  
-{{:images/visionx-gUIdes-show.png}} {{:images/visionx-gUIdes-showed.png}}+{{:visionx:​documentation:​visionx-guides-show.png?nolink|}} {{:visionx:​documentation:​visionx-guides-showed.png?nolink|}}
  
 ===== Ready Made Solutions Store ===== ===== Ready Made Solutions Store =====
  
-The app store contains various add-ons, demo applications and tutorials that you can use to get to know VisionX or to get a qUIck start for an application.+The app store contains various add-ons, demo applications and tutorials that you can use to get to know VisionX or to get a quick start for an application.
  
-[[images/​ready-made-solutions-store.png|{{:images/ready-made-solutions-store.png}}]]+{{:visionx:​documentation:​ready-made-solutions-store.png?nolink|}}
  
 Click on the orange plus icon to install the add-on or demo application. In the installation wizard just click finish. Click on the orange plus icon to install the add-on or demo application. In the installation wizard just click finish.
Line 80: Line 80:
 The 'Go Back' button at the bottom of the screen will take you back to the main view. The 'Go Back' button at the bottom of the screen will take you back to the main view.
  
-[[images/​ready-made-solutions-store-addons.jpg|{{:images/ready-made-solutions-store-addons.jpg}}]]+{{:visionx:​documentation:​ready-made-solutions-store-addons.jpg?nolink|}}
  
 There are a lot of add ons available depending on your license: There are a lot of add ons available depending on your license:
Line 149: Line 149:
 The VisionX user management scree can be accessed on the '​Tools'​ tab. The VisionX user management scree can be accessed on the '​Tools'​ tab.
  
-[[images/​visionx-user-management.jpg|{{:images/visionx-user-management.jpg}}]]+{{:visionx:​documentation:​visionx-user-management.jpg?nolink|}}
  
 When VisionX is started, the user admin with the password admin is used. If you don't do anything in VisionX for a longer time, VisionX will time out and you will be asked for this password. In this case use admin as password or restart VisionX. When VisionX is started, the user admin with the password admin is used. If you don't do anything in VisionX for a longer time, VisionX will time out and you will be asked for this password. In this case use admin as password or restart VisionX.
Line 183: Line 183:
 To export, we need to select the application and export type. To export, we need to select the application and export type.
  
-[[images/​export-app-1.jpg|{{:images/export-app-1.jpg}}]]+{{:visionx:​documentation:​export-app-1.jpg?nolink|}}
  
 The following options are available: The following options are available:
Line 199: Line 199:
 ==== Importing An Application ==== ==== Importing An Application ====
  
-To import an application,​ a valid VisionX export file and an application name are reqUIred. Here you can change the application name to rename an application.+To import an application,​ a valid VisionX export file and an application name are required. Here you can change the application name to rename an application.
  
-[[images/​import-app-1.jpg|{{:images/import-app-1.jpg}}]]+{{:visionx:​documentation:​import-app-1.jpg?nolink|}}
  
 The application can be imported as a new application or over an existing application. The latter option overwrites the existing application! The application can be imported as a new application or over an existing application. The latter option overwrites the existing application!
Line 207: Line 207:
 In the second step, we can select which content from the export file is imported. If the '​Database'​ option is unchecked, the database – if included in the export file – is not imported into VisionX. In the second step, we can select which content from the export file is imported. If the '​Database'​ option is unchecked, the database – if included in the export file – is not imported into VisionX.
  
-[[images/​import-app-2.jpg|{{:images/import-app-2.jpg}}]]+{{:visionx:​documentation:​import-app-2.jpg?nolink|}}
  
 The third step shows the application'​s data sources based on the information in the export file. They can be edited by the user. Data can be imported for either a new or existing database user. The third step shows the application'​s data sources based on the information in the export file. They can be edited by the user. Data can be imported for either a new or existing database user.
  
-[[images/​import-app-3.jpg|{{:images/import-app-3.jpg}}]]+{{:visionx:​documentation:​import-app-3.jpg?nolink|}}
  
 In the 4th step you can specify how the database will be imported. In the 4th step you can specify how the database will be imported.
Line 217: Line 217:
 If you selected an existing database user during import, the following options are available. If you selected an existing database user during import, the following options are available.
  
-The checked '​Delete and recreate database objects'​ option performs the following steps. ​All existing tables and data are deleted ​All tables are recreated ​Only users and roles are imported+The checked '​Delete and recreate database objects'​ option performs the following steps. 
 + 
 +  * All existing tables and data are deleted 
 +  * All tables are recreated 
 +  * Only users and roles are imported
  
 **Note - This option is not checked for existing database users and should be checked only if you are sure that you want to delete the existing tables with all their data.** **Note - This option is not checked for existing database users and should be checked only if you are sure that you want to delete the existing tables with all their data.**
  
-The checked 'Merge database objects'​ option performs the following steps. ​Merge existing tables with new tables structure ​No data changes are performed in this step+The checked 'Merge database objects'​ option performs the following steps. 
 + 
 +  * Merge existing tables with new tables structure 
 +  * No data changes are performed in this step
  
 **Note - This option merges the table structure from the export with the table structure of the existing data user. Therefore, this is very useful especially when installing/​importing a new version of your application.** **Note - This option merges the table structure from the export with the table structure of the existing data user. Therefore, this is very useful especially when installing/​importing a new version of your application.**
  
-The checked '​Import data' option performs the following steps. ​All existing data except users is deleted ​All data except users is imported+The checked '​Import data' option performs the following steps. 
 + 
 +  * All existing data except users is deleted 
 +  * All data except users is imported
  
 **Note - This option is not checked for existing database users and should be checked only if you are sure that you want to delete all existing data and import then the data from the export.** **Note - This option is not checked for existing database users and should be checked only if you are sure that you want to delete all existing data and import then the data from the export.**
  
-[[images/​import-app-4.jpg|{{:images/import-app-4.jpg}}]]+{{:visionx:​documentation:​import-app-4.jpg?nolink|}}
  
 If 'New Database User' was selected during import, then only the option '​Import data' is available, because the database objects are newly created and therefore cannot be merged. If 'New Database User' was selected during import, then only the option '​Import data' is available, because the database objects are newly created and therefore cannot be merged.
Line 235: Line 245:
 If in this case the option '​Import data' is unchecked, then only the table structures without data will be taken over. In addition, the users and roles are taken over from the export. If in this case the option '​Import data' is unchecked, then only the table structures without data will be taken over. In addition, the users and roles are taken over from the export.
  
-[[images/​import-app-5.jpg|{{:images/import-app-5.jpg}}]]+{{:visionx:​documentation:​import-app-5.jpg?nolink|}}
  
 ===== Datasources ===== ===== Datasources =====
Line 241: Line 251:
 Data sources are used to connect to databases. Eg. when creating a new application or using existing databases in screens. In the database the data of the application is stored. Data sources are used to connect to databases. Eg. when creating a new application or using existing databases in screens. In the database the data of the application is stored.
  
-For the data sources, VisionX ​distingUIshes ​between admin data sources and user-defined data sources (menu item '​Datasources'​).+For the data sources, VisionX ​distinguishes ​between admin data sources and user-defined data sources (menu item '​Datasources'​).
  
-Admin Datasources are used for creating new database users. This is used, for example, in the 'New Application'​ wizard to create a new database user for the new application. Another use case is to select an existing database user from the list of all database users of a database. For admin data sources, a database user with administrator rights is reqUIred, so that VisionX can create new database users with this user. During the installation of VisionX, one admin data source with the name '​VisionX'​ is configured. This is the Postgres database supplied with VisionX, which can be used as a database for new applications.+Admin Datasources are used for creating new database users. This is used, for example, in the 'New Application'​ wizard to create a new database user for the new application. Another use case is to select an existing database user from the list of all database users of a database. For admin data sources, a database user with administrator rights is required, so that VisionX can create new database users with this user. During the installation of VisionX, one admin data source with the name '​VisionX'​ is configured. This is the Postgres database supplied with VisionX, which can be used as a database for new applications.
  
 Usually you do not get database administrator rights. In a company only database administrators have these rights. They can create a database user for you, which you can then use for your new application to store data. If you want to be independent of this, you can also simply use our VisionX.cloud,​ there you can simply create as many databases as you want with VisionX. Usually you do not get database administrator rights. In a company only database administrators have these rights. They can create a database user for you, which you can then use for your new application to store data. If you want to be independent of this, you can also simply use our VisionX.cloud,​ there you can simply create as many databases as you want with VisionX.
  
-User-defined data sources only reqUIre ​the usual database user rights and are used for new applications to store your data. These are creation, modification and deletion of tables and views including data changes. This database user can easily created by the database administrator and provided for you. They are also used to access existing databases in your VisionX screens to show or combine data from existing systems.+User-defined data sources only require ​the usual database user rights and are used for new applications to store your data. These are creation, modification and deletion of tables and views including data changes. This database user can easily created by the database administrator and provided for you. They are also used to access existing databases in your VisionX screens to show or combine data from existing systems.
  
 ==== Edit Datasources ==== ==== Edit Datasources ====
Line 255: Line 265:
 Both types of datasources can be configured in the same way. Both types of datasources can be configured in the same way.
  
-[[images/​datasource-edit.jpg|{{:images/datasource-edit.jpg}}]]+{{:visionx:​documentation:​datasource-edit.jpg?nolink|}}
  
 Here the data source name, the desired database (Oracle, Posgres, EnterpirseDB,​ MS SQL, MySQL, MariaDB, DB2 or Informix), as well as all the relevant database connection parameters are specified. These parameters include the server (name or IP), port, and database name (or SID in Oracle). Here the data source name, the desired database (Oracle, Posgres, EnterpirseDB,​ MS SQL, MySQL, MariaDB, DB2 or Informix), as well as all the relevant database connection parameters are specified. These parameters include the server (name or IP), port, and database name (or SID in Oracle).
Line 267: Line 277:
 As mentioned in the chapter [[#​creating_an_application|Creating an Application]],​ either a new or an existing database user can be selected for a new application. The default setting is the '​VisionX'​ admin data source. If a new database user is selected, VisionX creates a new user using the selected admin data source. For this reason, only admin data sources can be selected for this option. As mentioned in the chapter [[#​creating_an_application|Creating an Application]],​ either a new or an existing database user can be selected for a new application. The default setting is the '​VisionX'​ admin data source. If a new database user is selected, VisionX creates a new user using the selected admin data source. For this reason, only admin data sources can be selected for this option.
  
-[[images/​new-app-use-datasouce.jpg|{{:images/new-app-use-datasouce.jpg}}]]+{{:visionx:​documentation:​new-app-use-datasouce.jpg?nolink|}}
  
 Under the second option 'Reuse an existing Database User', a user can be selected from the list of available database users for the chosen admin data source. This user is then utilized for the new application. Under the second option 'Reuse an existing Database User', a user can be selected from the list of available database users for the chosen admin data source. This user is then utilized for the new application.
Line 275: Line 285:
 New data sources (database connections) can be created using the '​New'​ button. For options one and two, the admin data source scree is opened, whereas the '​New'​ button next to the third option opens the scree for user-defined data sources. New data sources (database connections) can be created using the '​New'​ button. For options one and two, the admin data source scree is opened, whereas the '​New'​ button next to the third option opens the scree for user-defined data sources.
  
-[[images/​new-screen-existing-datasource.jpg|{{:images/new-screen-existing-datasource.jpg}}]]+{{:visionx:​documentation:​new-screen-existing-datasource.jpg?nolink|}}
  
 When a new screen is created, or when an existing table is add to the screen, a similar screen is available for the selection of a database. It includes the option 'Use Application Database User' to make tables available from the application'​s database connection. This is the default data source shown under the '​Datasources'​ tab of the '​Application Settings'​ menu (see [[#​application_settings|Application Settings]]). When a new screen is created, or when an existing table is add to the screen, a similar screen is available for the selection of a database. It includes the option 'Use Application Database User' to make tables available from the application'​s database connection. This is the default data source shown under the '​Datasources'​ tab of the '​Application Settings'​ menu (see [[#​application_settings|Application Settings]]).
Line 287: Line 297:
 For example, in VisionX table columns, if the domain 'Text short' is selected, then a column with a text data type of length 50 will be created in the table. If you prefer a length of 60 characters, then simply change this domain to the Text length 60. For example, in VisionX table columns, if the domain 'Text short' is selected, then a column with a text data type of length 50 will be created in the table. If you prefer a length of 60 characters, then simply change this domain to the Text length 60.
  
-[[images/​domains.jpg|{{:images/domains.jpg}}]]+{{:visionx:​documentation:​domains.jpg?nolink|}}
  
 ^Setting ​           ^Description ​                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           ^ ^Setting ​           ^Description ​                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           ^
Line 305: Line 315:
 You can define your own Celleditors in addition to the predefined ones, or use one of many celleditors from the JVx framework. You can define your own Celleditors in addition to the predefined ones, or use one of many celleditors from the JVx framework.
  
-[[images/​domain-htmlcelleditor.jpg|{{:images/domain-htmlcelleditor.jpg}}]]+{{:visionx:​documentation:​domain-htmlcelleditor.jpg?nolink|}}
  
 **Example** **Example**
Line 325: Line 335:
 The small red '​Delete'​ button on the bottom right is used to delete applications. The small red '​Delete'​ button on the bottom right is used to delete applications.
  
-[[images/​applications.jpg|{{:images/applications.jpg}}]]+{{:visionx:​documentation:​applications.jpg?nolink|}}
  
 ===== Creating An Application ===== ===== Creating An Application =====
Line 335: Line 345:
 **Note: VisionX offers wizards for several processes, which enable the step-by-step creation of applications,​ screens, etc. Most wizards can be completed by clicking the '​Finish'​ button at the first step, in which case the default settings will be used.** **Note: VisionX offers wizards for several processes, which enable the step-by-step creation of applications,​ screens, etc. Most wizards can be completed by clicking the '​Finish'​ button at the first step, in which case the default settings will be used.**
  
-[[images/​new-application-step-1.jpg|{{:images/new-application-step-1.jpg}}]]+{{:visionx:​documentation:​new-application-step-1.jpg?nolink|}}
  
 ==== Choose Database ==== ==== Choose Database ====
Line 351: Line 361:
 See [[#​datasources|Datasources]] for more details to define new datasources. See [[#​datasources|Datasources]] for more details to define new datasources.
  
-[[images/​new-application-step-2.jpg|{{:images/new-application-step-2.jpg}}]]+{{:visionx:​documentation:​new-application-step-2.jpg?nolink|}}
  
 ==== Create Admin User ==== ==== Create Admin User ====
Line 359: Line 369:
 Additional users for the application can be created in the user management screen of the application later. Since the administrator user has all rights in the application,​ a secure password should be selected for this user. The default setting is admin/​admin. **Please change the password!** Additional users for the application can be created in the user management screen of the application later. Since the administrator user has all rights in the application,​ a secure password should be selected for this user. The default setting is admin/​admin. **Please change the password!**
  
-Option '​Enable Autologin for this user' can be used to configure that no login is reqUIred ​for the application. In this case, the user specified above and the associated rights are used when you run the application.+Option '​Enable Autologin for this user' can be used to configure that no login is required ​for the application. In this case, the user specified above and the associated rights are used when you run the application.
  
 See [[#​user_and_role_management|User And Role Management]] for more details. See [[#​user_and_role_management|User And Role Management]] for more details.
  
-[[images/​new-application-step-3.jpg|{{:images/new-application-step-3.jpg}}]]+{{:visionx:​documentation:​new-application-step-3.jpg?nolink|}}
  
 ==== Choose Background Image ==== ==== Choose Background Image ====
Line 369: Line 379:
 Choose a background image or upload your own later. Choose a background image or upload your own later.
  
-[[images/​new-application-step-4.jpg|{{:images/new-application-step-4.jpg}}]]+{{:visionx:​documentation:​new-application-step-4.jpg?nolink|}}
  
 ==== Choose Modules ==== ==== Choose Modules ====
Line 377: Line 387:
 See [[#​ready_made_solutions_store|Ready Made Solutions Store]] See [[#​ready_made_solutions_store|Ready Made Solutions Store]]
  
-[[images/​new-application-step-5.jpg|{{:images/new-application-step-5.jpg}}]]+{{:visionx:​documentation:​new-application-step-5.jpg?nolink|}}
  
 Clicking '​Finish'​ creates and opens the new application in VisionX for editing. Clicking '​Finish'​ creates and opens the new application in VisionX for editing.
Line 383: Line 393:
 ==== Next Step - Create Your First Screen ==== ==== Next Step - Create Your First Screen ====
  
-The 'Next Steps' wizard opens automatically,​ which gUIdes ​you through creating your first screen.+The 'Next Steps' wizard opens automatically,​ which guides ​you through creating your first screen.
  
 Read more about creating a new screen - [[#​creating_screens|Creating Screens]] Read more about creating a new screen - [[#​creating_screens|Creating Screens]]
  
-[[images/​new-application-new-screen.jpg|{{:images/new-application-new-screen.jpg}}]]+{{:visionx:​documentation:​new-application-new-screen.jpg?nolink|}}
  
 ===== Editing Applications ===== ===== Editing Applications =====
Line 424: Line 434:
 In Step 1, the title, file name and description of the screen are entered. Note that the application description is entered as text in the specification document as well as the Java source code documentation. This is true for all description fields in VisionX. The description fields should therefore be completed carefully, to create adequate documentation for the application. In Step 1, the title, file name and description of the screen are entered. Note that the application description is entered as text in the specification document as well as the Java source code documentation. This is true for all description fields in VisionX. The description fields should therefore be completed carefully, to create adequate documentation for the application.
  
-More detail see [[#​documentation|Documentation]].+More detail see [[#​documentation|Documentation]].
  
-[[images/​new-screen-step-1.jpg|{{:images/new-screen-step-1.jpg}}]]+{{:visionx:​documentation:​new-screen-step-1.jpg?nolink|}}
  
 ==== Choose Layout ==== ==== Choose Layout ====
Line 452: Line 462:
 For the web and mobile layouts, we can choose whether detail tables should be displayed as component tables or as regular tables. For the web and mobile layouts, we can choose whether detail tables should be displayed as component tables or as regular tables.
  
-[[images/​new-screen-step-2.jpg|{{:images/new-screen-step-2.jpg}}]]+{{:visionx:​documentation:​new-screen-step-2.jpg?nolink|}}
  
 **Preview** **Preview**
Line 460: Line 470:
 //**Note - This preview is fully functional. Therefore you can click buttons, enter, change and delete data.**// //**Note - This preview is fully functional. Therefore you can click buttons, enter, change and delete data.**//
  
-[[images/​new-screen-step-2-preview.jpg|{{:images/new-screen-step-2-preview.jpg}}]]+{{:visionx:​documentation:​new-screen-step-2-preview.jpg?nolink|}}
  
 ==== Select Datasource ==== ==== Select Datasource ====
Line 472: Line 482:
   * Use a REST service //(REST Add-on has to be installed - [REST])//   * Use a REST service //(REST Add-on has to be installed - [REST])//
  
-[[images/​new-screen-step-3.jpg|{{:images/new-screen-step-3.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3.jpg?nolink|}}
  
 === Create New Database Table(s) === === Create New Database Table(s) ===
Line 478: Line 488:
 New database tables can easily be created at any time. To create a new database table when adding a new screen, select '​Define the information you want to manage'​. New database tables can easily be created at any time. To create a new database table when adding a new screen, select '​Define the information you want to manage'​.
  
-[[images/​new-screen-step-3-new-table-1.jpg|{{:images/new-screen-step-3-new-table-1.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-new-table-1.jpg?nolink|}}
  
 In the next wizard step, the table name and structure is defined. In the next wizard step, the table name and structure is defined.
Line 501: Line 511:
 In the generated screen the labels are used for the editor labels and table headers. In the generated screen the labels are used for the editor labels and table headers.
  
-[[images/​new-screen-step-3-new-table-2.jpg|{{:images/new-screen-step-3-new-table-2.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-new-table-2.jpg?nolink|}}
  
 VisionX attempts to determine the data type based on the label. The data type / domain can then be edited in the '​Datatype Name' column if necessary. In this example, we will change the data type for the '​Completed'​ column to '​Yes/​No',​ which will make the corresponding editor a checkbox editor on the screen. VisionX attempts to determine the data type based on the label. The data type / domain can then be edited in the '​Datatype Name' column if necessary. In this example, we will change the data type for the '​Completed'​ column to '​Yes/​No',​ which will make the corresponding editor a checkbox editor on the screen.
  
-[[images/​new-screen-step-3-new-table-3.jpg|{{:images/new-screen-step-3-new-table-3.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-new-table-3.jpg?nolink|}}
  
 In the data type column is actually defined, the data type and how it is displayed or edited in the screen. This combination is also named a domain. In the data type column is actually defined, the data type and how it is displayed or edited in the screen. This combination is also named a domain.
Line 544: Line 554:
 More details to add new domains you will find in chapter - [[#​domains|Domains]]. More details to add new domains you will find in chapter - [[#​domains|Domains]].
  
-[[images/​new-screen-step-3-new-table-4.jpg|{{:images/new-screen-step-3-new-table-4.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-new-table-4.jpg?nolink|}}
  
-The '​Mandatory'​ check box defines whether a value is reqUIred ​for the column. For this example, we will make the project name and number mandatory.+The '​Mandatory'​ check box defines whether a value is required ​for the column. For this example, we will make the project name and number mandatory.
  
 After defining the table name and its columns, we can also define comboboxes / drop-down lists and subtables. After defining the table name and its columns, we can also define comboboxes / drop-down lists and subtables.
Line 562: Line 572:
 Select 'Take data from a Spreadsheet'​ and click '​Next'​. Select 'Take data from a Spreadsheet'​ and click '​Next'​.
  
-[[images/​new-screen-step-3-excel-1.jpg|{{:images/new-screen-step-3-excel-1.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-excel-1.jpg?nolink|}}
  
 Click on the 'Load File' button to upload the file. Click on the 'Load File' button to upload the file.
  
-[[images/​new-screen-step-3-excel-2.jpg|{{:images/new-screen-step-3-excel-2.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-excel-2.jpg?nolink|}}
  
 Alternatively,​ any table from Excel or Word can be copied to the clipboard and then pasted into the wizard'​s text field. Alternatively,​ any table from Excel or Word can be copied to the clipboard and then pasted into the wizard'​s text field.
  
-[[images/​new-screen-step-3-excel-3.jpg|{{:images/new-screen-step-3-excel-3.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-excel-3.jpg?nolink|}}
  
 //**Please note that only structured tables can be imported. Accurate recognition of a collection of data with varying amounts of columns per row cannot be guaranteed. Therefore, every table should consist of a fixed number of columns with appropriate values in every row and column. Columns can also remain empty.**// //**Please note that only structured tables can be imported. Accurate recognition of a collection of data with varying amounts of columns per row cannot be guaranteed. Therefore, every table should consist of a fixed number of columns with appropriate values in every row and column. Columns can also remain empty.**//
Line 582: Line 592:
 The '​Dropdown value threshold'​ defines how many times the same value must appear before the column is recognized as a dropdown list. '​Dropdown grouping'​ attempts to group similar dropdown lists (in the entire Excel/CSV table) into a single list (e.g., if multiple columns contain salutations). The '​Dropdown value threshold'​ defines how many times the same value must appear before the column is recognized as a dropdown list. '​Dropdown grouping'​ attempts to group similar dropdown lists (in the entire Excel/CSV table) into a single list (e.g., if multiple columns contain salutations).
  
-[[images/​new-screen-step-3-excel-4.jpg|{{:images/new-screen-step-3-excel-4.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-excel-4.jpg?nolink|}}
  
 The next step shows the table structure for the database table. On this screen, the description,​ content, and view can be edited, fields can be added/​deleted,​ and the order of the fields can be changed. The next step shows the table structure for the database table. On this screen, the description,​ content, and view can be edited, fields can be added/​deleted,​ and the order of the fields can be changed.
Line 590: Line 600:
 The functionality here is the same as in the section [[#​create_new_database_table(s)|Create New Database Table(s)]]. The functionality here is the same as in the section [[#​create_new_database_table(s)|Create New Database Table(s)]].
  
-[[images/​new-screen-step-3-excel-5.jpg|{{:images/new-screen-step-3-excel-5.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-excel-5.jpg?nolink|}}
  
 === Use Existing Database Table(s) === === Use Existing Database Table(s) ===
Line 596: Line 606:
 To use an existing database table, select 'Use existing data from database tables'​. To use an existing database table, select 'Use existing data from database tables'​.
  
-[[images/​new-screen-step-3-existing-table-1.jpg|{{:images/new-screen-step-3-existing-table-1.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-existing-table-1.jpg?nolink|}}
  
 The next step is to choose a database. The next step is to choose a database.
Line 608: Line 618:
 See [[#​datasources|Datasources]] for more details to define new datasources. See [[#​datasources|Datasources]] for more details to define new datasources.
  
-[[images/​new-screen-existing-datasource.jpg|{{:images/new-screen-existing-datasource.jpg}}]]+{{:visionx:​documentation:​new-screen-existing-datasource.jpg?nolink|}}
  
 In the next step, a table can be selected from the dropdown in the '​Label'​ column. In the next step, a table can be selected from the dropdown in the '​Label'​ column.
Line 614: Line 624:
 **Double click in the field to open the dropdown!** **Double click in the field to open the dropdown!**
  
-[[images/​new-screen-step-3-existing-table-3.jpg|{{:images/new-screen-step-3-existing-table-3.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-existing-table-3.jpg?nolink|}}
  
-After selecting a table, all columns of the table will be displayed. VisionX determines a sUItable ​label for each column. This field labels for the screen can be edited. Furthermore,​ the data type / domain, as well as whether the column is mandatory or not is displayed.+After selecting a table, all columns of the table will be displayed. VisionX determines a suitable ​label for each column. This field labels for the screen can be edited. Furthermore,​ the data type / domain, as well as whether the column is mandatory or not is displayed.
  
 In the column '​Editor'​ you can choose if an editor element will be created when creating a new screen. In the column '​Editor'​ you can choose if an editor element will be created when creating a new screen.
  
-[[images/​new-screen-step-3-existing-table-4.jpg|{{:images/new-screen-step-3-existing-table-4.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-existing-table-4.jpg?nolink|}}
  
 If you click on the '​More'​ button in the upper right corner, you can see more details about the selected table. If you click on the '​More'​ button in the upper right corner, you can see more details about the selected table.
  
-[[images/​new-screen-step-3-existing-table-5.jpg|{{:images/new-screen-step-3-existing-table-5.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-existing-table-5.jpg?nolink|}}
  
 The column names of the table are displayed. E.g.: INVOICE_NUMBER. Furthermore the primary key columns / ID columns are displayed. The column names of the table are displayed. E.g.: INVOICE_NUMBER. Furthermore the primary key columns / ID columns are displayed.
Line 632: Line 642:
 If you click on '​Use',​ the subtable will be added as detail to the Invoice table. This way all Invoice Items will be displayed for each Invoice. A so called master/​detail relation will be added. If you click on '​Use',​ the subtable will be added as detail to the Invoice table. This way all Invoice Items will be displayed for each Invoice. A so called master/​detail relation will be added.
  
-[[images/​new-screen-step-3-existing-table-6.jpg|{{:images/new-screen-step-3-existing-table-6.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-existing-table-6.jpg?nolink|}}
  
 After you click '​Finsh'​ the screen with the selected tables will be created. After you click '​Finsh'​ the screen with the selected tables will be created.
Line 640: Line 650:
 Click on the '​Design'​ button on the top right to start editing a screen in the [[#​user_interface_designer|User Interface Designer]]. Click on the '​Design'​ button on the top right to start editing a screen in the [[#​user_interface_designer|User Interface Designer]].
  
-[[images/​design-mode-1.png|{{:images/design-mode-1.png}}]]+{{:visionx:​documentation:​design-mode-1.png?nolink|}}
  
 ====== Data Model ====== ====== Data Model ======
Line 656: Line 666:
 New data models can be created during the generation of a screen (see also [[#​creating_screens|Creating Screens]]) or in the section 'New table' with the green add button during screen design. New data models can be created during the generation of a screen (see also [[#​creating_screens|Creating Screens]]) or in the section 'New table' with the green add button during screen design.
  
-[[images/​add-table.png|{{:images/add-table.png}}]]+{{:visionx:​documentation:​add-table.png?nolink|}}
  
 See also the following video: See also the following video:
Line 666: Line 676:
 Clicking on the pencil opens the 'Edit Data Object'​ wizard, which allows us to add, delete, or edit tables/​table columns. Clicking on the pencil opens the 'Edit Data Object'​ wizard, which allows us to add, delete, or edit tables/​table columns.
  
-[[images/​data-model-1.png|{{:images/data-model-1.png}}]]+{{:visionx:​documentation:​data-model-1.png?nolink|}}
  
-[[images/​data-model-2.png|{{:images/data-model-2.png}}]]+{{:visionx:​documentation:​data-model-2.png?nolink|}}
  
 With a click on the '​More'​ button, table and column details are displayed. With a click on the '​More'​ button, table and column details are displayed.
  
-[[images/​data-model-3.png|{{:images/data-model-3.png}}]]+{{:visionx:​documentation:​data-model-3.png?nolink|}}
  
 Labels of columns and changes in the '​Datatype Name' can be done without real changes to the database. Labels of columns and changes in the '​Datatype Name' can be done without real changes to the database.
Line 680: Line 690:
 If changes in the database are necessary (like add new columns, change precision/​scale,​ ...) you have to click '​Database changes'​ first. If changes in the database are necessary (like add new columns, change precision/​scale,​ ...) you have to click '​Database changes'​ first.
  
-[[images/​data-model-4.png|{{:images/data-model-4.png}}]]+{{:visionx:​documentation:​data-model-4.png?nolink|}}
  
 Now it is possible to edit, add or delete columns. Changes made in this wizard are not effective until the '​Finish'​ button is clicked and can be discarded using the '​Cancel'​ button. Now it is possible to edit, add or delete columns. Changes made in this wizard are not effective until the '​Finish'​ button is clicked and can be discarded using the '​Cancel'​ button.
Line 686: Line 696:
 New columns can be added or delete with the add or delete button. New columns can be added or delete with the add or delete button.
  
-[[images/​data-model-5.png|{{:images/data-model-5.png}}]]+{{:visionx:​documentation:​data-model-5.png?nolink|}}
  
 Deleting a table or table column means that the data in the table or column is also deleted! Deleting a table or table column means that the data in the table or column is also deleted!
Line 709: Line 719:
 Used references (like a used UI element in the screen) of changed columns are corrected automatically. For example if you delete a column from a table also the used UI editor in the screen is deleted. If the table is also used in other screens, you will have to do the correction manually. The tables with reference errors are marked with a red title in the data model section. Used references (like a used UI element in the screen) of changed columns are corrected automatically. For example if you delete a column from a table also the used UI editor in the screen is deleted. If the table is also used in other screens, you will have to do the correction manually. The tables with reference errors are marked with a red title in the data model section.
  
-[[images/​data-model-error-1.png|{{:images/data-model-error-1.png}}]]+{{:visionx:​documentation:​data-model-error-1.png?nolink|}}
  
 If you open the respective table in the edit mode and if you click '​Finish',​ it tries to delete these references to maintain an error-free screen. If you open the respective table in the edit mode and if you click '​Finish',​ it tries to delete these references to maintain an error-free screen.
  
-[[images/​data-model-error-2.png|{{:images/data-model-error-2.png}}]]+{{:visionx:​documentation:​data-model-error-2.png?nolink|}}
  
 See also the following videos: See also the following videos:
Line 728: Line 738:
 To create a combo box, select the field you want to change and click on the 'Make Combobox'​ button. We will do this for the '​Type'​ column in our example, so that the user can select from a list of project types. To create a combo box, select the field you want to change and click on the 'Make Combobox'​ button. We will do this for the '​Type'​ column in our example, so that the user can select from a list of project types.
  
-{{:images/new-screen-step-3-new-table-combobox-1.jpg}} {{:images/new-screen-step-3-new-table-combobox-2.jpg}}+{{:visionx:​documentation:​new-screen-step-3-new-table-combobox-1.jpg?nolink|}} {{:visionx:​documentation:​new-screen-step-3-new-table-combobox-2.jpg?nolink|}}
  
 VisionX always creates / uses a master data table for comboboxes. When you click 'Make Combobox',​ VisionX uses the column name as the table name for the newly created master data table. In addition, VisionX also creates a Foreign Key column and a Foreign Key in the current table. In our example we will create a master data table **'​Types'​** with a text column **'​Type'​** and an **'​ID'​**. In the **'​Projects'​** table just a reference column **'​TYPE_ID'​** (= Foreign Key) will be created. VisionX always creates / uses a master data table for comboboxes. When you click 'Make Combobox',​ VisionX uses the column name as the table name for the newly created master data table. In addition, VisionX also creates a Foreign Key column and a Foreign Key in the current table. In our example we will create a master data table **'​Types'​** with a text column **'​Type'​** and an **'​ID'​**. In the **'​Projects'​** table just a reference column **'​TYPE_ID'​** (= Foreign Key) will be created.
Line 736: Line 746:
 After you click '​Finish'​ you can see the result of the combobox in the web preview. After you click '​Finish'​ you can see the result of the combobox in the web preview.
  
-[[images/​combobox-live-preview-1.png|{{:images/combobox-live-preview-1.png}}]]+{{:visionx:​documentation:​combobox-live-preview-1.png?nolink|}}
  
 You can add new values to the master data table in the combo box, when you click the 'Edit Button'​. You can add new values to the master data table in the combo box, when you click the 'Edit Button'​.
  
-[[images/​combobox-live-preview-2.png|{{:images/combobox-live-preview-2.png}}]]+{{:visionx:​documentation:​combobox-live-preview-2.png?nolink|}}
  
 You can activate or deactivate the 'Edit Button'​ in the edit dialog of the combobox. You can activate or deactivate the 'Edit Button'​ in the edit dialog of the combobox.
  
-[[images/​combobox-live-preview-3.png|{{:images/combobox-live-preview-3.png}}]]+{{:visionx:​documentation:​combobox-live-preview-3.png?nolink|}}
  
 See also the following video: See also the following video:
Line 756: Line 766:
 In the following example we have a table **'​Projects'​** with a text column **'​Type'​** (Not a foreign key!). In the following example we have a table **'​Projects'​** with a text column **'​Type'​** (Not a foreign key!).
  
-[[images/​manual-combobox-1.png|{{:images/manual-combobox-1.png}}]]+{{:visionx:​documentation:​manual-combobox-1.png?nolink|}}
  
 With a click on the button **'​Define Combobox'​** you can select the table which should be joined and displayed as a combobox. With a click on the button **'​Define Combobox'​** you can select the table which should be joined and displayed as a combobox.
  
-[[images/​manual-combobox-2.png|{{:images/manual-combobox-2.png}}]]+{{:visionx:​documentation:​manual-combobox-2.png?nolink|}}
  
 Don't click '​Database changes'​ because otherwise it would create a reference in the table. Don't click '​Database changes'​ because otherwise it would create a reference in the table.
Line 766: Line 776:
 The data can be now selected from a combobox, to fill the text column '​type'​. The data can be now selected from a combobox, to fill the text column '​type'​.
  
-[[images/​manual-combobox-3.png|{{:images/manual-combobox-3.png}}]]+{{:visionx:​documentation:​manual-combobox-3.png?nolink|}}
  
 ==== 1:n Relationship:​ Sub - Table ==== ==== 1:n Relationship:​ Sub - Table ====
Line 776: Line 786:
 Let’s create a subtable for the '​Tasks'​ column, so that the user can add multiple tasks for each project: Let’s create a subtable for the '​Tasks'​ column, so that the user can add multiple tasks for each project:
  
-{{:images/new-screen-step-3-new-table-subtable-1.jpg}} {{:images/new-screen-step-3-new-table-subtable-2.jpg}}+{{:visionx:​documentation:​new-screen-step-3-new-table-subtable-1.jpg?nolink|}} {{:visionx:​documentation:​new-screen-step-3-new-table-subtable-2.jpg?nolink|}}
  
 Additional columns can be added to the detail table. They are shown indented below the detail table name. Additional columns can be added to the detail table. They are shown indented below the detail table name.
Line 782: Line 792:
 From a technical perspective,​ a foreign key and a foreign key table column are added to the detail table with reference to the master table. From a technical perspective,​ a foreign key and a foreign key table column are added to the detail table with reference to the master table.
  
-[[images/​new-screen-step-3-new-table-subtable-3.jpg|{{:images/new-screen-step-3-new-table-subtable-3.jpg}}]]+{{:visionx:​documentation:​new-screen-step-3-new-table-subtable-3.jpg?nolink|}}
  
 If you click on the '​More'​ button in the upper right corner, you can see more details about the table structure. If you click on the '​More'​ button in the upper right corner, you can see more details about the table structure.
Line 804: Line 814:
 Master detail relationships between two tables can be set in the edit dialog of the details table. Master detail relationships between two tables can be set in the edit dialog of the details table.
  
-[[images/​master-detail-1.png|{{:images/master-detail-1.png}}]]+{{:visionx:​documentation:​master-detail-1.png?nolink|}}
  
 This example will show all '​Tasks'​ which have the same project id in the column '​proj_id'​ as the selected project. This example will show all '​Tasks'​ which have the same project id in the column '​proj_id'​ as the selected project.
Line 810: Line 820:
 You can add now the sub - table '​Tasks'​ via drag and drop to the screen and display the result in the web preview. You can add now the sub - table '​Tasks'​ via drag and drop to the screen and display the result in the web preview.
  
-[[images/​sub-table-preview-1.png|{{:images/sub-table-preview-1.png}}]]+{{:visionx:​documentation:​sub-table-preview-1.png?nolink|}}
  
 ==== n:m Relationship:​ Intermediate - Table ==== ==== n:m Relationship:​ Intermediate - Table ====
Line 816: Line 826:
 An intermediate table is needed to cover n:m relationships. Let's create an intermediate table **'​ProjectTypes'​** to be able to assign **multiple** **'​Types'​** to a **'​Project'​**. An intermediate table is needed to cover n:m relationships. Let's create an intermediate table **'​ProjectTypes'​** to be able to assign **multiple** **'​Types'​** to a **'​Project'​**.
  
-[[images/​m_n_1.png|{{:images/m_n_1.png}}]]+{{:visionx:​documentation:​m_n_1.png?nolink|}}
  
 The table '​ProjectTypes'​ needs a foreign key reference to the table '​Type'​ and '​Projects'​. The table '​ProjectTypes'​ needs a foreign key reference to the table '​Type'​ and '​Projects'​.
Line 822: Line 832:
 This needed references can be created with a n:1 relation ship (see: [[#​n:​1_relationship:​_combobox/​drop-down_list|n:​1 Relationship:​ Combobox/​Drop-down List]]) to the table '​Projects'​ and '​Types'​. This needed references can be created with a n:1 relation ship (see: [[#​n:​1_relationship:​_combobox/​drop-down_list|n:​1 Relationship:​ Combobox/​Drop-down List]]) to the table '​Projects'​ and '​Types'​.
  
-[[images/​m_n_2.png|{{:images/m_n_2.png}}]]+{{:visionx:​documentation:​m_n_2.png?nolink|}}
  
 To get just the '​Types'​ to a selected '​Project'​ you have to set additionally the '​Projects'​ table as '​Master table' in the editing screen of the '​ProjectTypes'​ table. To get just the '​Types'​ to a selected '​Project'​ you have to set additionally the '​Projects'​ table as '​Master table' in the editing screen of the '​ProjectTypes'​ table.
  
-[[images/​m_n_3.png|{{:images/m_n_3.png}}]]+{{:visionx:​documentation:​m_n_3.png?nolink|}}
  
 The best UI element to allow such assignments,​ is a '​Assignment Table' (see [[#​ui_elements|UI Elements]]). Add an '​Assignment Table' via drag and drop to the screen, bind the table '​ProjectTypes'​ and display the result in the web preview. The best UI element to allow such assignments,​ is a '​Assignment Table' (see [[#​ui_elements|UI Elements]]). Add an '​Assignment Table' via drag and drop to the screen, bind the table '​ProjectTypes'​ and display the result in the web preview.
  
-[[images/​m_n_4.png|{{:images/m_n_4.png}}]]+{{:visionx:​documentation:​m_n_4.png?nolink|}}
  
 See also the following video: See also the following video:
Line 855: Line 865:
 To create and manipulate UI designs of screens you have to activate the **design mode** with a click on the button **'​Design'​** and deactivated using the '​Finish'​ button in the application'​s menu. To create and manipulate UI designs of screens you have to activate the **design mode** with a click on the button **'​Design'​** and deactivated using the '​Finish'​ button in the application'​s menu.
  
-[[images/​design-mode-1.png|{{:images/design-mode-1.png}}]]+{{:visionx:​documentation:​design-mode-1.png?nolink|}}
  
 The first step in the design mode is to open an existing screen or to create a new one (see [[#​creating_screens|Creating Screens]]). The first step in the design mode is to open an existing screen or to create a new one (see [[#​creating_screens|Creating Screens]]).
Line 861: Line 871:
 In design mode, all open screens can be edited. If no screen is displayed, you can select one of the already created screens or just click '​Create a new Application Screen'​ to open the wizard. In design mode, all open screens can be edited. If no screen is displayed, you can select one of the already created screens or just click '​Create a new Application Screen'​ to open the wizard.
  
-[[images/​design-mode-2.png|{{:images/design-mode-2.png}}]]+{{:visionx:​documentation:​design-mode-2.png?nolink|}}
  
 For more details see the video: For more details see the video:
Line 871: Line 881:
 The important sections in the design mode are the **'​Elements'​ section** in the left and the **'​Data Model' section** in the bottom. The important sections in the design mode are the **'​Elements'​ section** in the left and the **'​Data Model' section** in the bottom.
  
-[[images/​design-mode-3.png|{{:images/design-mode-3.png}}]]+{{:visionx:​documentation:​design-mode-3.png?nolink|}}
  
 UI elements can be moved onto the screen from the panel on the left side of the screen via drag and drop. Every actions can be reversed and redone using the '​Undo'​ and '​Redo'​ buttons on the toolbar. Changes in the UI designer are always saved immediately and are executed after the '​Finish'​ button is clicked in a wizard. UI elements can be moved onto the screen from the panel on the left side of the screen via drag and drop. Every actions can be reversed and redone using the '​Undo'​ and '​Redo'​ buttons on the toolbar. Changes in the UI designer are always saved immediately and are executed after the '​Finish'​ button is clicked in a wizard.
Line 879: Line 889:
 The center panel is used to edit the layout of the screen. Elements can be moved via drag and drop or adjusted in size. The center panel is used to edit the layout of the screen. Elements can be moved via drag and drop or adjusted in size.
  
-[[images/​UI-elements-1.png|{{:images/UI-elements-1.png}}]]+{{:visionx:​documentation:​ui-elements-1.png?nolink|}}
  
 When a UI element is selected, three small icons appear on the upper left corner of the element. The first is a trash icon to delete the element, the second takes us to the element’s source code in Eclipse (if the [[:​visionx:​eplug_guide|Eclipse plug-in]] has been activated for the project), and the third is a pencil to edit the element. Depending on the UI element type, various properties can be edited (e.g., font, color, orientation,​ picture, table column labels (F2/​Pencil),​ etc). See [[#​ui_elements|UI Elements]] for more details. When a UI element is selected, three small icons appear on the upper left corner of the element. The first is a trash icon to delete the element, the second takes us to the element’s source code in Eclipse (if the [[:​visionx:​eplug_guide|Eclipse plug-in]] has been activated for the project), and the third is a pencil to edit the element. Depending on the UI element type, various properties can be edited (e.g., font, color, orientation,​ picture, table column labels (F2/​Pencil),​ etc). See [[#​ui_elements|UI Elements]] for more details.
  
-[[images/​design-mode-4.png|{{:images/design-mode-4.png}}]]+{{:visionx:​documentation:​design-mode-4.png?nolink|}}
  
 In addition, depending on the UI Element, several events can be activated. For more details see [[#​actions_and_events|Actions And Events]]. In addition, depending on the UI Element, several events can be activated. For more details see [[#​actions_and_events|Actions And Events]].
Line 889: Line 899:
 When an element is selected, its name, type, and position in the GUI element hierarchy are displayed above the screen. The element path shows the hierarchy of the currently selected element. When an element is selected, its name, type, and position in the GUI element hierarchy are displayed above the screen. The element path shows the hierarchy of the currently selected element.
  
-[[images/​design-mode-5.png|{{:images/design-mode-5.png}}]]+{{:visionx:​documentation:​design-mode-5.png?nolink|}}
  
 ===== UI Elements ===== ===== UI Elements =====
Line 895: Line 905:
 UI elements can be moved via drag and drop to a screen. UI elements can be moved via drag and drop to a screen.
  
-[[images/​UI-elements-1.png|{{:images/UI-elements-1.png}}]]+{{:visionx:​documentation:​ui-elements-1.png?nolink|}}
  
-For a detailed description of all possible UI elements see: [[:visionx:home|UI Elements]]+For a detailed description of all available ​elements see: [[:visionx:uielements|UI Elements]]
  
 For more details see the videos: For more details see the videos:
Line 916: Line 926:
 This elements can be easily added via drag and drop to a screen. This elements can be easily added via drag and drop to a screen.
  
-[[images/​UI-elements-2.png|{{:images/UI-elements-2.png}}]]+{{:visionx:​documentation:​ui-elements-2.png?nolink|}}
  
 For more details see the video: For more details see the video:
Line 926: Line 936:
 You can drag the whole table from the data model section to the screen. You can drag the whole table from the data model section to the screen.
  
-[[images/​UI-elements-3.png|{{:images/UI-elements-3.png}}]]+{{:visionx:​documentation:​ui-elements-3.png?nolink|}}
  
 Properties to a table (like visible columns, column order, column labels, ...) can be set in the editing window from the table. Properties to a table (like visible columns, column order, column labels, ...) can be set in the editing window from the table.
  
-[[images/​UI-elements-4.png|{{:images/UI-elements-4.png}}]]+{{:visionx:​documentation:​ui-elements-4.png?nolink|}}
  
 ==== Detail Forms ==== ==== Detail Forms ====
Line 936: Line 946:
 To add all possible editors of a table together, you can drag and drop the form to a screen. To add all possible editors of a table together, you can drag and drop the form to a screen.
  
-[[images/​UI-elements-5.png|{{:images/UI-elements-5.png}}]]+{{:visionx:​documentation:​ui-elements-5.png?nolink|}}
  
 All editors are added to the screen in a group panel. All editors are added to the screen in a group panel.
  
-[[images/​UI-elements-6.png|{{:images/UI-elements-6.png}}]]+{{:visionx:​documentation:​ui-elements-6.png?nolink|}}
  
 You can also move the UI editors and labels separately via drag and drop to the screen. You can also move the UI editors and labels separately via drag and drop to the screen.
Line 952: Line 962:
 To add filters (like searchbars) to a screen, you can drag and drop the search element from the data model section in the bottom. To add filters (like searchbars) to a screen, you can drag and drop the search element from the data model section in the bottom.
  
-[[images/​UI-elements-7.png|{{:images/UI-elements-7.png}}]]+{{:visionx:​documentation:​ui-elements-7.png?nolink|}}
  
 In default the search element is a full text searchbar over all visible columns of the data model. In default the search element is a full text searchbar over all visible columns of the data model.
  
-[[images/​UI-elements-8.png|{{:images/UI-elements-8.png}}]]+{{:visionx:​documentation:​ui-elements-8.png?nolink|}}
  
 You can add additional search elements and define the search behavior for each element separately. You can add additional search elements and define the search behavior for each element separately.
  
-[[images/​UI-elements-10.png|{{:images/UI-elements-10.png}}]]+{{:visionx:​documentation:​ui-elements-10.png?nolink|}}
  
 The search criteria (Full text search, Like, Equals, Less, Less Equals, Greater, …) and the referred column can be changed in the edit window of the search element. The search criteria (Full text search, Like, Equals, Less, Less Equals, Greater, …) and the referred column can be changed in the edit window of the search element.
  
-[[images/​UI-elements-9.png|{{:images/UI-elements-9.png}}]]+{{:visionx:​documentation:​ui-elements-9.png?nolink|}}
  
 The following search criteria can be selected: The following search criteria can be selected:
Line 996: Line 1006:
 With clicks on the columns in the header of a table, you can define the sort criteria and sort direction. With clicks on the columns in the header of a table, you can define the sort criteria and sort direction.
  
-[[images/​UI-elements-11.png|{{:images/UI-elements-11.png}}]]+{{:visionx:​documentation:​ui-elements-11.png?nolink|}}
  
 With '​Ctrl'​ + mouse click it is possible to define a sort criteria over multiple columns. With '​Ctrl'​ + mouse click it is possible to define a sort criteria over multiple columns.
  
-[[images/​UI-elements-12.png|{{:images/UI-elements-12.png}}]]+{{:visionx:​documentation:​ui-elements-12.png?nolink|}}
  
 For more details see the video: For more details see the video:
Line 1010: Line 1020:
 Images related to a data set can be defined as separate column in the model. Images related to a data set can be defined as separate column in the model.
  
-[[images/​UI-elements-image-1.png|{{:images/UI-elements-image-1.png}}]]+{{:visionx:​documentation:​ui-elements-image-1.png?nolink|}}
  
 The image can be moved via drag and drop from the data model section in the bottom to the screen. The image can be moved via drag and drop from the data model section in the bottom to the screen.
  
-[[images/​UI-elements-image-2.png|{{:images/UI-elements-image-2.png}}]]+{{:visionx:​documentation:​ui-elements-image-2.png?nolink|}}
  
 For more details see the video: For more details see the video:
Line 1024: Line 1034:
 Layouts are used to position UI elements on a screen. Depending on the layout, the UI elements can be arranged differently. Layouts are used to position UI elements on a screen. Depending on the layout, the UI elements can be arranged differently.
  
-[[images/​layout-14.png|{{:images/layout-14.png}}]]+{{:visionx:​documentation:​layout-14.png?nolink|}}
  
 We support in VisionX three different layout types. We support in VisionX three different layout types.
Line 1040: Line 1050:
 A form layout is the most powerful layout in VisionX to define screen layouts. All elements are positioned on a grid of rows and columns similar to an excel raster. A form layout is the most powerful layout in VisionX to define screen layouts. All elements are positioned on a grid of rows and columns similar to an excel raster.
  
-[[images/​layout-3.png|{{:images/layout-3.png}}]]+{{:visionx:​documentation:​layout-3.png?nolink|}}
  
 A form layout is very flexible and the UI elements can be attached in any position or to the top, bottom, left and right margins. A form layout is very flexible and the UI elements can be attached in any position or to the top, bottom, left and right margins.
Line 1052: Line 1062:
 Elements can be moved via drag and drop between or beside already inserted elements. Elements can be moved via drag and drop between or beside already inserted elements.
  
-[[images/​layout-4.png|{{:images/layout-4.png}}]]+{{:visionx:​documentation:​layout-4.png?nolink|}}
  
 An element does not have to be placed exactly in a row or column. It can also stretch across multiple rows, columns, or both. This is done by selecting the element and pulling one of the edges until it is close to the next anchor line. After the element is released, it is spread across two or more columns. An element does not have to be placed exactly in a row or column. It can also stretch across multiple rows, columns, or both. This is done by selecting the element and pulling one of the edges until it is close to the next anchor line. After the element is released, it is spread across two or more columns.
  
-[[images/​layout-5.png|{{:images/layout-5.png}}]]+{{:visionx:​documentation:​layout-5.png?nolink|}}
  
 In addition, GUI elements can be attached to the edges of the screen by pulling the selected edge of the element close to the end of the screen and releasing. As a result, these elements are automatically resized when the screen size is increased or decreased. This layout mechanism ensures that screens are adjusted to the client'​s resolution, which is extremely beneficial in the case of differing screen resolutions or GUI technologies (web, mobile, desktop). In addition, GUI elements can be attached to the edges of the screen by pulling the selected edge of the element close to the end of the screen and releasing. As a result, these elements are automatically resized when the screen size is increased or decreased. This layout mechanism ensures that screens are adjusted to the client'​s resolution, which is extremely beneficial in the case of differing screen resolutions or GUI technologies (web, mobile, desktop).
Line 1064: Line 1074:
 If you drag the left or top triangle of a selected element the distance between the elements increases. The triangle then becomes turquoise. This means that it is no longer default, but has been changed manually. A double click on the anchor sets the default gap. If you drag the left or top triangle of a selected element the distance between the elements increases. The triangle then becomes turquoise. This means that it is no longer default, but has been changed manually. A double click on the anchor sets the default gap.
  
-[[images/​layout-6.png|{{:images/layout-6.png}}]]+{{:visionx:​documentation:​layout-6.png?nolink|}}
  
 If the right or bottom triangle is drawn, the element in the columng changes its size. The triangle then becomes turquoise again. A double click on the anchor sets the default width. If the right or bottom triangle is drawn, the element in the columng changes its size. The triangle then becomes turquoise again. A double click on the anchor sets the default width.
  
-[[images/​layout-7.png|{{:images/layout-7.png}}]]+{{:visionx:​documentation:​layout-7.png?nolink|}}
  
 ==== Grid Layout ==== ==== Grid Layout ====
Line 1074: Line 1084:
 A GridLayout divides the area into equal sized columns and rows. A GridLayout divides the area into equal sized columns and rows.
  
-[[images/​layout-8.png|{{:images/layout-8.png}}]]+{{:visionx:​documentation:​layout-8.png?nolink|}}
  
 You can configure the number of columns and rows of the grid layout in the edit window of the selected panel. You can configure the number of columns and rows of the grid layout in the edit window of the selected panel.
  
-[[images/​layout-9.png|{{:images/layout-9.png}}]]+{{:visionx:​documentation:​layout-9.png?nolink|}}
  
 GridLayouts are often used in dashboards. You can create a '​Dashboard'​ screen easily in the 'New Screen Wizard'​ (see [[#​creating_screens|Creating Screens]]) when you select the '​Dashboard'​ as layout. GridLayouts are often used in dashboards. You can create a '​Dashboard'​ screen easily in the 'New Screen Wizard'​ (see [[#​creating_screens|Creating Screens]]) when you select the '​Dashboard'​ as layout.
  
-[[images/​layout-16.png|{{:images/layout-16.png}}]]+{{:visionx:​documentation:​layout-16.png?nolink|}}
  
-[[images/​layout-10.png|{{:images/layout-10.png}}]]+{{:visionx:​documentation:​layout-10.png?nolink|}}
  
 === Insert And Stretch Elements === === Insert And Stretch Elements ===
Line 1090: Line 1100:
 Elements can be added via drag and drop to the right row and column of the grid layout. Elements can be added via drag and drop to the right row and column of the grid layout.
  
-[[images/​layout-11.png|{{:images/layout-11.png}}]]+{{:visionx:​documentation:​layout-11.png?nolink|}}
  
 With the black indvaders of an element it can be horizontally or vertically stretched to a specific column or row in the layout. With the black indvaders of an element it can be horizontally or vertically stretched to a specific column or row in the layout.
  
-[[images/​layout-12.png|{{:images/layout-12.png}}]]+{{:visionx:​documentation:​layout-12.png?nolink|}}
  
-[[images/​layout-13.png|{{:images/layout-13.png}}]]+{{:visionx:​documentation:​layout-13.png?nolink|}}
  
 ==== Border Layout ==== ==== Border Layout ====
Line 1102: Line 1112:
 A BorderLayout is a very simple layout and the base of every screen and panel. A BorderLayout has the areas North, West, South, East and Center. A BorderLayout is a very simple layout and the base of every screen and panel. A BorderLayout has the areas North, West, South, East and Center.
  
-[[images/​layout-1.png|{{:images/layout-1.png}}]]+{{:visionx:​documentation:​layout-1.png?nolink|}}
  
 The advantage of a BorderLayout is that: The advantage of a BorderLayout is that:
Line 1113: Line 1123:
 With VisionX, the preferred size can be changed manually. Select the element. A number of black invaders appear. The invader down/center can now be dragged as the panel is in the north. (In the south, the attacker is the top/middle, the West right/​middle and the East left/​middle). With VisionX, the preferred size can be changed manually. Select the element. A number of black invaders appear. The invader down/center can now be dragged as the panel is in the north. (In the south, the attacker is the top/middle, the West right/​middle and the East left/​middle).
  
-[[images/​layout-2.png|{{:images/layout-2.png}}]]+{{:visionx:​documentation:​layout-2.png?nolink|}}
  
 A double-click on the respective invader deletes this manual preferred size and this will automatically be calculated again. A double-click on the respective invader deletes this manual preferred size and this will automatically be calculated again.
Line 1131: Line 1141:
 It is also possible to move elements (with all child elements) via drag and drop to the clipboard. It is also possible to move elements (with all child elements) via drag and drop to the clipboard.
  
-[[images/​clipboard.png|{{:images/clipboard.png}}]]+{{:visionx:​documentation:​clipboard.png?nolink|}}
  
 ===== Responsive Layout ===== ===== Responsive Layout =====
Line 1143: Line 1153:
 The default setting for the '​Responsive Layout'​ is active. The default setting for the '​Responsive Layout'​ is active.
  
-[[images/​UI-element-responsive-1.png|{{:images/UI-element-responsive-1.png}}]]+{{:visionx:​documentation:​ui-element-responsive-1.png?nolink|}}
  
 If '​Responsive Layout'​ is activated, the elements switch to a single column view when a defined screen size is reached. If '​Responsive Layout'​ is activated, the elements switch to a single column view when a defined screen size is reached.
  
-^**Responsive Layout activated** ​         ^**Responsive Layout deactivated** ​       +^**Responsive Layout activated** ​           ^**Responsive Layout deactivated** ​         
-|{{:images/UI-element-responsive-2.png}} ​ |{{:images/UI-element-responsive-3.png}} ​ |+|{{:visionx:​documentation:​ui-element-responsive-2.png}}  ​?nolink|{{:visionx:​documentation:​ui-element-responsive-3.png?nolink|}}  |
  
 ===== Screen properties ===== ===== Screen properties =====
Line 1154: Line 1164:
 Screen properties can be set when you select the window and click the edit button. Screen properties can be set when you select the window and click the edit button.
  
-[[images/​screen-1.png|{{:images/screen-1.png}}]]+{{:visionx:​documentation:​screen-1.png?nolink|}}
  
 <​html><​br /></​html>​ <​html><​br /></​html>​
Line 1163: Line 1173:
 |**Fixed size** ​                 |A fixed window size can be set over Width and Height. ​                                                                                      | |**Fixed size** ​                 |A fixed window size can be set over Width and Height. ​                                                                                      |
 |**Width and Height** ​           |The window size if you set the 'fixed size' property. ​                                                                                      | |**Width and Height** ​           |The window size if you set the 'fixed size' property. ​                                                                                      |
-|**Edit screen** ​                |Here you can set the title, file name and description of the screen. {{:images/screen-properties-1.png}} ​                                   |+|**Edit screen** ​                |Here you can set the title, file name and description of the screen. {{:visionx:​documentation:​screen-properties-1.png?nolink|}}                                  |
  
 ==== Delete A Screen ==== ==== Delete A Screen ====
Line 1169: Line 1179:
 You can delete a screen when you select the window and click the delete icon. You can delete a screen when you select the window and click the delete icon.
  
-[[images/​screen-2.png|{{:images/screen-2.png}}]]+{{:visionx:​documentation:​screen-2.png?nolink|}}
  
 Just the screen or the screen with database tables can be selected to delete. Just the screen or the screen with database tables can be selected to delete.
  
-[[images/​screen-3.png|{{:images/screen-3.png}}]]+{{:visionx:​documentation:​screen-3.png?nolink|}}
  
 If you want to delete also the database tables, you have to click the button '​Database changes'​ before you select the tables you want to delete. If you want to delete also the database tables, you have to click the button '​Database changes'​ before you select the tables you want to delete.
  
-[[images/​screen-4.png|{{:images/screen-4.png}}]]+{{:visionx:​documentation:​screen-4.png?nolink|}}
  
 For more details see the video: For more details see the video:
Line 1189: Line 1199:
 If you need a copy of your already added UI element (editor, panel, label,...) you can click '​Ctrl'​ + 'Drag the UI element'​. If you need a copy of your already added UI element (editor, panel, label,...) you can click '​Ctrl'​ + 'Drag the UI element'​.
  
-[[images/​UI-elements-copy.png|{{:images/UI-elements-copy.png}}]]+{{:visionx:​documentation:​ui-elements-copy.png?nolink|}}
  
 ====== Live Preview - Web, Mobile Desktop Apps ====== ====== Live Preview - Web, Mobile Desktop Apps ======
Line 1195: Line 1205:
 VisionX applications run on all devices and UI platforms (Desktop, Web, Mobile). Therefore, you can easily launch your first app as web or a native mobile app without any changes. To do this, click on the Preview button in the VisionX menu in the toolbar. VisionX applications run on all devices and UI platforms (Desktop, Web, Mobile). Therefore, you can easily launch your first app as web or a native mobile app without any changes. To do this, click on the Preview button in the VisionX menu in the toolbar.
  
-[[images/​live-preview-1.png|{{:images/live-preview-1.png}}]]+{{:visionx:​documentation:​live-preview-1.png?nolink|}}
  
 You can choose now between a live preview as '​Desktop application',​ 'Web application'​ or '​Mobile App'. You can choose now between a live preview as '​Desktop application',​ 'Web application'​ or '​Mobile App'.
  
-[[images/​live-preview-2.png|{{:images/live-preview-2.png}}]]+{{:visionx:​documentation:​live-preview-2.png?nolink|}}
  
 ===== One App For All ===== ===== One App For All =====
Line 1213: Line 1223:
 To preview the application as '​Desktop'​ you have to select '​Desktop application'​ and click '​Finish'​. To preview the application as '​Desktop'​ you have to select '​Desktop application'​ and click '​Finish'​.
  
-[[images/​live-preview-3.png|{{:images/live-preview-3.png}}]]+{{:visionx:​documentation:​live-preview-3.png?nolink|}}
  
 The UI technology behind a '​Desktop'​ application is 'Swing (Java)'​ The UI technology behind a '​Desktop'​ application is 'Swing (Java)'​
Line 1225: Line 1235:
 A preview as 'Web application in Browser'​ in the standard technology (Vaadin) will start the application in the browser. A preview as 'Web application in Browser'​ in the standard technology (Vaadin) will start the application in the browser.
  
-[[images/​live-preview-4.png|{{:images/live-preview-4.png}}]]+{{:visionx:​documentation:​live-preview-4.png?nolink|}}
  
 === Next Generation === === Next Generation ===
Line 1231: Line 1241:
 A preview as 'Web application in Browser'​ in the next generation technology (React) will start the application in the browser. A preview as 'Web application in Browser'​ in the next generation technology (React) will start the application in the browser.
  
-[[images/​live-preview-5.png|{{:images/live-preview-5.png}}]]+{{:visionx:​documentation:​live-preview-5.png?nolink|}}
  
 ==== Mobile ==== ==== Mobile ====
Line 1333: Line 1343:
 ====== User And Role Management ====== ====== User And Role Management ======
  
-Every application created with VisionX comes with a standard user management tool, which can be edited using the VisionX functions to meet specific ​reqUIrements. It can also be used to manage the application'​s users. The user management tool is part of the application and can be used without VisionX.+Every application created with VisionX comes with a standard user management tool, which can be edited using the VisionX functions to meet specific ​requirements. It can also be used to manage the application'​s users. The user management tool is part of the application and can be used without VisionX.
  
 By default, the user management tool is located in the '​Admin'​ menu. By default, the user management tool is located in the '​Admin'​ menu.
Line 1369: Line 1379:
 ===== Hide Data For Curtain Roles ===== ===== Hide Data For Curtain Roles =====
  
-If you want to hide data for curtain roles, you have to use filters ​((see [[#​filter|Filter]])) and set the search value for the filters depending on the role.+If you want to hide data for curtain roles, you have to use filters (see [[#​filter|Filter]]) and set the search value for the filters depending on the role.
  
 For more details see the video: For more details see the video:
Line 1385: Line 1395:
 {{:​visionx:​documentation:​menu-2.png?​nolink|}} {{:​visionx:​documentation:​menu-2.png?​nolink|}}
  
-The menu title, and with it the name of the screen, can be changed in the panel on the right. If a toolbar title and icon are added, the menu entry is also displayed in the application'​s toolbar. A shortcut key can be defined to qUIckly ​open the menu items.+The menu title, and with it the name of the screen, can be changed in the panel on the right. If a toolbar title and icon are added, the menu entry is also displayed in the application'​s toolbar. A shortcut key can be defined to quickly ​open the menu items.
  
 To categorize screens which should be not visible in the menu, a menu entry with an empty name can be created. Move all screens which should be not visible in the menu to the empty entry. To categorize screens which should be not visible in the menu, a menu entry with an empty name can be created. Move all screens which should be not visible in the menu to the empty entry.
Line 1436: Line 1446:
 Role-specific functionality can also be managed on the screens directly, e.g., actions can be used to show/hide certain fields or buttons. For details see [[#​user_and_role_management|User and role management]]. Role-specific functionality can also be managed on the screens directly, e.g., actions can be used to show/hide certain fields or buttons. For details see [[#​user_and_role_management|User and role management]].
  
-The '​Datasources'​ tab shows all data sources that are used in the application. They can be edited on this tab if a database/​database user was changed or moved to a different server. '​Default'​ refers to the main database connection, which also contains the users, roles, screens, etc. that are reqUIred ​by VisionX. For details about datasources see [[#​administration|Administration]].+The '​Datasources'​ tab shows all data sources that are used in the application. They can be edited on this tab if a database/​database user was changed or moved to a different server. '​Default'​ refers to the main database connection, which also contains the users, roles, screens, etc. that are required ​by VisionX. For details about datasources see [[#​administration|Administration]].
  
 {{:​visionx:​documentation:​settings-7.png?​nolink|}} {{:​visionx:​documentation:​settings-7.png?​nolink|}}
Line 1900: Line 1910:
  
 For more details see the [[:​visionx:​addon_scheduler|Scheduler]] documentation. For more details see the [[:​visionx:​addon_scheduler|Scheduler]] documentation.
- 
-===== Audit Log ===== 
- 
-The Audit Log Add-on offers historization for database tables. Therefore, all data changes are completely logged according to auditability including time, user and the data that has been changed. 
- 
-For more details see the [[:​visionx:​addon_auditlog|Audit Log]] documentation. 
  
 ===== Audit Log ===== ===== Audit Log =====
Line 1935: Line 1939:
 The Single Sign On over Microsoft AD Add On enables authentication via Windows AD. For more information,​ please refer to the Add On documentation. The Single Sign On over Microsoft AD Add On enables authentication via Windows AD. For more information,​ please refer to the Add On documentation.
  
-===== CRUD REST =====+===== REST Services ​=====
  
 VisionX offers more than a simple REST integration of simple services. We also integrate other services as CRUD REST to access any REST service very easily - like tables. VisionX offers more than a simple REST integration of simple services. We also integrate other services as CRUD REST to access any REST service very easily - like tables.
  
-For more details see the [[:​visionx:​rest_services|Workflow Engine]] documentation.+For more details see the [[:​visionx:​rest_services|REST Services]] documentation.
  
  
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information