Quick Start Tutorial
We hope this documentation gives you a glimpse of the incredible possibilities GenioWeb offers. Get ready to unleash your creativity and build powerful, customized solutions in no time!
If you have any questions or need further assistance, don't hesitate to reach out. Happy coding with GenioWeb!
Homepage Overview
The Homepage is where the user starts their Generative AI coding adventure. In this page you can see the project’s name, the Genio version that is being used, as well as some useful shortcuts that take the user immediately to pages such as Tables, Forms, Menus, as well as to Generate the solution and define your application’s visual style. More shortcuts and widgets will be added in the future for a more personalized look.
Main navigation bar:
Data Menu – In the Data Menu, developers can start working with the database. It includes options to create tables, define primary and foreign keys, manage enumerations, and view indexes, among other functionalities.
Forms – The Forms page allows developers to create fields and interactive elements for the application's user interface. They can retrieve fields from existing tables or create new form elements from scratch, such as buttons, unfiltered table lists, and formulas for value calculations. It also supports adding global lists.
Navigation – In the Navigation menu, developers can define the application's structure by creating menus and submenus. They can organize accessible data, set user-role limitations, and improve overall navigation between pages.
Resources – The Resources tab is used to customize the visual aspects of the application. Developers can set up fonts, manipulate colors to align with the business branding, and perform other UI-related customizations.
Processes – On this page, developers can define the behaviors the application will trigger depending on the actions performed by the user that interacts with your solution. From warning messages to limiting the number of units on a field, it all depends on the usability of the developed solution.
Access Rights – The Access Rights menu allows developers to create user roles and define access levels within the application. It is where the permissions and restrictions for different user types are managed.
Manual Code – The Manual Code option enables developers to add custom code to their solutions. This can be used to give a personalized look and feel, add exclusive business features, implement queries, and more.
Generation – The Generation page provides developers with a debugging environment to test their solutions before publication. It generates web applications by default, but other options like Office Add-ins and C# Web Services are also available. The integration with Visual Studio allows for code review, minor edits, and testing using IIS Express.
Distribution – The Distribution menu provides access to Genio's technical documentation for developers.
Settings – In the Settings menu, developers can customize various parameters related to their Genio project. They can manage clients, modules, applications, and features. The Internationalization feature allows setting up available languages and base currency for the application.
Data Menu
Organize and Manage Your Data
In GenioWeb, tables form the backbone of your solution. They allow you to organize and manage your data efficiently. Creating a table is a breeze! Just head over to the "Tables" page, click the "+ Insert" button, and fill in the necessary details.
With GenioWeb, you have full control over your tables. Define the table name, display name, and plural display name to ensure it's easily recognizable for you and your users. Add fields, such as foreign keys, text/numeric values, and dates, to capture the information you need. You can even set up business rules to enforce specific behaviors based on your business requirements.
To access the Tables menu and create a new table in the database, developers can either select the "Tables" option on the main page's top left or use the shortcut available on one of the cards (as shown below).
After selecting one of these options, developers will be directed to a page where they can see a button labeled "+ Insert". Clicking on this button opens a new page where developers can create their first table in the system.
Developers can create two types of tables: Standard Tables and Table Areas (formerly called Virtual Tables).
Areas (previously named Virtual Tables) allow developers to edit their names without changing the data in the database and associated domains.
The table creation page is divided into nine sections:
1. Identification This is the tab that lets the developer's name their new table in the “Table Identifier” and “Schema” fields. If the “Schema” field isn’t filled, GenioWeb will use the name written on the Table Identifier field to name the table in the database. Once the dedicated fields are filled, click Apply to save the data so that it can be considered on the ongoing tabs. Display name and plural display name is how the Table is name and is the information that appears displayed to the standard user of the solution built.
2. Fields On the Fields tab, developers can start building the table's content. They can create a primary key and add fields such as foreign keys, text/numeric values, dates, and more.
3. Business Rules The Business Rules tab allows developers to define the behavior of data in the database based on business requirements.
4. Access Rights This option enables developers to define the user levels that have access to the data displayed in the table.
5. Forms In the Forms tab, developers can check the forms linked to the database table and edit the user interface layout for their solution.
6. Relationships The Relationships tab provides a view of the relationships between tables through foreign keys.
7. Lists Similar to the Relationships tab, the Lists tab allows developers to view and edit table lists available in the table itself or tables linked via foreign keys.
8. Menu Items Developers can create and edit menu components that allow users to access and manipulate data in the GenioWeb solution.
9. Indexes The Indexes tab displays the index IDs of menus that reference the data available in the database. It can improve data retrieval speed in SQL Server and provides an overview of menus related to the table.
Table Search
The “Tables” page menu also allows the developers to search for specific tables. The dev can either use the “Search box” displayed on the top right and search by table name, domain, date of creation, among other terminologies, or use the filters that are displayed above the table list (Standard, System and Domain).
System Tables are created by default and can be used by the developers to manage user and password data, logbooks, user level restrictions/authorizations, among other tasks. They are hidden since GenioWeb reveals the Standard tables by default. To reveal them on the table list, you can either remove the selection from the “Standard” filter, and the System Tables will appear on the Table list. If you wish to focus solely on System Tables, you may select the “System” filter instead.
Note: Selecting both “Standard” and “System” will hide all the tables. Either select one to focus your view, or none in case you wish to view all the tables available. Tables can also be searched via the search box on the top right.
Here you can learn more about the Data menu
Forms
GenioWeb provides a user-friendly interface to interact with your data. The "Forms" section allows you to configure how your data is presented and how users can interact with it. Adding a new form is a breeze! Just click the "+ Insert" button, and you're on your way.
With forms, you can create a seamless user experience. Define the form's name, type, and display name to make it intuitive for your users. Choose from various components to customize the form layout, including auto-populated fields, table lists, buttons, and more.
Forms Editor
Use the the Form Editor! This tool enables developers to configure the layout of form components through a Graphical User Interface (GUI). This interface visually represents how components will appear to the end users of the generated solution.
To add a new Form, the developer will be greeted with a page with the following options:
Identification
This option is where the developer references the table where the Form will draw its data. On the Identifier field the developer can define the name of the Form in the database and choose the table that is meant to be linked in Form Table.
Note: This field will be populated with options only after Tables are created in the database.
The Form Type option that defines how the data/layout is presented to the final user. It can be a normal webpage, a popup window, a widget, a tab, etc. On the Display Name field is where the developer can define the name of it that will be displayed to the end user.
The Notes field is for any additional written information the developer may want to add. This information isn’t available to the end user of the solution, as it is only available for the development environment users.
Components
The components option is where the elements that can be interacted with by the solution’s end user are defined.
Usually they can either be auto-populated with the data that has already been added to the table that it links to, but additional fields and table lists can be added, for example, an Unfiltered Table List that draws data from another table, or a Button that takes the user to a specific page, or perform a particular action on the page. This is the menu where the developer is able to define the solution’s structure, from the homepage to menus and submenus, all based both on data present on the tables and forms, but any additional pages can be added depending on the business needs.
Here you can learn more about the Forms menu
Navigation
Menu editor
This is the menu where the developer can define the solution’s structure, from the homepage to menus and submenus, all based both on data present on the tables and forms, but any additional pages can be added depending on the business needs.
By integrating an intuitive navigation editor with drag-and-drop capabilities and clear error messaging, users are empowered to create efficient, error-free navigation structures with ease, improving overall productivity and user satisfaction.
[Here you can learn more about the Navigation menu]()
Processes
Implement all business rules In this menu, you'll find all the necessary tools to create and implement rules for your project. It's a practical space where you can manage conditions, set up alerts and notifications, and activate triggers to make your application more user-responsive and efficient.
Here you can learn more about the Processes menu
Resources
Customize and Brand Your Solution GenioWeb believes in the power of branding. The "Resources" page enables you to customize the look and feel of your solution to align with your business's branding. Add your company logo, choose the perfect color scheme, and tweak the UI elements to make it truly yours. With GenioWeb, your solution can be as unique as your business.
Here you can learn more about the Resources menu
Access Rights
Make It Accessible and Secure
We understand the importance of access rights and security. In GenioWeb, you have full control over user roles and access levels. Define user types, roles, and limitations to ensure that each user gets the right level of access. You can create a secure environment where your data remains protected.
The option Access Levels and PHE is merely informative, and it displays the several levels and user roles available, as well as their respective limitations as set up by the developer.
When accessing this menu for the first time, three default users are visible: Unauthorized (00), Retrieval (01), and Administrator (99). These default users can be edited in the Access Rights tab. Developers can create additional user types to meet the specific needs of end users.
These default users can be edited in the Access Rights tab, but developers can create and add more user types to the database, all depending on the business needs of the end users that will make use of the developed solution.
Note: Currently, Genio is limited to a maximum of 100 distinct levels of access, with the lowest and least privileged level being 00 and the highest level being 99.
User roles can also be created and linked to user levels defined in Access Rights. Roles represent groups of users with the same access level.
Here you can learn more about the Access Rights menu
Manual Code
Bring Your Own Code
GenioWeb encourages you to bring your own code! If there's a specific feature or layout that you need and it's not available out-of-the-box, no worries! You can add your custom code to customize your solution even further. Implement queries, leverage different platforms, and make your solution truly tailored to your business needs.
It is possible to implement queries in various platforms available in Genio:
- SQL Server
- Oracle
- MySQL
- SQL Azure
- SQLite
Here you can learn more about the Manual Code menu
Generation
Test, Debug, and Deploy
GenioWeb provides a seamless development experience. With the "Generation" section, you can test and debug your solutions before publication. GenioWeb generates web applications by default, but you also have options like office add-ins, C# web services, and DLL generation. Integrate with Visual Studio, review and edit the code, and use the IIS Express feature for smooth testing and debugging. When you're ready, deploy your solution and see it in action!
By default, GenioWeb generates applications in Web, but isn't limited to it, as there are more options available, like "Office Addins", C# Web Services, generate DLL's, etc.
Genio is linked to Visual Studio and makes use of its resources to build the developed solution in it. Developers can then review the code, make minor edits and use the IIS Express feature to test and debug the solution.
Upon generation, Genio will provide two files that are distributed as .zip files: WebAdmin and MYAPP.
WebAdmin
The WebAdmin is a crucial part of GenioWeb that allows you to manage and configure your application. It covers a wide range of features including:
Email Server Configuration: You can create and configure a new Email server for sending messages. This is accessible under the Email Server menu item in the WebAdmin administration portal.
User Registration: You can allow registration of new users and configure the user registration settings. This includes defining a title and an icon, configuring the business form, and defining the level/role for the registered user.
Processes: This feature allows you to define conditions and triggers.
Access Rights: Here, you can define user levels and access permissions.
Database Maintenance: The system checks for any necessary updates or changes that need to be implemented, especially if there has been a version migration or a Genio update.
If necessary, you can move the logs to a separate database. This requires changes in the Configurations.xml file in the WebAdmin project and selecting the relevant options in the Audit tab. You can find the audit table on the server.
In addition to Tables, Enumerations, and Indexes, there are more options under Data where you can choose between Internal imports, Data classification, Groups of fields, Full-text search, Fixed fields, and System tables.
MYAPP
The MYAPP zip folder that Genio generates contains the solution itself, and is part of the GenCopy mechanism. It is used to add external Apps files into the main project. Here's what you need to know about it:
- The folder "Apps" is where all external apps should be placed. It is located inside the ClientApp folder.
- The external app folder name must be the same as the application ID, otherwise, there will be errors compiling the project.
- By default, when a Vue app uses "router" for navigation, it is expected to have a file called router.js inside the app folder. The generation process uses this file. This requirement is needed because we don't want interferences between the main app navigation and external app navigation.
- The ID is needed in a few places during the generation process, like a parameter in Manwin, folder name, etc. The ID must respect the windows file/directory name restrictions.
- Genio will generate the external apps integration only if there exists a manual code "APPPACKAGE" With the app ID like a parameter. You could have the app in GenCopy, and the files will be in the project, but the external app won't work.
- The content of the manual code must be the list of packages that are not present in the main application package list.
It is important that both folders remain inside a common folder, therefore upon downloading the files, we suggest you save the .zip files on the following folder structure:
Directory: C:\Quidgest\Projects\GEN (project name)
| Mode | LastWrite | Time | Length | Name |
|---|---|---|---|---|
| -a---- | 10/24/2024 | 12:51 PM | 12626261 | MYAPP.zip |
| -a---- | 10/24/2024 | 12:51 PM | 5006537 | WebAdmin.zip |
To extract the .zip files and ensure the folder structure integrity, 7zip uses a feature that extracts and creates a folder with the same name of the original .zip file:
Once the files are extracted, the folder name and its layout will remain the same as in the .zip files. If the folders contain a diferente name (ex. MYAPP (1)), when running the project in Visual Studio you will experience unexpected errors and behaviors.
Inside the extracted WebAdmin and MYAPP folders, the developer will find the Visual Studio Project files WebAdmin.sln and GenioMVC.sln respectively. It is essential that the WebAdmin.sln file is opened first, to configure the database settings and user access to the Solution that is then generated through the GenioMVC.sln file.
Before compiling the code generated by Genio on Visual Studio, ensure that you have the Multiple Startup Projects enabled and select ClientApp and Administration on WebAdmin to Start, as for GenioMVC, set Start the ClientApp and GenioMVC:
