Trace:
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
visionx:documentation [2018/04/12 13:01] robot |
visionx:documentation [2022/06/02 06:32] (current) admin |
||
---|---|---|---|
Line 2: | Line 2: | ||
~~Title: VisionX Documentation~~ | ~~Title: VisionX Documentation~~ | ||
- | Version: 5.0 / 2018-04-12 | + | Version: 5.0 / 2022-06-01 |
====== Introduction ====== | ====== Introduction ====== | ||
- | VisionX is a tool for the efficient development of web-, mobile- and desktop applications. It focuses on database driven applications for businesses that facilitate data management and support processes. The resulting applications are based on open source frameworks such as JVx, Vaadin, Apache POI, iText and others. | + | This VisionX documentation explains all the features of VisionX and its Add ons. |
- | VisionX covers the entire application development process, which includes the data model design, the user interfaces, the business logic, the creation of reports, the import and export of data (EXCEL, CSV, XML), the access via web services and much more. | + | 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. | ||
This manual is divided into the following sections: | This manual is divided into the following sections: | ||
- | * Create/Edit Applications | + | * Main View / Administration |
- | * Create Application | + | * Creating And Editing Applications |
- | * Create Workscreen | + | * Data Model |
- | * GUI Designer | + | * User Interface Designer |
- | * GUI Elements/Properties | + | * Live Preview - Web, Mobile Desktop Apps |
- | * Menu | + | * Actions And Events |
- | * Administration of Users and Roles | + | * User And Role Management |
- | * Application Settings | + | * Menu |
- | * Specification and Data Model | + | * Settings |
- | * Create/Edit Reports | + | * Reports |
- | * Actions | + | * Style Your Application |
- | * Application - Live Preview | + | * Documentation |
- | * VisionX Administration | + | * Installation |
- | * Application Export/Import | + | * Add Ons |
- | * Application Installation | + | |
- | Additional information can be found in the following detail manuals: | + | More information you find at our [[:visionx:home|VisionX Documentation page]] |
- | * VisionX Actions.pdf | + | ===== Learning Material ===== |
- | * VisionX Installation Instructions.pdf | + | |
- | ====== Create/edit Applications ====== | + | To learn VisionX you have also the following different ways to start with it. |
- | This chapter describes the main VisionX functions that are used to create and edit applications. It provides an overview of VisionX and shows how to develop a first application. | + | For a quick overview: |
- | ===== Create an Application ===== | + | * Watch our [[https://visionx.sibvisions.com/explainer-videos/|Explainer videos]] |
+ | * Read the [[:visionx:getting_started|Getting started]] | ||
- | After starting VisionX, the user is taken to the application overview, in which all applications are shown. Depending on the user license, VisionX is delivered with a number of different sample applications. They can be used to understand the use of VisionX functions, or as a basis for new applications. | + | More documentaries to dive deeper: |
- | {{:visionx:documentation:new-application-step1.png?nolink|The main window of VisionX}} | + | * Do our step by step [[:visionx:home|Tutorials]] |
+ | * Visit our [[:visionx:home|Documentation page]] | ||
- | The small red "Delete" button on the bottom right is used to delete applications. | + | You did not find the right information or you want to talk to us right away: |
- | Clicking the green "Play" button opens an existing application for editing. All application related functions can be found there. They are explained in Chapter 2 - Create/Edit Applications. | + | * [[https://visionx.sibvisions.com/schedule-demo/|Book a demo session]], we are happy to help you with the first steps |
- | The green "Plus" button in the application list and the button "New Application" are used to create a new application. | + | ====== Main View / Administration ====== |
- | The following screen shots demonstrate the creation of a new application. | + | ===== Main View ===== |
- | {{:visionx:documentation:new-application-step2.png?nolink|Create an Application - Step 2 - Title}} | + | After starting VisionX you are in the main view. |
- | VisionX offers wizards for all functions, which allow for the step-by-step creation of applications, workscreens, etc. . Most wizards can be completed by clicking the "Finish" button without changing any additional settings, in which VisionX will use the default settings. | + | - The toolbar is located in the upper area. The buttons on the toolbar allow you to import, export or install an application. |
+ | - In the middle is the list of existing VisionX applications. | ||
+ | - In the lower area you can create a new application with new 'Custom Application'. | ||
+ | - To the right is the Ready Made Solution Store to install VisionX Add-ons or demo applications. | ||
- | In Step 2, the title, folder and description of the new application are added. It should be noted 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 and to maintain a specification document for software providers. | + | {{:visionx:documentation:visionx-overview.png?nolink|}} |
- | See: [[#create_specificationsdata_model_report|Create Specifications / Data Model Report]] | + | The first time you start VisionX, you will see several guides that help explain the first steps. |
- | {{:visionx:documentation:new-application-step3.png?nolink|Create an Application - Step 3 - Database}} | + | {{:visionx:documentation:visionx-guides.png?nolink|}} |
- | In Step 3, the database user (=Schema) is entered, which is used by VisionX to store tables and data. Either a new or an existing database user can be selected. The default setting is a new user with the name of the application as user name. A new database connection (=new entry in the list of available databases) can be created using the "New" button, so that additional databases can be used with VisionX. | + | You can show or hide them at any time in the top right corner of the toolbar. |
- | See: [[#visionx_administration|VisionX Administration]] | + | {{:visionx:documentation:visionx-guides-show.png?nolink|}} {{:visionx:documentation:visionx-guides-showed.png?nolink|}} |
- | {{:visionx:documentation:new-application-step4.png?nolink|Create an Application - Step 4 - Administrator User}} | + | ===== Ready Made Solutions Store ===== |
- | In Step 4, the administrator user is defined. This user is used to log in to the newly created application. Additional users for the new application can then be entered in VisionX. It should be noted that 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. | + | 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. |
- | See: [[#userrole_management|User / Role Management]] | + | {{:visionx:documentation:ready-made-solutions-store.png?nolink|}} |
- | Clicking "Finish" creates the new application and opens it in the application editor, where additional actions and functions are available to customize the application. | + | Click on the orange plus icon to install the add-on or demo application. In the installation wizard just click finish. |
- | {{:visionx:documentation:new-application-step5.png?nolink|Create an Application - Next Steps}} | + | The 'Go Back' button at the bottom of the screen will take you back to the main view. |
- | Using the "Next Steps" wizard shown above, the user can create a first workscreen for the application. | + | {{:visionx:documentation:ready-made-solutions-store-addons.jpg?nolink|}} |
- | ===== Create A Workscreen ===== | + | There are a lot of add ons available depending on your license: |
- | The "New Screen" wizard in the application's menu is used to create a new workscreen. | + | * REST |
+ | * Workflow | ||
+ | * CSV Import | ||
+ | * Query Editor | ||
+ | * Scheduler | ||
+ | * Audit log | ||
+ | * SSO Windows AD | ||
+ | * Filter and User Profiles | ||
+ | * and many more | ||
- | In Step 1, the title, file name and description of the workscreen are entered. It should be noted 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 and to maintain a specification document for software providers. | + | Read more about [[#add_ons|Add Ons]] |
- | See: [[#create_specificationsdata_model_report|Create Specifications / Data Model Report]] | + | ===== Toolbar ===== |
- | {{:visionx:documentation:new-workscreen-step1.png?nolink|Create Workscreen - Step 1 - Title}} | + | The toolbar is located in the upper area and consists of the following sections: |
- | {{:visionx:documentation:new-workscreen-step2.png?nolink|Create Workscreen - Step 2 - Choose Layout}} | + | * Main |
+ | * Tools | ||
+ | * Administration | ||
+ | * AddOns | ||
- | The workscreen layout is selected in Step 2. The following layouts are available: a table (workscreen with grids), a form (workscreen as form), or a combination of the two. An empty workscreen can also be chosen. | + | ==== Main ==== |
- | {{:visionx:documentation:new-workscreen-step3.png?nolink|Create Workscreen - Step 3 - Select Data Source}} | + | The main toolbar consists of the following menu items: |
- | In Step 3, the workscreen's data source is selected. | + | ^Setting ^Description ^ |
+ | |**Exit** |Closes the application | | ||
+ | |**Logout** |Logged out the current user | | ||
+ | |**Change password** |Change password of the current user | | ||
+ | |**Save** |Saves changes | | ||
+ | |**Reload** |Reloads the application | | ||
+ | |**About...** |Some information about VisionX, the system, log entries and about your license | | ||
+ | |**Documentation** |Here you get to the documentation homepage | | ||
+ | |||
+ | ==== Tools ==== | ||
+ | |||
+ | The tools section consists of the following menu items: | ||
+ | |||
+ | ^Setting ^Description ^ | ||
+ | |**User Management** |Manages the VisionX users<html><br></html>[[:visionx:documentation#visionx_user_management|Read more about the VisionX User Management]] | | ||
+ | |**Export** |Exporting an application<html><br></html>[[:visionx:documentation#exporting_an_application|Read more about Exporting an Application]] | | ||
+ | |**Import** |Importing an application<html><br></html>[[:visionx:documentation#importing_an_application|Read more about Importing an Application]] | | ||
+ | |**Live Preview** |Starts an application as web, desktop or native mobile App<html><br></html> [[:visionx:documentation#live_preview|Read more about the Live Preview]] | | ||
+ | |**Installation** |Installs an application in the VisionX.cloud, on premise or any other cloud<html><br></html> [[:visionx:documentation#application_installation|Read more about Installation]] | | ||
+ | |||
+ | ==== Administration ==== | ||
+ | |||
+ | The administration section consists of the following menu items: | ||
+ | |||
+ | ^Setting ^Description ^ | ||
+ | |**Admin Datasources** |Manages the VisionX admin datasources<html><br></html>[[:visionx:documentation#datasources|Read more about the Datasources]] | | ||
+ | |**Datasources** |Manages the VisionX user datasources<html><br></html>[[:visionx:documentation#datasources|Read more about the Datasources]] | | ||
+ | |**Domains** |Manages the VisionX Domains<html><br></html>[[:visionx:documentation#domains|Read more about the Domains]] | | ||
+ | |**Add-Ons** |Manages the VisionX Add-Ons<html><br></html>[[:visionx:documentation#add_ons|Read more about the Add-ons]] | | ||
+ | |||
+ | ==== Add-Ons ==== | ||
+ | |||
+ | In the Add-ons section of the toolbar there are more screens and functions depending on the Add-on. The description can be found in the add-ons section. | ||
+ | |||
+ | Read more about [[#add_ons|Add Ons]] | ||
+ | |||
+ | ===== VisionX User Management ===== | ||
+ | |||
+ | The VisionX user management scree can be accessed on the 'Tools' tab. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | **This screen is used to define the Java package structure which is used for Java code generation. If you use firstname.lastname@company.com as e-mail address for the admin user, then the Java source will be generated under com.company.applicationname.** | ||
+ | |||
+ | The users shown in this screen are the VisionX users and **NOT the users of the individual applications.** If you install VisionX locally, the user management has no relevance. | ||
+ | |||
+ | This screen is relevant if you additionally install the VisionX Enterprise / Universal Edition on an application server. In this case VisionX uses a central database to manage the users and the settings of VisionX. The settings include the Admin Datasources, User Datasources. and the Domains. In this case, all VisionX users have to be defined here. | ||
+ | |||
+ | VisionX has 2 roles: | ||
+ | |||
+ | * **Administrator**: To manage the VisionX users | ||
+ | * **User**: For the regular use of VisionX | ||
+ | |||
+ | ^Setting ^Description ^ | ||
+ | |**User Name** |Name of the user | | ||
+ | |**Active** |Sets the user to active or inactive. User cannot be used until activation. | | ||
+ | |**Password** |Password for the user. | | ||
+ | |**Password expired** |User will be asked to change his password after the first login. | | ||
+ | |**E-Mail** |**E-Mail of the user. The domain of the e-mail address is used for the naming of the Java packages. Eg. firstname.lastname@company.com -> com.company.applicationname** | | ||
+ | |**First name** |First name of the user | | ||
+ | |**Last name** |Last name of the user | | ||
+ | |**Phone** |Phone number of the user | | ||
+ | |**Fax** |Fax number of the user | | ||
+ | |||
+ | ===== Application Export / Import ===== | ||
+ | |||
+ | Applications can be exported and imported using the 'Export' and 'Import' functions on the 'Tools' tab. This feature is used to create backups of applications, share applications with other users, our consulting or support team. A further use case is to rename an application - during import there is a possibility to change the application name. | ||
+ | |||
+ | ==== Exporting An Application ==== | ||
+ | |||
+ | To export, we need to select the application and export type. | ||
+ | |||
+ | {{:visionx:documentation:export-app-1.jpg?nolink|}} | ||
The following options are available: | The following options are available: | ||
- | * Transfer data from an existing EXCEL or CSV file | + | - Complete: The database and the application, including all libraries, are exported. |
- | * Use existing database table(s) | + | - Update: The database and the application without the libraries are exported. **The file size is much smaller and can be easily sent by e-mail.** |
- | * Define new database table(s) | + | - Database: Only the database is exported. |
- | Hint: When you create your first workscreen, we recommend that you define a new database table. | + | The option 'Export Database Records' determines whether the tables' data is also exported. The option 'Export Database Objects' determines if the tables and views are exported. |
- | See: [[#create_new_database_table(s)|Create New Database Table(s)]] | + | Please note that during the database export, VisionX only exports the tables and views. An accurate export/import of the views is only provided for simple ANSI SQL conform views. Database specific and other objects are not considered during the export/import. |
- | ==== Existing Excel / CSV File ==== | + | The application export is provided as a .ZIP file. |
- | VisionX can import data from an existing excel spreadsheet or CSV file. Alternatively, a table from a spreadsheet or word processor can be copied to the clipboard and then pasted to the wizard's text field. | + | ==== Importing An Application ==== |
- | {{:visionx:documentation:new-workscreen-step4a1.png?nolink|Create Workscreen - Step 4a - Existing EXCEL /CSV File - Data Definition}} | + | 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. |
- | It should be noted that only structured tables can be transferred. The transfer 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. | + | {{:visionx:documentation:import-app-1.jpg?nolink|}} |
- | The next step shows how VisionX transfers the table. The data format can be chosen, just as it would in the CSV import function in excel. VisionX attempts to recognize the format automatically as much as possible. | + | The application can be imported as a new application or over an existing application. The latter option overwrites the existing application! |
- | The "Yes/No detection" option can be used to attempt to recognize Yes/No fields (= checkboxes). If this option is selected, columns containing Yes/No or true/false values are recognized as checkboxes. | + | 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. |
- | The "Dropdown detection" option is used to define columns as drop-down lists (combo boxes) if they contain multiple entries of the same value. E.g. Mr., Mrs. The "Dropdown value threshold" defines how many times the same value has to appear before the column is recognize as a drop-down list. "Dropdown grouping" attempts to group similar drop-down lists (in the entire EXCEL/CSV table) into a single list (e.g.: if multiple columns contain salutations). | + | {{:visionx:documentation:import-app-2.jpg?nolink|}} |
- | {{:visionx:documentation:new-workscreen-step4a2.png?nolink|Create Workscreen - Step 4a - Existing EXCEL /CSV File - Preview}} | + | 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 next step shows the table structure for the database table. On this screen, the description, content, view can be edited, fields can be added/deleted, and the order of the fields can be changed. The functionality here is the same as in section [[#create_new_database_table(s)|Create New Database Table(s)]]. | + | {{:visionx:documentation:import-app-3.jpg?nolink|}} |
- | {{:visionx:documentation:new-workscreen-step4a3.png?nolink|Create Workscreen - Step 4a - Existing EXCEL /CSV File - Data}} | + | In the 4th step you can specify how the database will be imported. |
- | ==== Existing Database Table(s) ==== | + | If you selected an existing database user during import, the following options are available. |
- | To use an existing database table, the first step is to select a database. | + | 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.** | ||
+ | |||
+ | 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.** | ||
+ | |||
+ | 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.** | ||
+ | |||
+ | {{: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 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. | ||
+ | |||
+ | {{:visionx:documentation:import-app-5.jpg?nolink|}} | ||
+ | |||
+ | ===== Datasources ===== | ||
+ | |||
+ | 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'). | ||
+ | |||
+ | 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. | ||
+ | |||
+ | 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 ==== | ||
+ | |||
+ | The admin data sources and user-defined data sources (menu item 'Datasources') for VisionX are managed in the 'Administration' section of the toolbar in the main view. | ||
+ | |||
+ | Both types of datasources can be configured in the same way. | ||
+ | |||
+ | {{: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). | ||
+ | |||
+ | In addition, a valid database username and password have to be entered. | ||
+ | |||
+ | The 'Test Connection' button is used to test the connection to the database. | ||
+ | |||
+ | ==== Use Datasources ==== | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{: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 third option, a user-defined data source can be selected, which is then used by VisionX for the new application. | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{: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]]). | ||
+ | |||
+ | ===== Domains ===== | ||
+ | |||
+ | Domains are used when creating and changing table columns. A domain is a data type and how it can be displayed or edited in a screen. | ||
+ | |||
+ | In this screen you can change existing domains or add new ones. | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{:visionx:documentation:domains.jpg?nolink|}} | ||
+ | |||
+ | ^Setting ^Description ^ | ||
+ | |**Name** |Name of the domain | | ||
+ | |**Standard** |Indicates if it is a standard domain | | ||
+ | |**Datatype** |Specifies which data type the table column will get. The choices are - Text, Number, Date/Time, Boolean, Binary. Binary is used for files or images. | | ||
+ | |**Image** |Image of the domain. **Its mandatory!** | | ||
+ | |**Celleditor** |The Celleditor defines how the table column can be displayed or edited in a screen. This is used in tables, editors and all other controls. <html><br></html>The following are available: Date & Time, Date & Time short, Date, Date short, Time, Yes/No, Textarea, Password, Image, Currency or 'Standard'. <html><br></html>**Yes/No** - shows a checkbox. <html><br></html>**Password** - shows * (stars) during typing. <html><br></html>**'Standard'** means VisionX automatically determines the editor based on the default data type to cell editor mappings. | | ||
+ | |**Text length** |The length of the text for the data type Text. | | ||
+ | |**Precision** |The length for the data type Number. This includes the pre-comma part and the post-comma part without period. <html><br></html>**Example: 100.00<html><br></html> If you want to store numbers up to 100 with 2 decimal places, then you need a precision of 5 and scale of 2.** | | ||
+ | |**Scale** |The length of the post-comma part for the data type Number. <html><br></html>**Example: 100.00<html><br></html> If you want to store numbers up to 100 with 2 decimal places, then you need a precision of 5 and scale of 2.** | | ||
+ | |**Signed** |Indicates whether negative numbers are possible. | | ||
+ | |**Default value** |Default value of the domain. Eg. 'N' for Checkboxes. That indicates, that the checkbox is not checked. | | ||
+ | |||
+ | **Celleditor** | ||
+ | |||
+ | You can define your own Celleditors in addition to the predefined ones, or use one of many celleditors from the JVx framework. | ||
+ | |||
+ | {{:visionx:documentation:domain-htmlcelleditor.jpg?nolink|}} | ||
+ | |||
+ | **Example** | ||
+ | |||
+ | Just enter ProjXUtil.HTML_EDITOR as Celleditor and you will get a HTML text editor. That's one of the Celleditors from the JVx framework. | ||
+ | |||
+ | Or you can define your own custom Util class and define a static constant with your celleditor. Make sure this class is add in Eclipse to your VisionX application. | ||
+ | |||
+ | [[:jvx:reference#celleditors|Read more about the JVx framework concepts and Celleditors]]. | ||
+ | |||
+ | ====== Creating And Editing Applications ====== | ||
+ | |||
+ | On the VisionX main view, we see a list of all applications. VisionX is installed with a demo application called 'Contacts'. | ||
+ | |||
+ | Clicking the green 'Play' button opens an existing application for editing. | ||
+ | |||
+ | The green '+' button in the application list or the 'Custom Application' button are used to create a new application. | ||
+ | |||
+ | The small red 'Delete' button on the bottom right is used to delete applications. | ||
+ | |||
+ | {{:visionx:documentation:applications.jpg?nolink|}} | ||
+ | |||
+ | ===== Creating An Application ===== | ||
+ | |||
+ | Clicking on the '+' button will open the new application wizard. In Step 1, the title, folder, and description of the new application are added. | ||
+ | |||
+ | 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 and to maintain a specification document. See [[#documentation|Documentation]] for more details on documenting applications. | ||
+ | |||
+ | **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.** | ||
+ | |||
+ | {{:visionx:documentation:new-application-step-1.jpg?nolink|}} | ||
+ | |||
+ | ==== Choose Database ==== | ||
+ | |||
+ | In Step 2, the database user is chosen, which is used for your new application to store tables and data. | ||
+ | |||
+ | <HTML><ol style="list-style-type: decimal;"></HTML> | ||
+ | <HTML><li></HTML><HTML><p></HTML>**New Database User** <html><br></html> The default setting is a new database user in the database VisionX. As user and password the application name is used.<HTML></p></HTML> | ||
+ | <HTML><p></HTML>**//Note -The VisionX database is a standard Postgres database that is embedded in VisionX so that you can immediately have a database for your applications without any further installation steps.//**<HTML></p></HTML><HTML></li></HTML> | ||
+ | <HTML><li></HTML><HTML><p></HTML>**Reuse an existing Database User** <html><br></html> A user can be selected from the list of available database users for the chosen database. This user is then utilized for the new application.<HTML></p></HTML><HTML></li></HTML> | ||
+ | <HTML><li></HTML><HTML><p></HTML>**User-defined database connection** <html><br></html> A user-defined database connection can be selected, which is then used by VisionX for the new application.<HTML></p></HTML><HTML></li></HTML><HTML></ol></HTML> | ||
+ | |||
+ | New database connections can be created using the 'New' button. We name this database connections data sources. For options one and two, the admin data source screen is opened, whereas the 'New' button next to the third option opens the screen for user-defined data sources. | ||
+ | |||
+ | See [[#datasources|Datasources]] for more details to define new datasources. | ||
+ | |||
+ | {{:visionx:documentation:new-application-step-2.jpg?nolink|}} | ||
+ | |||
+ | ==== Create Admin User ==== | ||
+ | |||
+ | In Step 3, the administrator user for your application is defined. | ||
+ | |||
+ | 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. | ||
+ | |||
+ | See [[#user_and_role_management|User And Role Management]] for more details. | ||
+ | |||
+ | {{:visionx:documentation:new-application-step-3.jpg?nolink|}} | ||
+ | |||
+ | ==== Choose Background Image ==== | ||
+ | |||
+ | Choose a background image or upload your own later. | ||
+ | |||
+ | {{:visionx:documentation:new-application-step-4.jpg?nolink|}} | ||
+ | |||
+ | ==== Choose Modules ==== | ||
+ | |||
+ | Choose the modules you need for your application. Modules are parts of add-ons. You can download new add-ons from Ready Made Solutions Store. | ||
+ | |||
+ | See [[#ready_made_solutions_store|Ready Made Solutions Store]] | ||
+ | |||
+ | {{:visionx:documentation:new-application-step-5.jpg?nolink|}} | ||
+ | |||
+ | Clicking 'Finish' creates and opens the new application in VisionX for editing. | ||
+ | |||
+ | ==== Next Step - Create 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]] | ||
+ | |||
+ | {{:visionx:documentation:new-application-new-screen.jpg?nolink|}} | ||
+ | |||
+ | ===== Editing Applications ===== | ||
+ | |||
+ | Let’s editing an existing application. We are going to use the 'Styled Invoice' application that you can download from the solutions store. See [[#ready_made_solutions_store|Ready Made Solutions Store]]. | ||
+ | |||
+ | Clicking on the application name will open it in VisionX for editing. | ||
+ | |||
+ | {{:visionx:documentation:styled-invoice-app.png?nolink|}} | ||
+ | |||
+ | {{:visionx:documentation:edit-application.jpg?nolink|}} | ||
+ | |||
+ | On the right side of the screen, there are a lot of options to edit the application: | ||
+ | |||
+ | ^Menu ^Description ^ | ||
+ | |**Design** |Edit a screen in the VisionX User Interface Designer. More detail see - [[#user_interface_designer|User Interface Designer]] | | ||
+ | |**New Screen** |Create a new screen. More detail see - [[#creating_screens|Creating Screens]] | | ||
+ | |**Report** |Create/edit reports. More detail see - [[#reports|Reports]] | | ||
+ | |**Menu** |Change the application menus and toolbars. More detail see - [[#menu|Menu]] | | ||
+ | |**Settings** |Change application settings for desktop/general, web, mobile and add-ons. More detail see - [[#settings|Settings]] | | ||
+ | |**Documentation** |Create application / REST Swagger documentation. More detail see - [[#documentation|Documentation]] | | ||
+ | |**Switch User** |Change the user to test screens from the perspective of different roles. | | ||
+ | |||
+ | Depending on the installed VisionX add-ons, you will find even more functions here. | ||
+ | |||
+ | To see a live preview of your application, click the 'Preview' button on the toolbar. The application will open in a browser, where you can log in and test the application (default credentials for the administrator user are username: admin/password: admin). | ||
+ | |||
+ | {{:visionx:documentation:styled-invoice-live-preview.png?nolink|}} | ||
+ | |||
+ | ===== Creating Screens ===== | ||
+ | |||
+ | The 'New Screen' wizard in the application's menu is used to create a new screen. | ||
+ | |||
+ | ==== Screen Infos ==== | ||
+ | |||
+ | 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]]. | ||
+ | |||
+ | {{:visionx:documentation:new-screen-step-1.jpg?nolink|}} | ||
+ | |||
+ | ==== Choose Layout ==== | ||
+ | |||
+ | In Step 2, the screen layout is selected. The following layouts are available: | ||
+ | |||
+ | * Table with detail form (split either horizontally or vertically) | ||
+ | * Table | ||
+ | * Form | ||
+ | * Dashboard | ||
+ | * Other (for an empty screen) | ||
+ | |||
+ | For each of the first three options, we can additionally choose between web, desktop, mobile or universal layouts | ||
+ | |||
+ | //**Note - Every VisionX application is a native mobile app, a responsive web app or a native desktop app without modification. Regardless of the layout chosen, all screens can be used on all devices - mobile, web, desktop. VisionX with its smart responsive design, transforms all screens automatically depending on the device and size.**// | ||
+ | |||
+ | //For more information see [[#responsive_design|Responsive design]].// | ||
+ | |||
+ | The difference between the web, desktop, mobile or universal layout is only in the default setting of the screen. This can be changed later in VisionX User Interface Designer at any time. | ||
+ | |||
+ | Depending on the selected layout, the number of columns for the input fields/dropdown lists on the form can be selected. The default setting is two columns of input fields. | ||
+ | |||
+ | The location of the form field labels can also be selected (to the left of the input field or above it). | ||
+ | |||
+ | For the web and mobile layouts, we can choose whether detail tables should be displayed as component tables or as regular tables. | ||
+ | |||
+ | {{:visionx:documentation:new-screen-step-2.jpg?nolink|}} | ||
+ | |||
+ | **Preview** | ||
+ | |||
+ | When you click on the Preview button, the screen with the selected layout is opened in a live preview for viewing. In this live preview you can change the environment and size to test the behavior of the screen. | ||
+ | |||
+ | //**Note - This preview is fully functional. Therefore you can click buttons, enter, change and delete data.**// | ||
+ | |||
+ | {{:visionx:documentation:new-screen-step-2-preview.jpg?nolink|}} | ||
+ | |||
+ | ==== Select Datasource ==== | ||
+ | |||
+ | In Step 3, the screen's data source is selected. The following options are available: | ||
+ | |||
+ | * Import an Excel file in database table(s) | ||
+ | * Use existing database table(s) | ||
+ | * Create new database table(s) | ||
+ | * Use a custom query //(Query Editor Add-on has to be installed - [[#query_editor|Query Editor]])// | ||
+ | * Use a REST service //(REST Add-on has to be installed - [REST])// | ||
- | {{:visionx:documentation:new-workscreen-step4b1.png?nolink|Create Workscreen - Step 4b - Existing Database(s) - Select Database}} | + | {{:visionx:documentation:new-screen-step-3.jpg?nolink|}} |
- | In the next step a table can be selected. VisionX analyzes the data model and includes up to 5 detail tables with the selected master table. | + | === Create New Database Table(s) === |
- | {{:visionx:documentation:new-workscreen-step4b2.png?nolink|Create Workscreen - Step 4b - Existing Database Tables(s) - Data/Information}} | + | 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'. |
- | This step shows the table structure for the master and detail database tables. Additional information can be found in section [[#create_new_database_table(s)|Create New Database Table(s)]]. | + | {{:visionx:documentation:new-screen-step-3-new-table-1.jpg?nolink|}} |
- | The field labels for the workscreen can also be edited in this step. In addition, detail tables can be removed. Please note that removing a detail table in this wizard does NOT delete the detail table from the database, it merely ignores the detail table for the purpose of the creating the workscreen. | + | In the next wizard step, the table name and structure is defined. |
- | ==== Create New Database Table(s) ==== | + | Double-click in the first row on the Label column to change the table name. The default setting is the screen name. |
- | New database tables can easily be created at any time. In the next wizard step, the structure is defined in a table. | + | Then simply enter the field names you want to use in the screen into the Label column. |
- | To do this, simply enter the column names in the first column (= labels). E.g.: | + | Let’s define a simple table for a project management application as an example, with the following: |
* Name | * Name | ||
* Description | * Description | ||
* Project Number | * Project Number | ||
+ | * Type (Drop-down List) | ||
* From Date | * From Date | ||
* To Date | * To Date | ||
- | * Completed Check | + | * Completed – Yes/No (Checkbox) |
- | * Select Table | + | * Tasks (Subtable) |
- | The labels are used as column names in the database table and as labels/headers for table columns and editors in the workscreen (column names are edited by VisionX to conform to ANSI SQL standards - no spaces/special characters). | + | The entered labels are used as column names in the database table. Column names are automatically adjusted to database conform column names. (Spaces converted to underscores, special characters removed, reserved key words renamed) |
- | VisionX attempts to determine the data type/content based on the label. It can then be edited in the "Datatype Name" column if necessary. | + | In the generated screen the labels are used for the editor labels and table headers. |
- | {{:visionx:documentation:new-workscreen-step4c1.png?nolink|Create Workscreen - Step 4c - Create New Database Table(s) - Data/Information}} | + | {{:visionx:documentation:new-screen-step-3-new-table-2.jpg?nolink|}} |
- | The table name can also be changed. The default setting is the workscreen name. | + | 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. |
- | The "Mandatory" check box defines whether a value is required for the column. | + | {{:visionx:documentation:new-screen-step-3-new-table-3.jpg?nolink|}} |
- | When a new column is added, it has the type of an Input Field by default. The column can be transformed into two other types: | + | 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. |
- | <HTML><ul></HTML> | + | The following are available: |
- | <HTML><li></HTML><HTML><p></HTML>Combobox<HTML></p></HTML> | + | |
- | <HTML><p></HTML>The column is displayed as a drop-down list (= combo box). Only values from the drop-down list can be entered. This list is created by adding a master data list with one column (same name as the combo box), which is used to manage the possible values. The "Existing database table(s)" option in the "New Workscreen" wizard can be used to create a master data list for this purpose. In the "Label" column, the master data list's name can be changed, or an existing master data list can be utilized (e.g. User).<HTML></p></HTML> | + | |
- | From a technical perspective, a foreign key and a foreign key table column are created in the master table with reference to the master data table. The master data list also receives a unique key via the value column (same name as the combo box), as well as a numerical primary key with the name "ID".<HTML></li></HTML> | + | |
- | <HTML><li></HTML><HTML><p></HTML>Subtable<HTML></p></HTML> | + | |
- | <HTML><p></HTML>With the "Table" option, a detail table is created instead of a table column. In this detail table, any number of detail records can be stored for each record in the master table (e.g.: a list of ToDo items for each project). See Create Workscreen - Step 4c - Create New Database Table(s) - Data/.<HTML></p></HTML><HTML></li></HTML><HTML></ul></HTML> | + | |
- | Additional columns can be added to the detail table. They are shown indented below the detail table name. | + | ^Domain ^data type ^ |
+ | |**Text short** |Text - Length 50 | | ||
+ | |**Text long** |Text - Length 200 | | ||
+ | |**Textarea** |Text - Length 2000 | | ||
+ | |**Textarea big** |Text - Length unlimited | | ||
+ | |**Yes/No** |Text - Length 1 | | ||
+ | |**Password** |Text - Length 50 | | ||
+ | |**Number** |Number - Unlimited precision | | ||
+ | |**Integer** |Number - Precision 28, Scale 0 | | ||
+ | |**Currency** |Number - Precision 28, Scale 2 | | ||
+ | |**Key** |Number - Precision 16, Scale 0 | | ||
+ | |**Date & Time** |Date/Time | | ||
+ | |**Date & Time short** |Date/Time | | ||
+ | |**Date** |Date/Time | | ||
+ | |**Date short** |Date/Time | | ||
+ | |**Time** |Date/Time | | ||
+ | |**File** |Binary | | ||
+ | |**Image** |Binary | | ||
- | 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. The detail table receives a numerical primary key with the name "ID". | + | **Precision** |
- | From a technical perspective, the master table also receives a numerical primary key. | + | The length for the data type Number. This includes the pre-comma part and the post-comma part without period. |
- | To keep VisionX simple, "ID" and "*_ID" are not shown on the workscreens. However, they can be accessed via actions or via the Java Source Code in a Java IDE. | + | **Scale** |
- | In Step 5, options for the workscreen layout can be defined. | + | The length of the post-comma part for the data type Number. |
- | {{:visionx:documentation:new-workscreen-step5.png?nolink|Create Workscreen - Step 5 - Layout Options}} | + | //Example: 100.00// |
- | Depending on the selected layout, the number of columns for the input fields/drop-down lists on the form can be selected. The default setting is 2 columns of input fields. Detail tables can be arranged using group panels or tab sets. In addition, for the table layout or the combined table/form layout the split orientation (horizontal or vertical) can be selected. | + | //If you want to store numbers up to 100 with 2 decimal places, then you need a precision of 5 and scale of 2.// |
- | ===== GUI Designer ===== | + | More details to add new domains you will find in chapter - [[#domains|Domains]]. |
- | Design mode is activated using the "Design" button in the application's menu. In design mode, all open workscreens can be edited. If no workscreen is open when design mode is activated, the GUI Designer opens a list of all available workscreens. | + | {{:visionx:documentation:new-screen-step-3-new-table-4.jpg?nolink|}} |
- | Design mode is closed using the "Finished" button in the application's menu. | + | 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. |
- | {{:visionx:documentation:gui-designer-design-mode.png?nolink|GUI Designer - Design Mode}} | + | After defining the table name and its columns, we can also define comboboxes / drop-down lists and subtables. |
- | GUI elements can be moved onto the workscreen from the panel on the left side of the screen via drag & drop. | + | How to create such complex related models see: |
- | Actions can be reversed and redone using the "Undo" and "Redo" buttons on the toolbar. It should be noted that changes in the GUI Designer are always saved immediately and are executed after the "Finish" button is clicked in a wizard. | + | * [[#n:1_relationship:_combobox/drop-down_list|n:1 Relationship: Combobox/Drop-down List]] |
+ | * [[#1:n_relationship:_sub_-_table|1:n Relationship: Sub - Table]] | ||
+ | * [[#n:m_relationship:_intermediate_-_table|n:m Relationship: Intermediate - Table]] | ||
- | The lower panel shows the data model that is currently used. It includes all tables that are used in the workscreen. This panel is used to create or integrate additional tables, edit existing tables, and to move data related elements such as input fields, drop-down lists or tables onto the workscreen via drag & drop. | + | === Import An Excel File In Database Table(s) === |
- | The center panel is used to edit the layout of the workscreen. Elements can be moved via drag & drop, or adjusted in size. Individual elements or entire areas can be copied by holding the <html><Ctrl></html> key while an element is dragged. | + | VisionX can import Excel sheets, CSV files into new database tables. This is the best option to start when there is already data available in Excel sheets. |
- | When a GUI element is selected, two small icons appear on the upper left corner of the element. The first is a trash bin, to delete the element, and the second is a pencil, to edit the element. Depending on the GUI element type, various properties can be edited (e.g.: font, color, orientation, picture, table column labels (F2/Pencil), etc). | + | Select 'Take data from a Spreadsheet' and click 'Next'. |
- | See: [[#gui_elements/properties|GUI Elements/Properties]] | + | {{:visionx:documentation:new-screen-step-3-excel-1.jpg?nolink|}} |
- | In addition, depending on the GUI Element, a number of events can be utilized. If the respective event occurs when the application is running, a specified action is executed. These actions can be defined and managed using the actions editor. | + | Click on the 'Load File' button to upload the file. |
- | See: [[#actions|Actions]] | + | {{:visionx:documentation:new-screen-step-3-excel-2.jpg?nolink|}} |
- | {{:visionx:documentation:gui-designer-properties.png?nolink|GUI Designer - Properties}} | + | Alternatively, any table from Excel or Word can be copied to the clipboard and then pasted into the wizard's text field. |
- | When an element is selected, its name, type and position in the GUI element hierarchy is displayed above the workscreen. In addition, all of the element's anchors are displayed, which can be moved using the triangular handles (top/bottom). | + | {{:visionx:documentation:new-screen-step-3-excel-3.jpg?nolink|}} |
- | VisionX forms are arranged in the commonly used form layout. All elements are positioned on a grid of rows and 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. In addition, GUI elements can be attached to the edges of the workscreen by pulling the selected edge of the element close to the end of the workscreen and releasing. As a result, these elements are automatically re-sized when the workscreen size is increased or decreased. This layout mechanism ensures that workscreens are adjusted to the client's resolution, which is extremely beneficial in the case of differing screen resolutions or GUI technologies (web, mobile, desktop). | + | //**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.**// |
- | {{:visionx:documentation:formlayout-anchors.png?nolink|Attaching GUI Element to Workscreen Edge using Anchors}} | + | The next step shows a preview of the data import. The following options can be selected. |
- | A clipboard is located in the lower left corner of the screen. It contains all deleted or copied elements. They can be pulled into any workscreen via drag & drop, which allows for simple and quick restructuring of workscreens. For example: In a first step all elements are deleted panel by panel to create space. Then the new group elements (e.g. tab sets) are placed on the workscreen and the original panels are replaced step by step. VisionX prevents the deletion of any elements that are used in an action. This ensures that none of the logic is lost. To delete such an element, first the business logic has to be adjusted and the references have to be deleted. | + | The 'Yes/No detection' option can be used to attempt to recognize Yes/No fields (checkboxes). If this option is selected, columns containing Yes/No, Y/N or true/false values are created as checkboxes. |
- | This method can also be used to copy parts of workscreens into other workscreens. | + | The 'Dropdown detection' option is used to define columns as dropdown lists (combo boxes) if they contain multiple entries of the same value (e.g., Mr., Mrs.). |
- | {{:visionx:documentation:gui-designer-data-fields.png?nolink|GUI Designer - Data Fields}} | + | 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 lower panel shows all the tables that are used in the workscreen. | + | {{:visionx:documentation:new-screen-step-3-excel-4.jpg?nolink|}} |
- | For each table, the following data related elements (highlighted in green) can be placed on the workscreen via drag & drop if they are not already used on the screen: | + | 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. |
- | * Table View | + | The data format can be chosen for each column, just as it would in the CSV import function in Excel. VisionX attempts to recognize the format automatically as much as possible. |
- | * Form A group box with all of the table's input fields and drop-down lists. | + | |
- | * Search Box (= Filter Editor) Search boxes can limit the amount of data displayed in a table. They allow the user to limit data in either all or selected table columns e.g.: full text search, smaller/greater/similar/... filter by project number, name/... | + | |
- | * All input fields/drop-down lists (= editors) not currently in use on the workscreen. The toolbar on the left of the lower panel also includes a button for the table documentation, where descriptions can be added for the table and each of its columns. The descriptions are stored in the database as table and column comments and are used for the specification and for the data model documentation. | + | |
- | The "Pencil" symbol is used to edit the data structure of the table and its detail tables. | + | The functionality here is the same as in the section [[#create_new_database_table(s)|Create New Database Table(s)]]. |
- | {{:visionx:documentation:gui-designer-edit-model.png?nolink|GUI Designer - Edit Data Model}} | + | {{:visionx:documentation:new-screen-step-3-excel-5.jpg?nolink|}} |
- | The "Edit Data Object" wizard allows the user to add, delete or edit tables/table columns. Changes made in this wizard are not effective until the "Finish" button is clicked, and can be discarded using the "Cancel" button. | + | === Use Existing Database Table(s) === |
- | If the description is changed, the respective table column is renamed. | + | To use an existing database table, select 'Use existing data from database tables'. |
- | If the data type (content) is changed, VisionX attempts to change the data type in the database. | + | {{:visionx:documentation:new-screen-step-3-existing-table-1.jpg?nolink|}} |
- | Depending on the data type and the database provider this is only possible to a limited extent. E.g.: a conversion from "text short" to "text long" is possible, but a change from "text short" to "number" is only allowed if the column only contains valid numbers or no values at all. | + | The next step is to choose a database. |
- | In addition, a table column can be changed to be a required field and conversely. Limitations similar to those for data type changes apply - the change to a required field is only possible if all columns contain values. | + | - **Use Application Database connection** <html><br></html> The application database connection is selected by default. This is the database connection that was chosen when the application was created. This is the 'default' data source shown under the 'Datasources' tab of the [[#application_settings|Application Settings]] menu. |
+ | - **Existing Database User** <html><br></html> A database user can be selected from the list of available database users for the chosen database. All tables and views available for this database user can be selected in the next step. | ||
+ | - **User-defined database connection** <html><br></html> A user-defined database connection can be selected. All tables and views available for this database user can be selected in the next step. | ||
+ | |||
+ | New database connections can be created using the 'New' button. We name this database connections data sources. For option 2) the admin data source screen is opened, whereas the 'New' button next to the third option opens the screen for user-defined data sources. | ||
+ | |||
+ | See [[#datasources|Datasources]] for more details to define new datasources. | ||
+ | |||
+ | {{:visionx:documentation:new-screen-existing-datasource.jpg?nolink|}} | ||
+ | |||
+ | In the next step, a table can be selected from the dropdown in the 'Label' column. | ||
+ | |||
+ | **Double click in the field to open the dropdown!** | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | In the column 'Editor' you can choose if an editor element will be created when creating a new screen. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | In the right area all possible subtables are displayed for the selected table. These are all tables which reference the selected table by foreign key. In our case this is the 'Invoice Item' table. | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{:visionx:documentation:new-screen-step-3-existing-table-6.jpg?nolink|}} | ||
+ | |||
+ | After you click 'Finsh' the screen with the selected tables will be created. | ||
+ | |||
+ | ===== Editing Screens ===== | ||
+ | |||
+ | Click on the 'Design' button on the top right to start editing a screen in the [[#user_interface_designer|User Interface Designer]]. | ||
+ | |||
+ | {{:visionx:documentation:design-mode-1.png?nolink|}} | ||
+ | |||
+ | ====== Data Model ====== | ||
+ | |||
+ | A data model is a table with rows and columns to hold the data. Data models can be created or updated any time. | ||
+ | |||
+ | ===== Basics ===== | ||
+ | |||
+ | A basic description how to define a table with columns and different datatypes you will find in [[#create_new_database_table(s)|Create New Database Table(s)]]. | ||
+ | |||
+ | The definition of a data type and how it can be displayed or edited in screens, can be defined with [[#domains|Domains]] | ||
+ | |||
+ | ==== Create Data Model ==== | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{:visionx:documentation:add-table.png?nolink|}} | ||
+ | |||
+ | See also the following video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/Mo5sfTbqruw?origin=https://visionx.sibvisions.com|How to create a data model]] | ||
+ | |||
+ | ==== Change Data Model ==== | ||
+ | |||
+ | Clicking on the pencil opens the 'Edit Data Object' wizard, which allows us to add, delete, or edit tables/table columns. | ||
+ | |||
+ | {{:visionx:documentation:data-model-1.png?nolink|}} | ||
+ | |||
+ | {{:visionx:documentation:data-model-2.png?nolink|}} | ||
+ | |||
+ | With a click on the 'More' button, table and column details are displayed. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | For example a change of the datatype 'Date & Time' to a 'Date' is just a change on the UI and not in the database. | ||
+ | |||
+ | If changes in the database are necessary (like add new columns, change precision/scale, ...) you have to click 'Database changes' first. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | New columns can be added or delete with the add or delete button. | ||
+ | |||
+ | {{: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! | ||
- | When columns are added, it should be noted that all existing records a populated with blank values. | + | When columns are added, all existing records are populated with blank values. |
- | Therefore a newly added column can initially not be a required field. The column can be changed to a required field only after values are added in the column for all rows. | + | Therefore, a newly added column can initially not be a required field. The column can be changed to a required field only after values are added in the column for all rows. |
- | All changes to the data model are made step by step. In case a database change is not possible, the remaining changes are not made. All data model transformations are completed in multiple steps. | + | You can change for each column: |
- | The original data is not deleted until all steps are successfully completed. The drop-down lists' original master data tables remain in the data model! If a column's data type cannot be changed, the original data type including all data is preserved. | + | ^Setting ^Description ^ |
+ | |**Label** |The label of the column which is displayed in the UI. | | ||
+ | |**Column Name** |The name of the column in the database table. | | ||
+ | |**Datatype Name** |The datatype of the column. For more details see [[#domains|Domains]] | | ||
+ | |**Mandatory** |If the column is a mandatory field. | | ||
+ | |**Datatype Details: Type** |The datat type in the database. For more details see [[#domains|Domains]] | | ||
+ | |**Datatype Details: Length** |The possible character length. For more details see [[#domains|Domains]] | | ||
+ | |**Datatype Details: Precision/Scale** |For number data types a precision and scale can be set. For more details see [[#domains|Domains]] | | ||
- | For tables or columns that are already used in actions, data-related GUI elements or other workscreens, please note that the references are NOT corrected automatically. If such references exist, they are displayed in the GUI Designer (design mode) in red. The "Edit Data Object" wizard for the respective table can be used to attempt to delete these references to maintain an error free workscreen. | + | All changes to the data model and related data base table are made step by step. In case a database change is not possible, the remaining changes are not made. The original data is not deleted until all steps are successfully completed. |
- | ==== GUI Elements/Properties ==== | + | 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. |
- | The following table shows all GUI elements and their properties that require explanation. In addition, all GUI element properties can be edit via Java code in a Java IDE, such as Eclipse. Additional information can be found in the documentation for the JVx Open Source framework on the internet. | + | {{:visionx:documentation:data-model-error-1.png?nolink|}} |
- | ^GUI Element ^Description ^ | + | 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. |
- | |Label |Label for input fields, etc. | | + | |
- | |Picture |Pictures can be added to the application using the picture library. A selection of images is included in VisionX. | | + | |
- | |Button\\ Toggle Button |Buttons usually trigger certain actions and can be used to display images and text. A Toggle Button is a button with two states (clicked, not clicked). | | + | |
- | |Radio Button\\ Check Box |Option button and check box for the selection of one or more values. | | + | |
- | |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 drop-down list. Only one value can be selected. This element allows for the effortless creation of data-related radio groups. | | + | |
- | |Field Validator |Field validators are status fields that show whether the field validation for an associated table column was successful or not (green checkmark or red "X").\\ \\ This GUI element has to be associated with a table column; the validation related to the column has to be created using the action editor.\\ \\ The "Automatic validation" option immediately performs the validation VisionX Documentation 23 when the field is exited (this is the default setting). Otherwise the validation has to be initiated using the "Are Validations Ok" condition in an action (e.g. upon click of a "Save" button on the form).\\ \\ When the "Hide until first validate" option is selected, the validation field's status is not displayed until the validation has been performed. Otherwise it is displayed at all times. | | + | |
- | |Validation Result |This element displays validation errors that resulted from failed field validations. The associated GUI element determines which field validations are considered. All field validations on the same Panel/Split or tab are considered. | | + | |
- | |Panel |A panel can contain other GUI elements or sub elements. Sub elements are arranged form oriented by rows and columns.\\ See: [[#gui_designer|GUI Designer]] | | + | |
- | |Group Panel |A group panel can contain other elements as sub elements. In addition, this element has a frame and a title. Sub elements are arranged form oriented by rows and columns.\\ See: [[#gui_designer|GUI Designer]] | | + | |
- | |Horizontal Split\\ Vertical Split |A split can contain exactly two elements as sub elements. The sub elements are separated horizontally or vertically by a moveable bar. | | + | |
- | |Tabset |A tab set can contain other elements as sub elements. Each sub element is displayed as a tab with a label. | | + | |
- | |Tree |One or more tables are displayed as trees. The used columns can be choosen. | | + | |
- | |Table |View A database table is displayed as a table including navigation containing New/Edit/Delete/CSV Export options.\\ \\ The column order, labels, and visible columns can be specified. An alternate column order and visibility can be specified for the display on mobile devices.\\ \\ In addition, the default sort setting can be determined via click (and Ctrl Shift + click) on the column headers. | | + | |
- | |Input Field\\ Dropdown List\\ Editor |A data-related table column is displayed as input field or drop-down list. | | + | |
- | |Search\\ (Filter Editor) |Search boxes can limit the number of results in a table. Either all columns or a selected number of columns can be restricted using the selected search criteria. e.g.: full text search, smaller/greater/similar/... e.g. search for project number, name, ... | | + | |
- | ===== Menu Management ===== | + | {{:visionx:documentation:data-model-error-2.png?nolink|}} |
- | The "Menu" dialogue in the application's menu is used to manage the menu. | + | See also the following videos: |
- | {{:visionx:documentation:menu-management.png?nolink|Menu Management}} | + | * [[https://www.youtube.com/embed/QgJnweks-1U?origin=https://visionx.sibvisions.com|How to add/remove fields]] |
+ | * [[https://www.youtube.com/embed/NfDi8unDTog?origin=https://visionx.sibvisions.com|How to change the data type length]] | ||
- | The menu management wizard is used to create new menus or sub-menus and to edit existing menus. Menu entries (workscreens) can be sorted or moved to different menus using the arrow buttons. | + | ===== Complex Data Models ===== |
- | The menu title, and with it the name of the workscreen, can be changed in the panel on the right. If a toolbar title and picture are added, the menu entry is also displayed in the application's toolbar. A hot key can be defined to quickly open the menu entry. | + | ==== n:1 Relationship: Combobox/Drop-down List ==== |
- | ===== User / Role Management ===== | + | To select values from a list, a combo box or drop-down list is needed. |
+ | |||
+ | 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. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | If you double-click in the label column of a combo box, you can also use any other existing table as a master data table from the selection list instead of a new master data table. In this case VisionX creates only one Foreign Key column and one Foreign Key in the current table. | ||
+ | |||
+ | After you click 'Finish' you can see the result of the combobox in the web preview. | ||
+ | |||
+ | {{: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'. | ||
+ | |||
+ | {{:visionx:documentation:combobox-live-preview-2.png?nolink|}} | ||
+ | |||
+ | You can activate or deactivate the 'Edit Button' in the edit dialog of the combobox. | ||
+ | |||
+ | {{:visionx:documentation:combobox-live-preview-3.png?nolink|}} | ||
+ | |||
+ | See also the following video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/arwbBbFf64k?origin=https://visionx.sibvisions.com|How to create a drop-down (n:1)]] | ||
+ | |||
+ | === Manual Combobox === | ||
+ | |||
+ | If you do not have a reference in your table (foreign key) you can join the needed data over a 'Manual Combobox'. | ||
+ | |||
+ | In the following example we have a table **'Projects'** with a text column **'Type'** (Not a foreign key!). | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{:visionx:documentation:manual-combobox-2.png?nolink|}} | ||
+ | |||
+ | Don't click 'Database changes' because otherwise it would create a reference in the table. | ||
+ | |||
+ | The data can be now selected from a combobox, to fill the text column 'type'. | ||
+ | |||
+ | {{:visionx:documentation:manual-combobox-3.png?nolink|}} | ||
+ | |||
+ | ==== 1:n Relationship: Sub - Table ==== | ||
+ | |||
+ | A 'sub table' maps a master detail relationship. For example if one project has multiple tasks assigned, the **'Tasks'** table is a **'sub table'** of the **'Projects'** table. | ||
+ | |||
+ | Using the **'Make subtable'** button, a detail table is created instead of a column. In this detail table, any number of detail records can be stored for each record in the master table. E.g., a list of task items for each project. | ||
+ | |||
+ | Let’s create a subtable for the 'Tasks' column, so that the user can add multiple tasks for each project: | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | In general all tables gets also a primary key and primary key column with the name 'ID'. | ||
+ | |||
+ | Foreign Key columns are named with the first 4 characters of the referencing table followed by _ID. In our case this is **PROJ_ID**. The Task table has a foreign key to the Projects table, so the first digits of the referring Projects table are used. | ||
+ | |||
+ | To keep VisionX simple, 'ID' and '*_ID' are not shown on the screens per default. In the VisioX User interface designer you can show this columns any time. | ||
+ | |||
+ | Click 'Finish' to finalize creating the screen. | ||
+ | |||
+ | See also the following video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/PLLIDAgC6U8?origin=https://visionx.sibvisions.com|How to create a relationship (1:n)]] | ||
+ | |||
+ | === Master - Detail Relationship === | ||
+ | |||
+ | To show just the items of the selected master row, we have to set a 'Master - Detail Relationship' between the m**aster table** (in our case **'Projects'**) and the **sub table** (in our case **'Tasks'**). | ||
+ | |||
+ | Master detail relationships between two tables can be set in the edit dialog of the details table. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | You can add now the sub - table 'Tasks' via drag and drop to the screen and display the result in the web preview. | ||
+ | |||
+ | {{:visionx:documentation:sub-table-preview-1.png?nolink|}} | ||
+ | |||
+ | ==== n:m Relationship: Intermediate - Table ==== | ||
+ | |||
+ | 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'**. | ||
+ | |||
+ | {{:visionx:documentation:m_n_1.png?nolink|}} | ||
+ | |||
+ | The table 'ProjectTypes' needs a foreign key reference to the table 'Type' and 'Projects'. | ||
+ | |||
+ | 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'. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{:visionx:documentation:m_n_4.png?nolink|}} | ||
+ | |||
+ | See also the following video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/Dnr_RObYByc?origin=https://visionx.sibvisions.com|How to create a m:n relationship]] | ||
+ | |||
+ | ===== EXCEL Import ===== | ||
+ | |||
+ | Data models can also be created on the base of existing CSV files ([[#import_an_excel_file_in_database_table(s)|Import an Excel file in database table(s)]]). | ||
+ | |||
+ | See also the following videos: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/F355lKHpIsA?origin=https://visionx.sibvisions.com|How to import data from an excel sheet]] | ||
+ | * [[https://www.youtube.com/embed/lHetzn9y6FA?origin=https://visionx.sibvisions.com|Special features for importing from an excel sheet]] | ||
+ | |||
+ | VisionX has also a specific CSV import Add On: [[#csv_import|CSV Import]] | ||
+ | |||
+ | ===== Existing Database Tables ===== | ||
+ | |||
+ | If you want to add existing database tables as models to your screen see: [[#use_existing_database_table(s)|Use Existing Database Table(s)]] | ||
+ | |||
+ | ====== User Interface Designer ====== | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{: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]]). | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{:visionx:documentation:design-mode-2.png?nolink|}} | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/22E6e__0xtk?origin=https://visionx.sibvisions.com|VisionX Designer Overview]] | ||
+ | |||
+ | ===== Overview ===== | ||
+ | |||
+ | The important sections in the design mode are the **'Elements' section** in the left and the **'Data Model' section** in the bottom. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | The lower panel shows the data model that is currently used. It includes all tables that are used in the screen. This panel is used to create or integrate additional tables, edit existing tables, and to move data related elements, such as input fields, dropdown lists, tables or data filter elements onto the screen via drag and drop. | ||
+ | |||
+ | The center panel is used to edit the layout of the screen. Elements can be moved via drag and drop or adjusted in size. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{: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]]. | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{:visionx:documentation:design-mode-5.png?nolink|}} | ||
+ | |||
+ | ===== UI Elements ===== | ||
+ | |||
+ | UI elements can be moved via drag and drop to a screen. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-1.png?nolink|}} | ||
+ | |||
+ | For a detailed description of all available elements see: [[:visionx:uielements|UI Elements]] | ||
+ | |||
+ | For more details see the videos: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/ojLO3F4O8-o?origin=https://visionx.sibvisions.com|Basic elemetns part I]] | ||
+ | * [[https://www.youtube.com/embed/FuQh-ksieiE?origin=https://visionx.sibvisions.com|Basic elemetns part II]] | ||
+ | * [[https://www.youtube.com/embed/Im7ZyM9aGyM?origin=https://visionx.sibvisions.com|Advanced Elements Part 1]] | ||
+ | * [[https://www.youtube.com/embed/bbFbRuGodMs?origin=https://visionx.sibvisions.com|Advanced Elements Part 2]] | ||
+ | * [[https://www.youtube.com/embed/J-3lTjeLNVI?origin=https://visionx.sibvisions.com|Advanced Elements Part 3]] | ||
+ | * [[https://www.youtube.com/embed/hvoo7eas0Uk?origin=https://visionx.sibvisions.com|How To Use An Editing Panel]] | ||
+ | |||
+ | ===== Data Model UI Elements ===== | ||
+ | |||
+ | The lower section shows all the tables that are used in the screen. | ||
+ | |||
+ | In this data model section you find all UI elements directly related to the model like **tables**, data **editors** and **filters**. | ||
+ | |||
+ | This elements can be easily added via drag and drop to a screen. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-2.png?nolink|}} | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/ClCs_nWWZ28?origin=https://visionx.sibvisions.com|How To Create A Screen With Data Elements]] | ||
+ | |||
+ | ==== Tables ==== | ||
+ | |||
+ | You can drag the whole table from the data model section to the screen. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-4.png?nolink|}} | ||
+ | |||
+ | ==== Detail Forms ==== | ||
+ | |||
+ | To add all possible editors of a table together, you can drag and drop the form to a screen. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-5.png?nolink|}} | ||
+ | |||
+ | All editors are added to the screen in a group panel. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-6.png?nolink|}} | ||
+ | |||
+ | You can also move the UI editors and labels separately via drag and drop to the screen. | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/15KZZOyKkaQ?origin=https://visionx.sibvisions.com|How To Add Tables, Detail Forms and Filters]] | ||
+ | |||
+ | ==== Filter ==== | ||
+ | |||
+ | To add filters (like searchbars) to a screen, you can drag and drop the search element from the data model section in the bottom. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-8.png?nolink|}} | ||
+ | |||
+ | You can add additional search elements and define the search behavior for each element separately. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-9.png?nolink|}} | ||
+ | |||
+ | The following search criteria can be selected: | ||
+ | |||
+ | ^Setting ^Description ^ | ||
+ | |**Full text search** |A case insensitive full text search over all visible columns with the search term. | | ||
+ | |**Like** |A case insensitive search over the defined column. Wildcards like '*' or '?' can be used. | | ||
+ | |**Equals** |If the value is equals the search term. | | ||
+ | |**Less** |If the value is less than the search term. | | ||
+ | |**Less Equals** |If the value is less or equals than the search term. | | ||
+ | |**Greater** |If the value is greater than the search term. | | ||
+ | |**Greater Equals** |If the value is greater or equals than the search term. | | ||
+ | |**Contains** |If the value contains the search term (case insensitive). | | ||
+ | |**Starts with** |If the value starts with the search term (case insensitive). | | ||
+ | |||
+ | Additionally you can set the following properties: | ||
+ | |||
+ | ^Setting ^Description ^ | ||
+ | |**Allow results with empty values** |If you want to allow results with empty values. | | ||
+ | |**Search explicitly for empty values** |If you want to search explicitly for empty values. | | ||
+ | |**Show records only after search** |If you want to show records only after search. | | ||
+ | |||
+ | For more details see the videos: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/m1SKuK7R_EY?origin=https://visionx.sibvisions.com|How to create a data filter]] | ||
+ | * [[https://www.youtube.com/embed/L3X7MOUMXkk?origin=https://visionx.sibvisions.com|How to filter numeric values]] | ||
+ | * [[https://www.youtube.com/embed/rT7foAg_N6U?origin=https://visionx.sibvisions.com|How to filter with a combobox]] | ||
+ | |||
+ | ==== Sort ==== | ||
+ | |||
+ | With clicks on the columns in the header of a table, you can define the sort criteria and sort direction. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-11.png?nolink|}} | ||
+ | |||
+ | With 'Ctrl' + mouse click it is possible to define a sort criteria over multiple columns. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-12.png?nolink|}} | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/B4rDwzSFMLE?origin=https://visionx.sibvisions.com|How to sort data]] | ||
+ | |||
+ | ==== Images ==== | ||
+ | |||
+ | Images related to a data set can be defined as separate column in the model. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-image-2.png?nolink|}} | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/hyQ_CfKPbeY?origin=https://visionx.sibvisions.com|How to Add An Image]] | ||
+ | |||
+ | ===== Layouting ===== | ||
+ | |||
+ | Layouts are used to position UI elements on a screen. Depending on the layout, the UI elements can be arranged differently. | ||
+ | |||
+ | {{:visionx:documentation:layout-14.png?nolink|}} | ||
+ | |||
+ | We support in VisionX three different layout types. | ||
+ | |||
+ | * Form Layout | ||
+ | * Grid Layout | ||
+ | * Border Layout | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/DeIOtzGyK_A?origin=https://visionx.sibvisions.com|Layout Overview]] | ||
+ | |||
+ | ==== Form Layout ==== | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/qVDDF7a0icQ?origin=https://visionx.sibvisions.com|How to use the form layout]] | ||
+ | |||
+ | === Insert And Stretch Elements === | ||
+ | |||
+ | Elements can be moved via drag and drop between or beside already inserted elements. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{: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). | ||
+ | |||
+ | === Set Gap And Size Of Elements === | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{:visionx:documentation:layout-7.png?nolink|}} | ||
+ | |||
+ | ==== Grid Layout ==== | ||
+ | |||
+ | A GridLayout divides the area into equal sized columns and rows. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{:visionx:documentation:layout-16.png?nolink|}} | ||
+ | |||
+ | {{:visionx:documentation:layout-10.png?nolink|}} | ||
+ | |||
+ | === Insert And Stretch Elements === | ||
+ | |||
+ | Elements can be added via drag and drop to the right row and column of the grid layout. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{:visionx:documentation:layout-12.png?nolink|}} | ||
+ | |||
+ | {{:visionx:documentation:layout-13.png?nolink|}} | ||
+ | |||
+ | ==== Border Layout ==== | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{:visionx:documentation:layout-1.png?nolink|}} | ||
+ | |||
+ | The advantage of a BorderLayout is that: | ||
+ | |||
+ | * Everything is adjusted to the current size in the center. | ||
+ | * You can simply add a search above, in the north, for example, or display a summary or total in the south. | ||
+ | |||
+ | The size of the elements (north, south, west and east) depends on the preferred size of the element. | ||
+ | |||
+ | 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). | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/EnpN9WuuLV0?origin=https://visionx.sibvisions.com|How To Use A Border Layout]] | ||
+ | |||
+ | ===== Clipboard ===== | ||
+ | |||
+ | A clipboard is located in the lower left corner of the screen. | ||
+ | |||
+ | The clipboard can be used to cache UI elements. This is useful when you have to redesign a screen or if you want to move already designed elements to an other screen. For example, in the first step all elements are deleted panel by panel to create space. Then the new group elements (e.g., tab sets) are placed on the screen, and the original panels are replaced step by step. | ||
+ | |||
+ | All elements which are deleted in a screen are automatically moved to the clipboard. | ||
+ | |||
+ | It is also possible to move elements (with all child elements) via drag and drop to the clipboard. | ||
+ | |||
+ | {{:visionx:documentation:clipboard.png?nolink|}} | ||
+ | |||
+ | ===== Responsive Layout ===== | ||
+ | |||
+ | Based on the current browser or device size the position of the elements and menu is dynamically changed. | ||
+ | |||
+ | For more details see [[#responsive_design|Responsive Design]]. | ||
+ | |||
+ | It is possible to deactivate the 'Responsive Layout' for each panel separately in the edit window of the panel. | ||
+ | |||
+ | The default setting for the 'Responsive Layout' is active. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | ^**Responsive Layout activated** ^**Responsive Layout deactivated** ^ | ||
+ | |{{:visionx:documentation:ui-element-responsive-2.png}} ?nolink|{{:visionx:documentation:ui-element-responsive-3.png?nolink|}} | | ||
+ | |||
+ | ===== Screen properties ===== | ||
+ | |||
+ | Screen properties can be set when you select the window and click the edit button. | ||
+ | |||
+ | {{:visionx:documentation:screen-1.png?nolink|}} | ||
+ | |||
+ | <html><br /></html> | ||
+ | |||
+ | ^Setting ^Description ^ | ||
+ | |**Save question before close** |A question dialog 'Your work-screen has changes. Would you save all changes' will be displayed, if the screen with data changes is closed. | | ||
+ | |**Show as Popup** |Screen is opened as popup window. | | ||
+ | |**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. | | ||
+ | |**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 ==== | ||
+ | |||
+ | You can delete a screen when you select the window and click the delete icon. | ||
+ | |||
+ | {{:visionx:documentation:screen-2.png?nolink|}} | ||
+ | |||
+ | Just the screen or the screen with database tables can be selected to delete. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | {{:visionx:documentation:screen-4.png?nolink|}} | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/xPOKFawmS7I?origin=https://visionx.sibvisions.com|How To Delete A Screen]] | ||
+ | |||
+ | ===== More ===== | ||
+ | |||
+ | ==== Copy An Element ==== | ||
+ | |||
+ | If you need a copy of your already added UI element (editor, panel, label,...) you can click 'Ctrl' + 'Drag the UI element'. | ||
+ | |||
+ | {{:visionx:documentation:ui-elements-copy.png?nolink|}} | ||
+ | |||
+ | ====== Live Preview - Web, Mobile Desktop Apps ====== | ||
+ | |||
+ | 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:documentation:live-preview-1.png?nolink|}} | ||
+ | |||
+ | You can choose now between a live preview as 'Desktop application', 'Web application' or 'Mobile App'. | ||
+ | |||
+ | {{:visionx:documentation:live-preview-2.png?nolink|}} | ||
+ | |||
+ | ===== One App For All ===== | ||
+ | |||
+ | It is not necessary to create for each technology (Desktop, Web or Mobile) different applications. You can use one application with different technologies. | ||
+ | |||
+ | See also the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/rzhgVj3RiIk?origin=https://visionx.sibvisions.com|How To Create A Native Mobile, Web And Desktop App In One Step]] | ||
+ | |||
+ | ==== Desktop ==== | ||
+ | |||
+ | To preview the application as 'Desktop' you have to select 'Desktop application' and click 'Finish'. | ||
+ | |||
+ | {{:visionx:documentation:live-preview-3.png?nolink|}} | ||
+ | |||
+ | The UI technology behind a 'Desktop' application is 'Swing (Java)' | ||
+ | |||
+ | ==== Web ==== | ||
+ | |||
+ | If you start the preview as 'Web application in Browser' you can choose between 'Standard' and 'Next generation'. | ||
+ | |||
+ | === Standard === | ||
+ | |||
+ | A preview as 'Web application in Browser' in the standard technology (Vaadin) will start the application in the browser. | ||
+ | |||
+ | {{:visionx:documentation:live-preview-4.png?nolink|}} | ||
+ | |||
+ | === Next Generation === | ||
+ | |||
+ | A preview as 'Web application in Browser' in the next generation technology (React) will start the application in the browser. | ||
+ | |||
+ | {{:visionx:documentation:live-preview-5.png?nolink|}} | ||
+ | |||
+ | ==== Mobile ==== | ||
+ | |||
+ | VisionX applications run on all devices and UI platforms. **Therefore, you can easily launch your app as a native mobile app without any changes.** | ||
+ | |||
+ | You can open the app for a app simulation in the browser or on a real mobile device as native app. | ||
+ | |||
+ | === Browser === | ||
+ | |||
+ | To open the app in the browser, click on the Preview button in the VisionX menu in the toolbar. | ||
+ | |||
+ | {{:visionx:documentation:open-live-preview.png?nolink|}} | ||
+ | |||
+ | Then select Mobile App in the browser. This is our mobile app previewer in the browser. This is the easiest way to view and test the app. | ||
+ | |||
+ | {{:visionx:documentation:select-mobile-preview-browser.png?nolink|}} | ||
+ | |||
+ | After the browser window opens, resize to the size of a smartphone. | ||
+ | |||
+ | {{:visionx:documentation:mobile-preview.png?nolink|}} | ||
+ | |||
+ | === Real Device (Native Mobile App) === | ||
+ | |||
+ | Alternatively, you can also start the app in the VisionX Previewer app. To do this, search for VisionX Previewer App in the App Store on your smartphone and install it. | ||
+ | |||
+ | {{:visionx:documentation:visionx-previewer-app-store.png?nolink|}} | ||
+ | |||
+ | **Note - Make sure that your PC is in the same wireless network (WLAN) as your smartphone.** | ||
+ | |||
+ | This time, select the 'Real Device' option for the mobile preview and click 'Next'. | ||
+ | |||
+ | {{:visionx:documentation:mobile-preview-real-device.png?nolink|}} | ||
+ | |||
+ | Then open the VisionX Preview app on your smartphone click on 'Settings'. | ||
+ | |||
+ | {{:visionx:documentation:mobile-app-login.png?nolink|}} | ||
+ | |||
+ | Click on the QR code scan button at the bottom of the screen. | ||
+ | |||
+ | {{:visionx:documentation:mobile-app-settings.png?nolink|}} | ||
+ | |||
+ | And scan the QR code in the VisionX Live Preview start screen. | ||
+ | |||
+ | {{:visionx:documentation:mobile-preview-scan-qr-code.png?nolink|}} | ||
+ | |||
+ | {{:visionx:documentation:mobile-app-scan.png?nolink|}} | ||
+ | |||
+ | Click 'Save' to return to the login screen and log in to the app using the 'admin'/'admin' credentials. | ||
+ | |||
+ | {{:visionx:documentation:mobile-app-main-screen.png?nolink|}} | ||
+ | |||
+ | And open the 'Companies' screen. | ||
+ | |||
+ | {{:visionx:documentation:mobile-app-main-screen.png?nolink|}} | ||
+ | |||
+ | ===== Responsive Design ===== | ||
+ | |||
+ | A responsive design is needed to create just one application for different screen sizes. | ||
+ | |||
+ | The editing panel (see [[#responsive_layout|Responsive Layout]] helps to create responsive screen designs. | ||
+ | |||
+ | Depending on the used UI elements, layouts and settings an application updates the size and positioning of the UI elements automatically. | ||
+ | |||
+ | **See the following example**: | ||
+ | |||
+ | Because of the used 'Editing Panel' with the display mode 'Horizontal Split' and the sufficient size of the screen, it is shown with a split panel. | ||
+ | |||
+ | {{:visionx:documentation:responsive-design-1.png?nolink|}} | ||
+ | |||
+ | Depending on the responsive web setting (see [[#web_application_settings|Web Application Settings]]), the size of the menu and the display mode changed automatically. | ||
+ | |||
+ | {{:visionx:documentation:responsive-design-2.png?nolink|}} | ||
+ | |||
+ | Small screen sizes have the effect that the layout changed to a one column view and all UI elements are displayed from top to down in one column. | ||
+ | |||
+ | {{:visionx:documentation:responsive-design-3.png?nolink|}} | ||
+ | |||
+ | ====== Actions And Events ====== | ||
+ | |||
+ | This chapter is about adding functionality and features to a screen. | ||
+ | |||
+ | For example, open a document on button click or calculate values after user input. | ||
+ | |||
+ | VisionX allows this very easily via **[[:visionx:actions|Events And Actions]]**. | ||
+ | |||
+ | ===== Action Examples ===== | ||
+ | |||
+ | You will find some tutorials on your [[https://visionx.sibvisions.com/actions/|VisionX website]] | ||
+ | |||
+ | See also the following videos: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/8vQfIOCZSZM?origin=https://visionx.sibvisions.com|VisionX Actions Overview]] | ||
+ | * [[https://www.youtube.com/embed/8vQfIOCZSZM?origin=https://visionx.sibvisions.com|How To Change A Label On Button Click]] | ||
+ | * [[https://www.youtube.com/embed/xMBZgUR0Ews?origin=https://visionx.sibvisions.com|How To set A Default Value After Insert]] | ||
+ | * [[https://www.youtube.com/embed/5nnH1WY56UU?origin=https://visionx.sibvisions.com|How To Change The Color Depending On Data]] | ||
+ | * [[https://www.youtube.com/embed/iCwugHVBa9Q?origin=https://visionx.sibvisions.com|How To Calculate A Sum]] | ||
+ | * [[https://www.youtube.com/embed/3Y7aCzbppqU?origin=https://visionx.sibvisions.com|How To Duplicate A Record]] | ||
+ | * [[https://www.youtube.com/embed/eHuvRoNWs8A?origin=https://visionx.sibvisions.com|How To Open A Screen With A Parameter]] | ||
+ | |||
+ | ====== 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. | ||
- | {{:visionx:documentation:user-management.png?nolink|User Management}} | + | By default, the user management tool is located in the 'Admin' menu. |
+ | |||
+ | In addition to user name and password, additional information can be recorded for each user. The 'Active' checkbox determines whether the user is currently active and is able to log in to the application. Checking the box 'Password expired' forces the user to change passwords at the next login. | ||
+ | |||
+ | {{:visionx:documentation:user-management-1.png?nolink|}} | ||
+ | |||
+ | Roles can be defined for each user by checking the respective boxes in the 'Roles' table. The roles itself are managed using the application's menu. (See tab roles in [[#application_settings|Application Settings]]) | ||
+ | |||
+ | {{:visionx:documentation:user-management-2.png?nolink|}} | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/1hA1bn-Ggng?origin=https://visionx.sibvisions.com|User / Role Management - Overview]] | ||
+ | |||
+ | ===== Change The User Management Screen ===== | ||
+ | |||
+ | The 'User Management' screen is a standard VisionX screen and can be changed in the design mode of VisionX like a normal screen. | ||
+ | |||
+ | {{:visionx:documentation:user-management-3.png?nolink|}} | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/1hA1bn-Ggng?origin=https://visionx.sibvisions.com|Change the user management screen]] | ||
+ | |||
+ | ===== Hide/Show Elements Regading The Role ===== | ||
+ | |||
+ | In the event and action configuration (see [[#actions_and_events|Actions and Events]]) of a screen, you can add role specific conditions ('Has role assigned' or 'Not has role assigned') and actions ('Hide element', 'Set column read only', ...). | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/qbT_TQoGPqs?origin=https://visionx.sibvisions.com|Hide Element Depending On A Role]] | ||
+ | |||
+ | ===== 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. | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/fkhxIJsCxE4?origin=https://visionx.sibvisions.com|Show Data Depending On a Role]] | ||
+ | |||
+ | ====== Menu ====== | ||
+ | |||
+ | The 'Menu Management' dialog is used to manage the application’s menu. You can open it by clicking on the 'Menu' button. | ||
+ | |||
+ | {{:visionx:documentation:menu-1.png?nolink|}} | ||
+ | |||
+ | The menu management dialog is used to create new menus or sub menus and to edit existing menus. Menu entries (screens) can be sorted or moved to different menus using the arrow buttons. | ||
+ | |||
+ | {{: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. | ||
+ | |||
+ | 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. | ||
+ | |||
+ | {{:visionx:documentation:menu-3.png?nolink|}} | ||
+ | |||
+ | For more details see the video: | ||
+ | |||
+ | * [[https://www.youtube.com/embed/wJEwU_5hE1s?origin=https://visionx.sibvisions.com|How To Change Your Menu]] | ||
+ | |||
+ | ====== Settings ====== | ||
- | By default, the user management tool is located in the "Admin" menu. | + | A number of application settings (like 'Automatic Login', 'Welcome Screen', 'Background Images', 'Roles', ...) can be edited in the [[#application_settings|Application Settings]] menu. |
- | In addition to user name and password, additional information can be recorded for each user. The "Active" checkbox determines whether the user is currently active and is able to log in to the application. Checking the box "Password expired" forces the user to change passwords at the next login. | + | {{:visionx:documentation:settings-1.png?nolink|}} |
- | Roles can be defined for each user by checking the respective boxes in the "Roles" table. The roles itself are managed using the application's menu. | + | To open the technology specific (Web, Mobile and Rest) settings you have to click the arrow in the settings menu. |
- | See: [[#userrole_management|User / Role Management]] | + | {{:visionx:documentation:settings-2.png?nolink|}} |
===== Application Settings ===== | ===== Application Settings ===== | ||
- | A number of application settings can be edited in the "Application Settings" menu of the application's menu. | + | In the 'Application Settings' dialog specific preferences for the application can be configured. |
- | {{:visionx:documentation:application-settings-details.png?nolink|Application Settings - Details}} | + | On the 'Details' tab, the application's title, version, language, and additional information can be entered and edited. The default setting for the language is 'Automatic'. This means that the application is opened using the client PC's language. If desired, a specific language can be selected in which the application is to run (e.g., English). If no translation is available for the selected/determined language, the respective text is not translated and remains unchanged. |
- | On the "Details" tab, the application's title, version, language and additional information can be entered and edited. | + | {{:visionx:documentation:settings-3.png?nolink|}} |
- | The default setting for the language is "Automatic". This means that the application is opened using the client PC's language. Instead, a specific language can be selected in which the application is to be run (e.g. English). | + | On the 'Start' tab, a standard user can be defined for automatic authentication. This can be used for public applications without registered users. In addition, a welcome screen can be selected that is displayed automatically when the application is opened. |
- | If not translation is available for the selected/determined language, the respective text is not translated and remains unchanged. | + | {{:visionx:documentation:settings-4.png?nolink|}} |
- | On the "Start" tab, a standard user can be defined for automatic authentication. This can be used for public applications without registered users. | + | On the 'Design' tab, the background, application icon (the icon on the top left of the screen), as well as the preview image for the VisionX application overview can be selected. |
- | In addition, a welcome workscreen can be selected that is displayed automatically when the application is opened. | + | Additional options for the design are: |
- | {{:visionx:documentation:application-settings-start.png?nolink|Application Settings - Start}} | + | ^Setting ^Description ^ |
+ | |**Show menu** |If this option is deactivated, no menu is displayed in the application. | | ||
+ | |**Show toolbar** |If this option is deactivated, no toolbar is displayed in the application. | | ||
+ | |**Small toolbar icons** |If this option is selected, the toolbar title is not displayed additionally to the icon. | | ||
+ | |**Show Rollback** |If this option is selected, the rollback button is displayed. | | ||
+ | |**Responsive mode** |If the responsive mode (see [[#responsive_design|Responsive Design]]) is active or not. | | ||
- | On the "Design" tab, the background, application icon (the icon on the top left of the workscreen), as well as the preview image for the VisionX application overview can be selected. | + | {{:visionx:documentation:settings-5.png?nolink|}} |
- | {{:visionx:documentation:application-settings-design.png?nolink|Application Settings - Design}} | + | On the 'Roles' tab, new roles can be created, and assigned to the available screens. |
- | {{:visionx:documentation:application-settings-roles.png?nolink|Application Settings - Manage Roles}} | + | {{:visionx:documentation:settings-6.png?nolink|}} |
- | On the "Roles" tab, new roles can be created, and roles are assigned to the available workscreens. Role-specific functionality can also be managed on the workscreens directly, e.g. actions can be used to show/hide certain fields or buttons. | + | 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]]. |
- | Additional information can be found in the VisionX Actions Documentation. | + | 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:application-settings-datasources.png?nolink|Application Settings - Datasources}} | + | {{:visionx:documentation:settings-7.png?nolink|}} |
- | 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. | + | On the 'Translation' tab, the application's languages and the corresponding translations are edited. |
- | "Default" refers to the main database connection, which also contains the users, roles, workscreens, etc. that are required by VisionX. | + | For more details see [[#multiple_languages|Multiple Languages]] |
- | See: [[#visionx_administration|VisionX Administration]] | + | {{:visionx:documentation:settings-8.png?nolink|}} |
- | On the "Translation" tab, the application's languages and the corresponding translations are edited. | + | On the 'E-Mail' tab, the mail server configuration can be added which should be used when e-mails are sent. |
- | When the application is created, all workscreens, menus, etc. should be in the same language (= default language). This can be English, German, etc. Additional languages and their translations can be created and managed on this tab. The "Not translated" button is used to transfer all recognized text for which no translation exists to the translation list. On this list, a translation can be entered for each message. This allows the user to add missing translations for new workscreens or functions at any time. | + | {{:visionx:documentation:settings-9.png?nolink|}} |
- | For VisionX to recognize the text, all workscreens first have to be opened and all functions executed. Irrespective thereof, further text and translations can always be added. | + | ^Setting ^Description ^ |
+ | |**Server** |The IP address or domain name of the mail server. | | ||
+ | |**Port** |The http / https port which should be used. | | ||
+ | |**TLS** |If TLS for encryption of the e-mail is active. | | ||
+ | |**Username** |The username to access the mail server. | | ||
+ | |**Password** |The password to access the mail server. | | ||
+ | |**Default Sender** |E-Mail address which is the default sender of the e-mail. | | ||
+ | |**Default Html** |If the e-mail body is default HTML formatted. | | ||
- | {{:visionx:documentation:application-settings-translation.png?nolink|Application Settings - Translation}} | + | For more details see the video: |
- | In addition to simple text, placeholders can be used for error messages. This is particularly helpful for error message that refer to fields, etc. | + | * [[https://www.youtube.com/embed/kKDhSeAV7g8?origin=https://visionx.sibvisions.com|How To Change Your Application Settings]] |
- | |Text |The field "*1" in Tab "*2" cannot be empty! | | + | ==== Multiple Languages ==== |
- | |Translation |Das Feld ‚*' in Reiter ‚*' muss befüllt werden! | | + | |
- | * can be used to define placeholders. | + | When the application is created, all screens, menus, labels, etc. should be in the same language (default language). This can be English, German, etc.. Additional languages and their translations can be created and managed on this tab. |
- | The translation can include a reference to the placeholder themselves. That's done with the * followed by a number. e.g.: *1 for the first placeholder. | + | All possible text elements are listed and can be translated directly in this tab. The 'Not translated' button is used to transfer all recognized text for which no translation exists to the translation list. On this list, a translation can be entered for each message. This allows the user to add missing translations for new screens or functions at any time. |
- | ===== Create Specifications / Data Model Report ===== | + | {{:visionx:documentation:settings-10.png?nolink|}} |
- | The "Specification" wizard in the application's menu is used to create specification documents. | + | For each language a separate translation_[ISO_CODE].xml is created in the folder |
- | {{:visionx:documentation:specification-select-option.png?nolink|Create Specification / Data Model - Select Option}} | + | **[VisionX-Installation-Folder]**/rad/apps/**[Application-Folder]**/src.client/app/visionx/apps/**[application-name]**/. |
- | In the first step, the user can choose between a specification document for the application's workscreens or the documentation for the database. | + | You can also translate the text elements directly in the xml files. |
- | For the application screen documentation, a word document is created containing a description of the application, of the workscreens (including a screen shot), and of all fields and their respective actions. | + | {{:visionx:documentation:language-xml-file.png?nolink|}} |
- | For the database documentation, a word document is created showing all database tables including all columns, primary keys, foreign keys and unique keys. | + | For more details see the video: |
- | Both options are created based on a template, which is downloaded in the next wizard step and edited using Microsoft Word. The template system is the same as the one used for the VisionX reports. | + | * [[https://www.youtube.com/embed/oktwfsJa2rI?origin=https://visionx.sibvisions.com|How To Use Multiple Languages]] |
- | See: [[#createedit_reports|Create / Edit Reports]] | + | === Place Holders === |
- | {{:visionx:documentation:specification-select-screen.png?nolink|Create Specification / Data Model - Select Template/Workscreen}} | + | In addition to simple text, placeholders can be used for error messages. |
- | {{:visionx:documentation:specification-print.png?nolink|Created Specification}} | + | **Text** | ORA-01400: *("*".*."*")* |\\ |
+ | **Translation** | Please enter a value in field '*3' (*1.*2)! | | ||
- | ===== Create Help ===== | + | * can be used to define placeholders. |
- | The "Create help" wizard in the application's menu is used to create or expand the application's help pages. | + | The translation can include a reference to the placeholder themselves. This is done with the * followed by a number,. e.g., *1 for the first placeholder. |
- | {{:visionx:documentation:help-select-option.png?nolink|Create Help - Options}} | + | ===== Web Application Settings ===== |
- | In this step, the user can create new help pages or add additional workscreens to existing sections. In addition, the application image in the help pages can be edited. | + | You can open the 'Web Application Settings' dialog in the sub menu of Settings. |
- | In both cases the help pages can easily be edited in any HTML editor, to add more details or examples. | + | {{:visionx:documentation:web-settings-1.png?nolink|}} |
- | The help function in VisionX is HTML based, including indexed full text search. | + | In the 'Web Application Settings' dialog specific web preferences for the design and behaviour can be configured. |
- | In the next step, the user can select the workscreens for which the help documents are to be created. | + | {{:visionx:documentation:web-settings-2.png?nolink|}} |
- | {{:visionx:documentation:help-select-screen.png?nolink|Create Help - Select Workscreens}} | + | In the 'Design' tab you can set the following options. |
- | ===== Create / Edit Reports ===== | + | ^Setting ^Description ^ |
+ | |**Display mode** |The display mode defines the behavior of the surrounding environment and how the menu and the screens are displayed. | | ||
+ | |**Menu position** |If the menu is displayed on the right or left side. | | ||
+ | |**Reuse after reload** |If this setting is activated, the client state is not new initialized, if reload in the browser is clicked. This is useful if you redirect to the application after a call of a other service. | | ||
+ | |**Back/Forward navigation** |If this setting is activated, you can use the back and forward buttons of the browser to navigate between the last opened screens. | | ||
+ | |**Theme** |The theme option has impact to the design of the application and the UI elements. | | ||
+ | |**Responsive mode** |If this setting is activated, responsive design ([[#responsive_design|Responsive Design]]) is supported. | | ||
+ | |**Responsive mode (Mini width)** |If the screen size is smaller than this setting, the responsive design is optimized to a smaller screen size (e.g. for Tablets) | | ||
+ | |**Responsive mode (Small width)** |If the screen size is smaller than this setting, the responsive design is optimized to mobile screen. | | ||
+ | |**Favicon** |The icon which is used in the browser tab of the application. | | ||
- | The "Reports" wizard in the application's Funktionsmenü is used to create a new report or to edit an existing report. | + | In the 'Styles' tab you can add specific web CSS styles. For more details see: [[#style_your_application|Style your application]] |
- | {{:visionx:documentation:reports-step2.png?nolink|Create Reports - Step 2 - New or Existing Report}} | + | ===== Web Application (next generation) Settings ===== |
- | Since reports are managed by workscreen, the first step in the wizard is the selection of a workscreen. | + | You can open the 'Web Application (next generation) Settings' dialog in the sub menu of Settings. |
- | In the second step, creating a new report or editing an existing report can be chosen. | + | {{:visionx:documentation:web-settings-3.png?nolink|}} |
- | One of the following report formats is selected in step three: | + | In the 'Web Application (next generation) Settings' dialog specific web preferences for the design and behavior can be configured. |
- | * Document (=Word RTF Format) | + | {{:visionx:documentation:web-settings-4.png?nolink|}} |
- | * Spreadsheet (=EXCEL XLS Format) | + | |
- | * XML | + | |
- | Depending on the VisionX license, certain formats may not be accessible, or additional formats may be available. | + | In the 'Design' tab you can set the following options. |
- | In addition, one of the following report layouts can be chosen: | + | ^Setting ^Description ^ |
+ | |**Display mode** |The display mode defines the behavior of the surrounding environment and how the menu and the screens are displayed. | | ||
+ | |**Reuse after reload** |If this setting is activated, the client state is not new initialized, if reload in the browser is clicked. This is useful if you redirect to the application after a call of a other service. | | ||
+ | |**Theme** |The theme option has impact to the design of the application and the UI elements. | | ||
+ | |**Color scheme** |The color scheme has impact to the primary and secondary colors which are used. | | ||
+ | |**Responsive mode** |If this setting is activated, responsive design ([[#responsive_design|Responsive Design]]) is supported. | | ||
+ | |**Responsive mode (Mini width)** |If the screen size is smaller than this setting, the responsive design is optimized to a smaller screen size (e.g. for Tablets) | | ||
+ | |**Responsive mode (Small width)** |If the screen size is smaller than this setting, the responsive design is optimized to mobile screen. | | ||
+ | |**Favicon** |The icon which is used in the browser tab of the application. | | ||
- | * Simple List A table is displayed as a simple list. The current data filter is applied. | + | In the 'Styles' tab you can add specific web CSS styles. For more details see: [[#style_your_application|Style Your Application]] |
- | * List with Details A table is displayed as a list, in which for each master record a list of all detail records is shown. The current data filter is applied. | + | |
- | * Form (with Details) The currently selected master record is displayed as a form, below which detail tables can be shown. | + | |
- | {{:visionx:documentation:reports-step3.png?nolink|Create Report - Step 3 - Select Layout}} | + | ===== Mobile Settings ===== |
- | In the next step, the master table (highest level table in the report) can be selected. | + | You can open the 'Mobile Settings' dialog in the sub menu of Settings. |
- | {{:visionx:documentation:reports-step4.png?nolink|Create Report - Step 4 - Select Data/Master Table}} | + | {{:visionx:documentation:mobile-settings-1.png?nolink|}} |
- | Depending on the layout, a number of options can be selected. This is particularly relevant for the "List with Details" format. The following options are available: | + | In the 'Mobile Settings' dialog specific web preferences for the design and behavior can be configured. |
- | * Checkbox "Show records only for selected master" If this option is checked, only the selected master record and the respective detail records are displayed in the report. | + | {{:visionx:documentation:mobile-settings-2.png?nolink|}} |
- | * Checkbox "Show master records only for its selected master" If this option is checked, all detail records are displayed for all visible master records. | + | |
- | * None of the two options are checked If there is another level above the master record, no restrictions apply to this additional level. E.g.: For the report, State (master) and City (detail) are selected; the table State has a master table Country In this case, the report shows all states (for all countries!) and every city for each state | + | |
- | {{:visionx:documentation:reports-step5a.png?nolink|Create Report - Step 5a - Select Master Columns}} | + | In the 'Details' tab you can and a specific 'Title' and 'Infotext' which is used in the mobile application. |
- | {{:visionx:documentation:reports-step5b.png?nolink|Create Report - Step 5b - Select Detail Columns}} | + | In the 'Design' tab you can set the following options. |
- | In the last step, the columns that are to be displayed in the report can be chosen for each table. As an option, the detail columnscan be selected for the report in addition to the master columns. | + | ^Setting ^Description ^ |
+ | |**Menu mode** |Defines how the menu in the app is grouped. | | ||
+ | |**Theme color** |The primary color of the app. | | ||
+ | |**Opacity (Menu)** |The opacity value of the menu. | | ||
+ | |**Opacity (Fade-in menu)** |The opacity value of the menu. | | ||
+ | |**Opacity (Elements)** |The opacity value of the used UI elements. | | ||
+ | |**Login Logo** |The image which is used in the login screen. | | ||
+ | |**Login Background** |The image and background color which is used in the login screen. | | ||
+ | |**Application Background** |The image and background color which is used in the application after the login. | | ||
- | {{:visionx:documentation:reports-action.png?nolink|Create Report - Assign "Show Report" Action to a Button}} | + | ===== REST Settings ===== |
- | In this step, the newly created report can be assigned to a button. An action is automatically created, or an existing action is edited, to show the report. | + | You can open the 'REST Settings' dialog in the sub menu of Settings. |
- | The "Reports" wizard can also be used to edit existing reports. | + | {{:visionx:documentation:rest-settings-1.png?nolink|}} |
- | {{:visionx:documentation:reports-edit-layout.png?nolink|Edit Report - Change Layout}} | + | Each VisionX application can use different REST APIs as datasources. You can configure the application specific datasources when you click 'Service configuration'. |
- | To edit an existing report, the report template is downloaded and edited using Microsoft Word, Excel, XML, or any other suitable editor and then uploaded back to the application. | + | {{:visionx:documentation:rest-settings-2.png?nolink|}} |
- | The templates are based on placeholders, which are populated with data from the database tables when the report is created. | + | How to configure a REST service see the documentation of our [REST] module add on. |
- | Additional information about reports and templates can be found in the VisionX Reports Documentation. | + | ====== Reports ====== |
- | ===== Actions ===== | + | The VisionX reports module allows the user to create reports in the following formats: Word RTF (documents), Excel (spreadsheets), XML and PDF. Reports are used to provide selected data for the user to download. For certain report types, this data can then be edited locally and uploaded back into the application. |
- | Actions are created, edited and deleted via VisionX's GUI designer. They can be used for a number of events, such as, for example, the click of a button. When the selected event occurs during the use of a workscreen, the respective action is performed. | + | For more details see: [[:visionx:reports|VisionX Reports]] |
- | Example: | + | ====== Style Your Application ====== |
- | When the event "button click" occurs, the specified action is executed. For example, the action can show a a report. | + | You can style your application with different design settings (see [[#settings|Settings]]) or specific CSS definitions. |
- | The following steps show how a report is displayed after the click of a button labeled "Report". | + | ===== Style A Web Application ===== |
- | ==== Define Action ==== | + | The standard styling of an application is timeless and looks like one of the following. |
- | The following steps demonstrate the definition of a simple action. | + | {{:visionx:documentation:style-app-1.png?nolink|}} |
- | Example: | + | But the standard styling is not always what you want because you have some special colors in mind. |
- | Displaying a report by clicking a button labeled "Report". | + | You can easy use one of our existing templates, or you design it on your own with pure CSS. |
- | <HTML><ul></HTML> | + | For more details how you can import already well prepared CSS templates see: [[:visionx:valo_style_templates|Style Templates]] |
- | <HTML><li></HTML>Step 1 - Open a workscreen in the GUI Designer - e.g.: the "Contacts" workscreen<HTML></li></HTML> | + | |
- | <HTML><li></HTML><HTML><p></HTML>Step 2 - Select the "Report" button in the GUI Designer and click on the pencil icon<HTML></p></HTML> | + | |
- | <HTML><p></HTML>{{:visionx:documentation:actions-step2.png?nolink|Edit Actions - Step 2}}<HTML></p></HTML><HTML></li></HTML> | + | |
- | <HTML><li></HTML><HTML><p></HTML>Step 3 - Click on the button "Create/Edit Action" to create/edit an action<HTML></p></HTML> | + | |
- | <HTML><p></HTML>{{:visionx:documentation:actions-step3.png?nolink|Edit Actions - Step 3}}<HTML></p></HTML><HTML></li></HTML> | + | |
- | <HTML><li></HTML>Step 4 - Enter a description of the action on the "Description" tab<HTML></li></HTML> | + | |
- | <HTML><li></HTML><HTML><p></HTML>Step 5 - Click on the "Action" tab and select "Show Report"<HTML></p></HTML> | + | |
- | <HTML><p></HTML>{{:visionx:documentation:actions-step5.png?nolink|Edit Actions - Step 5}}<HTML></p></HTML><HTML></li></HTML> | + | |
- | <HTML><li></HTML><HTML><p></HTML>Step 6 - Select the desired report as parameter<HTML></p></HTML> | + | |
- | <HTML><p></HTML>{{:visionx:documentation:actions-step6.png?nolink|Edit Actions - Step 6}}<HTML></p></HTML><HTML></li></HTML> | + | |
- | <HTML><li></HTML><HTML><p></HTML>Step 7 - Click the "Verify" button and then "OK" to verify and save<HTML></p></HTML><HTML></li></HTML><HTML></ul></HTML> | + | |
- | This completes the action. It can be tested by closing the GUI Designer and changing to runtime mode. Clicking the "Report" button opens the "Contacts" report. | + | {{:visionx:documentation:style-app-2.png?nolink|}} |
- | Additional information about actions can be found in the VisionX Actions Documentation. | + | If you need a specific styling for UI elements, you can add a 'Style' class each element. |
- | ==== Events ==== | + | {{:visionx:documentation:style-app-3.png?nolink|}} |
- | The following table summarizes all events that can be defined in VisionX. The availability of these depends on the GUI element to which they are applied. Furthermore, additional events can be defined using Java code in a Java IDE, such as Eclipse. Additional information can be found in the documentation for the Open Source Framework JVx on the internet. | + | Each web application has an 'application.css' file in the WebContent folder, which can be used to add application specific CSS classes. The 'application.css' can be updated in the web specific settings ([[#web_application_settings|Web Application Settings]]) in the tab 'Styles'. |
- | ^Event ^Description ^ | + | Here you can add your css class with your specific design. |
- | |On Load |This event occurs when a workscreen is opened. It it used to configure the data and elements that are to be displayed.\\ For example, user or role dependent views can be defined here.\\ At the time of the event, the workscreen is not yet visible.\\ GUI Elements: Workscreen | | + | |
- | |On Show |This event occurs immediately after a workscreen is opened. It is used to configure the data and elements that are to be displayed.\\ At the time of the event, the workscreen is visible.\\ GUI Elements: Workscreen | | + | |
- | |On Activate |This event occurs each the a workscreen is activated using the "Open Screen" action, irrespective of whether the workscreen is opened or a previously opened workscreen is brought back to the foreground.\\ It can be used, for example, to evaluate parameters transferred from the called workscreen and to display the resulting values.\\ At the time of the event, the workscreen is not yet visible.\\ GUI Elements: Workscreen | | + | |
- | |On Close |This event occurs before a workscreen is closed. It is used to save data or to prevent closing the workscreen.\\ \\ GUI Elements: Workscreen | | + | |
- | |Tab Activated |This event occurs when a tab is activated. It can be used to perform calculations or validations.\\ \\ GUI Elements: Workscreen | | + | |
- | |Action |This event occurs at the click of a button.\\ It is used to start processes, execute logic, manipulate data, display reports or import data.\\ \\ GUI Elements: Button, Toggle Button, Radio Button Check Box | | + | |
- | |Row Value Changed |This event occurs upon the change of a value in a row. There is only one value change event per table. Irrespective of which GUI element is used to open the wizard, the event is always the same.\\ The condition "Is Column Changed" is used to determine which value has changed.\\ This event can be used to calculated dependent values.\\ \\ GUI Elements: Table, Editor | | + | |
- | |After Row Selected |This event occurs after a row is selected in a table. There is only one "After Row Selected" event per table. Irrespective of which GUI element is used to open the wizard, the event is always the same.\\ This event can be used to show/hide components, calculate values, or activate/deactivate buttons dependent on the data in the selected row.\\ GUI Elements: Table, Editor | | + | |
- | |After Inserting Row |This event occurs after a row is inserted in a table. There is only one "After Inserting Row" event per table. Irrespective of which GUI element is used to open the wizard, the event is always the same.\\ This event can be used, for example, to fill a newly inserted row with standard values. | | + | |
- | ====== Application - Live Preview ====== | + | {{:visionx:documentation:style-app-4.png?nolink|}} |
- | VisionX Live Preview can be used to run an application. | + | {{:visionx:documentation:style-app-5.png?nolink|}} |
- | {{:visionx:documentation:live-preview-select-application.png?nolink|Live Preview - Select Application}} | + | ===== Style A Mobile App ===== |
- | After an application has been selected, the platform on which the application is run can be chosen. | + | The styling of a mobile app is very limited. You can set some design specific options in the [[#mobile_settings|Mobile Settings]]. |
- | Depending on the VisionX license, the following options are available: | + | ====== Documentation ====== |
- | * Desktop The application is run as a desktop Java application (just like any other Windows/Linux/MacOS application). | + | In the 'Documents' menu a base documentation of the screens and database can be automatically generated. |
- | * Java in a Browser The application is run as an Applet/Webstart Java program in a web browser. For this to work, Java (including the Java plugin) has to be installed on the client. | + | |
- | * HTML5 in a Browser The application is run as an HTML5 application in a web browser. | + | |
- | * Mobile Device The application can be used as a native iPhone/iPad or Android App on a smartphone or tablet. For this to work, the VisionX Preview App has to be installed on the mobile device. | + | |
- | The user interfaces of the VisionX application are similar, although certain technology specific variations will occur depending on the respective GUI Platform and Open Source Framework. | + | {{:visionx:documentation:documents-1.png?nolink|}} |
- | {{:visionx:documentation:live-preview-start-mode.png?nolink|Live Preview - Select Mode/Platform}} | + | With a click on the arrow in the 'Documents' menu, additionally an online help (see [[#generate_rest_documentation|Generate REST Documentation]]) can be generated. |
- | In the next step, the URL for the manual start of the application is displayed. For mobile applications, the QR code containing the configuration details can simply be scanned to be transferred to the mobile device. | + | {{:visionx:documentation:documents-2.png?nolink|}} |
- | {{:visionx:documentation:live-preview-details.png?nolink|Live Preview - Start Details}} | + | ===== Generate Specification ===== |
- | ====== VisionX Administration ====== | + | The 'Specification generation' dialog in the application's menu is used to create specification documents. |
- | The data sources (=database connections) for VisionX are managed on the "Administration" tab. | + | In the first step, the user can choose between a specification document for the application's screens or the documentation for the database. |
- | Here the data source name, the desired database (Oracle, MySQL, DB2, MS SQL, PostgreSQL), as well all the the relevant database connection parameters are specified. These parameters include the server (name or IP), port, as well as the database name (or SID in Oracle). | + | {{:visionx:documentation:documents-3.png?nolink|}} |
- | In addition, a valid database user name and password have to be entered. | + | For the application screen documentation, a Word document is created containing a description of the application, screens (including a screen shot), and all fields with their respective actions. |
- | The "Test Connection" button is used to test the connection to the database. | + | For the database documentation, a Word document is created showing all database tables including columns, primary keys, foreign-, and unique keys. |
- | {{:visionx:documentation:visionx-administration-datasources.png?nolink|Admin Datasources}} | + | Both options are created based on a template, which is downloaded in the next wizard step and edited using Microsoft Word. The template system is the same as the one used for the VisionX reports (see [[#reports|Reports]]). |
- | For the data sources, VisionX distinguishes between admin data sources and user-defined data sources (menu item "Datasources"). The difference lies in the rights of the respective database users. | + | {{:visionx:documentation:documents-5.png?nolink|}} |
- | For admin data sources, a user with administrator rights is required, so that VisionX can create new database users with this user. This is used in the "New Application" wizard to create a new database user for the new application. | + | You can select the screens, which should be included in the documentation. |
- | During the installation of VisionX, one admin data source with the name VisionX is configured. It is used by VisionX to manage its own data. In the desktop edition, an embedded database is used for this purpose, whereas in the enterprise edition a database can be selected during the installation process. This database is used to save data such as the VisionX users, admin data sources, user- defined data sources, etc. User-defined data sources only require the usual database user rights. They are used to integrate external databases into VisionX applications, e.g. to use certain master data in the application. They can also be used to work with a user prepared by the database administrator when a new application is created. | + | With 'Get Template' you can download the template and adjust the design of the template directly in Word. |
- | {{:visionx:documentation:new-application-step3.png?nolink|New Application - Select Database}} | + | {{:visionx:documentation:documents-4.png?nolink|}} |
- | As mentioned in Chapter [[#create_an_application|Create 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. | + | With 'Change Template...' you can upload the changed template. |
- | 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. | + | ===== Generate Help ===== |
- | Under the third option, a user-defined data source can be selected, which is then used by VisionX for the new application. | + | The 'Help generation' dialog in the documents menu is used to create an online help as HTML. |
- | New data sources (= database connections) can be created using the "New" button. For options 1 and 2 the admin data source workscreen is opened in this case, whereas the "New" button next to the third option opens the workscreen for user-defined data sources. | + | {{:visionx:documentation:help-generation-1.png?nolink|}} |
- | When a new workscreen is created, or when a new table is integrated into a workscreen, 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]]). | + | {{:visionx:documentation:help-generation-2.png?nolink|}} |
- | The VisionX user management workscreen can be accessed on the "Tools" tab. | + | The help function in VisionX is HTML based, can be opened in the browser and including indexed full-text search. |
- | {{:visionx:documentation:visionx-administration-users.png?nolink|VisionX Users}} | + | {{:visionx:documentation:help-generation-3.png?nolink|}} |
- | The users shown in this workscreen are the VisionX users and NOT the users of the individual applications. This workscreen is relevant when the VisionX Enterprise Edition is run on an application server. In this case all VisionX users have to be defined on this workscreen. | + | ==== Create New Help Pages And Delete Existing Pages ==== |
- | VisionX hat three roles: | + | With the option 'Create new help pages and delete existing pages' a online help as HTML can be generated. |
- | * Administrator - to manage the VisionX users | + | In the second step you can select the screens which should be part of the help. |
- | * User - for the regular use of VisionX | + | |
- | * Developer - to display the Java source code editor in the VisionX actions editor | + | |
- | ====== Application Export / Import ====== | + | {{:visionx:documentation:help-generation-4.png?nolink|}} |
- | Applications can be exportet and imported using the "Export" and "Import" functions on the "Tools" tab. | + | You will find the generated HTML files and images in your projects directory in your VisionX installation folder: |
- | This feature is used to create backups of applications or to send an application to a software developer for further advancement. | + | **[VisionX-Installation-Folder]**/rad/apps/**[Application-Folder]**/WebContent/help |
- | Exchange process with the software developer: | + | ==== Use Existing Help Pages And Create Additional Pages ==== |
- | - Export the application | + | With the option 'Use existing help pages and create additional pages' additional screens to existing sections can be added. |
- | - The software developer creates the added functionality based on a specification document | + | |
- | - Import the application | + | |
- | {{:visionx:documentation:export-applications.png?nolink|Export Applications}} | + | In the second step you can select the screens which should be part of the help. |
- | To export, the application and export type are selected. The following options are available: | + | {{:visionx:documentation:help-generation-4.png?nolink|}} |
- | - Complete The database and the application, including all libraries, are exported. | + | ==== Change The Application Image Of General Information ==== |
- | - Update Only the application is exported, with libraries (smaller file size). | + | |
- | - Database Only the database is exported. | + | |
- | For the export types "Complete" and "Database", the option "Export Database Records" determines whether the tables' data is also exported. Also for the export types "Complete" and "Database", the option "Export Database Objects" determines if the tables and views are exported. | + | With the option 'Change the application image of general information' images can be added to the help. |
- | In general, it should be noted that during the database export, VisionX only exports the tables and views. An accurate export/import of the views is only provided for simple ANSI SQL conform views. | + | With 'Use an existing image' an image from the file system can be added. |
- | Database system specific and proprietary objects are not considered during the export/import. | + | With 'Make a Screenshot' a screen shot can be created and added to the help. |
- | The application export is provided as a .ZIP file. | + | With 'Use application login image' the login screen can be added to the help as image. |
- | {{:visionx:documentation:import-application-step1.png?nolink|Import Application - Step 1 - Configuration}} | + | You will find the images of the help in: |
- | For the import, a valid VisionX export file and an application name are required. | + | **[VisionX-Installation-Folder]**/rad/apps/**[Application-Folder]**/WebContent/help/structure/.images |
- | The application can be imported as a new application or over an existing application. The latter option overwrites the existing application! | + | ===== Generate REST Documentation ===== |
- | In the second step, a selection is made as to which content from the export file is imported. If the "Database" option is unchecked, the database - if it is included in the export file - is not imported into VisionX. | + | The 'REST service' dialog in the application's menu is used to create a documentation for the application specific REST services. All data endpoints of the VisionX application are exposed as REST JSON services and can be used from other applications to read, update ore delete date if they have access. |
- | 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 an existing database user. It should be noted that if an existing database user is selected, the existing tables and data are overwritten! | + | {{:visionx:documentation:rest-generation-1.png?nolink|}} |
- | See: [[#visionx_administration|VisionX Administration]] | + | {{:visionx:documentation:rest-generation-2.png?nolink|}} |
- | {{:visionx:documentation:import-application-step3.png?nolink|Import Application - Step 3 - Verify Data Sources}} | + | ==== Create A Specification Document ==== |
- | If the database is imported, an option is available in the fourth step to determine whether the data is imported as well ("Import Data" option). | + | With the option 'Create a specification document' all URL data endpoints, possible methodes and field names are generated in a Word document. |
- | The option "Delete and recreate database objects" is used to deleted existing database objects before the import. | + | In the second step you can select the screens which should be part of REST specification |
- | {{:visionx:documentation:import-application-step4.png?nolink|Import Application - Step 4 - Database Settings}} | + | {{:visionx:documentation:rest-generation-3.png?nolink|}} |
- | ====== Application Installation ====== | + | ==== Create Swagger Documentation ==== |
- | To install the application on an application server, the "Installation" function on the "Tools" menu is used. | + | With the option 'Create Swagger documentation' an API developer Swagger ([[https://swagger.io/|swagger.io]]) documentation can be generated. |
- | {{:visionx:documentation:install-application-step1.png?nolink|Install Application - Step 1 - Select Installation Mode}} | + | In the second step you can select the screens which should be part of REST specification. |
- | In the first step, a selection is made whether only the application, the database, or both should be installed. | + | {{:visionx:documentation:rest-generation-3.png?nolink|}} |
- | Each VisionX application consists of an application and a database. The application contains workscreens, actions, reports and functions. The database contains the tables, views, and data. | + | Swagger is an interactive developer REST documentation which can be used from developers to test the available services. |
+ | |||
+ | {{:visionx:documentation:rest-generation-4.png?nolink|}} | ||
+ | |||
+ | For more details about REST Services see: [[:visionx:rest_services|REST Services]] | ||
+ | |||
+ | ====== Installation ====== | ||
+ | |||
+ | To install the application on an application server, the 'Installation' button on the 'Tools' menu is used. | ||
+ | |||
+ | In the first step, you can chose whether to install the application on-premise/in your own cloud or in the VisionX Cloud. The VisionX Cloud is a fully hosted solution that allows for one-click installation of an application. You can find more details in the VisionX Cloud documentation. | ||
+ | |||
+ | {{:visionx:documentation:install-1.png?nolink|}} | ||
+ | |||
+ | ===== Own Infrastructure ===== | ||
+ | |||
+ | After selecting the 'On-Premise/Own Cloud' option in the first step and clicking 'Next', we then make a selection whether only the application, the database, or both should be installed. | ||
+ | |||
+ | {{:visionx:documentation:install-2.png?nolink|}} | ||
+ | |||
+ | Each VisionX application consists of an application and a database. The application contains screens, actions, reports, and functions. The database contains the tables, views, and data. | ||
The application is installed on an application server, while the database is installed on a database server. | The application is installed on an application server, while the database is installed on a database server. | ||
- | The users can run the installed application with their PCs. This can be done, for example, by entering the application's URL in a browser. After the application is started, the user enters log-in credentials and is then able to access the relevant workscreens via the application menu. | + | In the following step, the application server for the installation of the application is selected. |
The following figure shows an overview of the application's system architecture. | The following figure shows an overview of the application's system architecture. | ||
- | {{:visionx:documentation:system-architecture-application.png?nolink|System Architecture - Application}} | + | {{:visionx:documentation:system-architecture.png?nolink|}} |
- | In the following step, the application server for the installation of the application is selected. | + | **Requirements for the application server**: |
+ | |||
+ | * OpenJDK / OracleJDK 8 >= | ||
+ | * Any Java Application server / Servlet Container (e.g. Apache Tomcat 8 >=) | ||
+ | * Any 64bit Linux or Windows >=7 | ||
+ | * Any VM / Container – Docker/Kubernetes | ||
+ | |||
+ | **Database** | ||
+ | |||
+ | * Oracle, PostgreSQL / EDB, MS SQL, DB2, My SQL, Informix | ||
+ | |||
+ | You can select one of the application server or you create a 'Web Application Archive' ( WAR file) instead. This file can then be installed manually via the application server's configuration interface. | ||
+ | |||
+ | {{:visionx:documentation:install-3.png?nolink|}} | ||
+ | |||
+ | You can select one of the listed application servers and deploy the application directly via VisionX. | ||
+ | |||
+ | ^Application Server ^Description ^ | ||
+ | |**Tomcat** |Apache Tomcat Application Server: (https://tomcat.apache.org/) | | ||
+ | |**Glassfish** |Glassfish Application Server: (https://glassfish.org/) | | ||
+ | |**WildFly/JBoss AS** |WildFly Application ServeR: (https://www.wildfly.org/) | | ||
+ | |||
+ | If one of the possible application server is selected, the relevant parameters are entered in the next step. In addition to a name, the version, server (name/IP), port, user name, password, and manager path need to be entered. The application path can also be edited. | ||
+ | |||
+ | {{:visionx:documentation:install-4.png?nolink|}} | ||
+ | |||
+ | **The application can only be deployed, if you have install/activate the [[https://tomcat.apache.org/|Tomcat Management Console]]** | ||
+ | |||
+ | The database is installed in the next step, where either a new or existing database user is selected. | ||
+ | |||
+ | {{:visionx:documentation:install-5.png?nolink|}} | ||
+ | |||
+ | In the 4th step you can specify how the database will be imported. (See [[#choose_database|Choose Database]]). | ||
+ | |||
+ | {{:visionx:documentation:install-6.png?nolink|}} | ||
+ | |||
+ | 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 | ||
+ | |||
+ | **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 | ||
+ | |||
+ | **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 | ||
+ | |||
+ | **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.** | ||
+ | |||
+ | 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 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. | ||
+ | |||
+ | ===== VisionX Cloud ===== | ||
+ | |||
+ | VisionX Cloud provides a simple and convenient way to deploy your applications in an external runtime environment. The application can be up and running in just a few minutes. | ||
+ | |||
+ | ==== Installing The VisionX Cloud Add-On ==== | ||
+ | |||
+ | Before we can install an application in the VisionX Cloud, we first have to install the add-on in VisionX. Open the solutions store on the VisionX main menu. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-1.png?nolink|}} | ||
+ | |||
+ | Select 'Add-ons' on the left side. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-2.png?nolink|}} | ||
+ | |||
+ | And click the '+' icon next to the VisionX Cloud menu item. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-3.png?nolink|}} | ||
+ | |||
+ | The Add-on will now be installed. Please restart VisionX after the installation is complete. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-4.png?nolink|}} | ||
+ | |||
+ | ==== Installing An Application In The VisionX Cloud ==== | ||
+ | |||
+ | After the VisionX Cloud add-on has been installed, we can select it as an option during the installation process. Let’s install the VisionX 'Contacts' demo application. Click on 'Installation' in the main VisionX menu. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-5.png?nolink|}} | ||
+ | |||
+ | Select the 'VisionX Cloud' option and click 'Next. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-6.png?nolink|}} | ||
+ | |||
+ | Select 'New Service' and click 'Next'. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-7.png?nolink|}} | ||
+ | |||
+ | Select the 'Contacts' application and click 'Next'. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-8.png?nolink|}} | ||
+ | |||
+ | On the next screen, we can change the URL for the application, and select one of three options for the runtime environment: | ||
+ | |||
+ | * Small: used for applications with few concurrent users (up to 5), lower amounts of data (mostly text, with few images and files) and small to medium sized reports (up to about 20 pages). | ||
+ | * Medium: used for applications with more concurrent users (up to 30), medium amounts of data (including images and files) and medium to large sized reports (up to about 20 pages). | ||
+ | * Large: used for applications with many concurrent users (up to 100), large amounts of data (including images and files) and large sized reports (up to about 20 pages). | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-9.png?nolink|}} | ||
+ | |||
+ | After selecting the environment, we click 'Finish' to start the installation. This process may take a few minutes. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-10.png?nolink|}} | ||
+ | |||
+ | The application is now installed in the VisionX cloud. We can start it in a browser by navigating to the URL specified during the installation process (in this case: vxdemo.visionx.cloud) | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-11.png?nolink|}} | ||
+ | |||
+ | ==== Monitoring The Application Status ==== | ||
+ | |||
+ | We can check the status of the application by selecting 'Add-Ons' and then 'VisionX Cloud' in the VisionX main menu. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-12.png?nolink|}} | ||
+ | |||
+ | This will bring up the VisionX Cloud service management screen. Here you can see the status of all your applications that were installed in the VisionX Cloud. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-13.png?nolink|}} | ||
+ | |||
+ | Clicking on the down arrow on the 'Update Status' button will open a menu with options. | ||
+ | |||
+ | {{:visionx:documentation:install-cloud-14.png?nolink|}} | ||
+ | |||
+ | ^Action ^Description ^ | ||
+ | |**DB Export** |TBD | | ||
+ | |**DB Transfer** |TBD | | ||
+ | |**DB Dump Export** |Exports a DB dump from the selected application. | | ||
+ | |**DB Dump Import** |Imports a DB dump to the selected applicattion. | | ||
+ | |**Reinstate backup** |The opacity value of the used UI elements. | | ||
+ | |**Update Status** |The image which is used in the login screen. | | ||
+ | |**Restart** |Restarts the VisionX Cloud service for the selected application. | | ||
+ | |**Delete service** |Deletes the VisionX Cloud installation for the selected application. | | ||
+ | |||
+ | ====== Add Ons ====== | ||
+ | |||
+ | [[https://visionx.sibvisions.com/pricing/|Read more about subscriptions and which add-ons is included]]. | ||
+ | |||
+ | ===== Query Editor ===== | ||
+ | |||
+ | The VisionX Query Editor helps Citizen Developers to link data from multiple tables, group data or create SQL statements. The resulting queries can be used in any VisionX screen, for example, on dashboards, reports or specific reporting screens. | ||
+ | |||
+ | For more details see the [[:visionx:addon_queryeditor|Query Editor]] documentation. | ||
+ | |||
+ | ===== Scheduler ===== | ||
+ | |||
+ | The VisionX scheduler allows us to automate recurring activities. We can call workflows, server actions/functions and any Java code periodically. | ||
+ | |||
+ | 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. | ||
+ | |||
+ | ===== CSV Import ===== | ||
+ | |||
+ | The CSV import modul offers a possiblity to import data from a CSV file into an existing data model. | ||
+ | |||
+ | For more details see the [[:visionx:addon_csvimport|CSV Import]] documentation. | ||
- | The following application servers are supported: | + | ===== Filter And User Profiles ===== |
- | * Apache Tomcat | + | The User Profile AddOn saves your screen layout if you close a screen and restores everything if you open the same screen again. |
- | * JBoss Application Server | + | |
- | * Cloudbees (Cloud Application Services) | + | |
- | * Oracle Glassfish | + | |
- | If the required application server is not on this list, a "Web Application Archive" (= WAR file) can be created instead. This file can then be installed manually via the application server's configuration interface. Depending on the VisionX license, it is possible to create a .WAR file for the installation of Liferay Portlets and/or webservices. | + | For more details see the [[:visionx:userprofiles_filters|User Profiles and Filters]] documentation. |
- | {{:visionx:documentation:install-application-step2.png?nolink|Application Installation - Step 2 - Select Application Server/Installation Type}} | + | ===== Workflow ===== |
- | If an application server is selected, the relevant parameters are entered in the next step. In addition to a name, the version, server (name/IP), port, user name, password and manager path need to be entered. The application path can also be edited. | + | VisionX includes a complete workflow engine for automating business processes such as approval workflows. |
- | {{:visionx:documentation:install-application-step3.png?nolink|Application Installation - Step 3 - Application Server Settings}} | + | For more details see the [[:workflow:home|Workflow Engine]] documentation. |
- | The database is installed in the next step, where either a new or an existing database user is selected. | + | ===== SSO over Windows AD ===== |
- | See: [[#visionx_administration|VisionX Administration]] | + | The Single Sign On over Microsoft AD Add On enables authentication via Windows AD. For more information, please refer to the Add On documentation. |
- | {{:visionx:documentation:install-application-step4.png?nolink|Application Installation - Step 4 - Select Database}} | + | ===== REST Services ===== |
- | In the following step, the option "Delete and recreate database objects" can be used to delete the database objects of the selected user before the import. The "Import Data" option is used to import the data from the export file. | + | 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:documentation:install-application-step5.png?nolink|Application Installation - Step 5 - Database Settings}} | + | For more details see the [[:visionx:rest_services|REST Services]] documentation. |