GenioWeb Development

GenioWeb Development Guide

Introduction

Welcome to the GenioWeb Guide. This guide is designed to help you navigate and understand the functionalities of GenioWeb, ensuring you can create and develop applications efficiently. Whether you're a beginner or an experienced developer, this guide will provide step-by-step instructions to help you get the most out of GenioWeb.

If you want more detailed information about GenioWeb then you find in the current page you can go to:

1. Getting Started with GenioWeb

1.1. GenioWeb Homepage Overview

  • Introduction: Welcome to GenioWeb! This platform allows you to create and manage databases with ease. In this guide, we'll walk you through the process of creating tables, adding fields, and setting specific conditions to ensure your data remains organized and efficient.
  • Homepage Layout: Familiarize yourself with the GenioWeb homepage, which features cards as shortcuts to various options.
  • Menu Overview: Understand the functionalities of each menu, including:
    • Data: The starting point for building your application. Create tables, fields, enumerations, and more.
    • Forms: Design the user interface of your application.
    • Navigation: Build the menu structure for your application.
    • Resources: Customize the visual aspects, add text elements, translations, icons, and edit the layout.
    • Processes: Define conditions and triggers.
    • Access Rights: Define user levels and access permissions.
    • Manual Code: Add custom scripts to enhance GenioWeb's capabilities.
    • Generation: Generate, debug, test, and publish your application.
    • Distribution: Access documentation for Genio and GenioWeb.
    • Settings: Manage project and GenioWeb settings.

1.2. Customizing the Homepage

  • Learn how to rearrange the cards on the homepage to suit your workflow.
  • Understand how to add widgets and track processes directly from the homepage.
  • Discover the "compact" feature to automatically organize your cards.

2. Creating Tables and Forms

2.1. Creating Your First Table

Objective: Understand the process of creating a new table and populating it with essential fields.

  • Accessing the Tables Page: Navigate to the tables page either from the homepage or through the Data menu.
  • Table Creation: Understand the importance of table identifiers, schema names, display names, and notes.
    1. Navigate to GenioWeb and select the option to insert a new table.
    2. We'll start by building a table for countries. Name this table "country".
    3. Remember to write the title in both singular ("country") and plural ("countries") forms. This aids in automation and information labeling later on.
    4. Click to save your table.
  • Adding Fields: Grasp how to incorporate fields to your table, designate primary keys, and comprehend field properties like identifiers, schema names, data types, and conditions.
    1. With your table created, it's time to add fields. Start by creating a field named "name" for the country name. Set the size to 85 characters.
    2. Add fields for the alpha2 code (2 characters), alpha3 code (3 characters), and the numeric code. Remember, even though the numeric code consists of numbers, treat it as a text field to preserve leading zeros.
    3. Save your fields.
  • Setting Field Conditions:
    1. Navigate to the country table.
    2. For the name field, set a rule that ensures uniqueness and that it cannot be null (set as Unique and Required on Field Conditions, that will appear on the tab called Conditions of Field Insertion).
    3. Apply similar rules to other fields as needed.
  • Understanding the Human Key: pon saving, GenioWeb will prompt you to create a human key using the field name. The human key is pivotal for automations GenioWeb performs. For instance, when integrating the country table into the people table, GenioWeb will use the human key to determine which field should be used to select the country.

You can get more information on GenioWeb - Tables.

2.2. Creating Forms

Objective: Learn how to create, customize, and set conditions for forms in GenioWeb, ensuring an optimal user experience.

  • Introduction to Forms: Forms in GenioWeb empower developers to dictate data display and user interaction for their applications. They are instrumental in sculpting the user experience, facilitating data access, insertion, and collection
    1. Go to "Forms" main page and click on +Insert button.
    2. Fill the Identification parameters:
      • Identifier: In the Identifier field, assign a unique name to the form in the database. Ensure it's within eight characters and devoid of spaces.
      • Form Table: Select the table that will supply data to the form.
      • Form Type: Determine the interface behavior during user interaction with the form.
      • Display name: Name that the form will have in the generated program. It will appear in the form's top bar on the left side.
    3. After filling out the Identification tab, save the data and go to the Components tab.
  • Components tab: Delve into the elements constituting a form and their representation as UI components for end-users.
    1. To add components from the table, click the +Add Components button. This action auto-configures components based on table data.
    2. Modify and replicate components as required, tailoring their properties.
    3. Once you've configured the desired form components, press the "Apply" button to save the data and continue editing, or "Save" to finalize and exit.
  • Conditions tab: In the Conditions tab, establish user restrictions based on their role or level. Set access levels for reading and modifying the form's content. Form conditions can be employed to convey special prerequisites to the end user. Establish condition types, designate messages to display when conditions are activated, and craft custom rules using the Formula editor.
  • Form Editor: The Form Editor grants you the capability to refine the layout, positioning, and size of form components.
    1. Access the editor by selecting the button on the desired form component and opting for the "Form Editor" button, or via the buttons present at the top and bottom of the form component editor page.
    2. On the left panel, adjust component properties such as order, grouping, character limits, label names, and alignment. The visual representation on the right allows for intuitive drag-and-drop of components.
      • Adjust the form layout for optimal user experience, ensuring the country name appears first, followed by the country codes.
    3. Always remember to save your modifications by clicking the "Save" button.
  • You can also introduce additional components to the form, such as navigation buttons or unfiltered table lists that display data from diverse tables.
  • For an in-depth understanding of setting conditions in forms, consult the Table Conditions.

2.3. Creating Your First Menu

In the digital realm, navigation is the backbone of user experience. Menus, as primary navigation tools, guide users through the intricacies of an application, ensuring they can access the features and information they need with ease. In GenioWeb, the Menus module is dedicated to crafting intuitive and user-friendly navigation structures for your applications.

  • Accessing Menu Tree: Navigate to menu tree by selecting Navigation and then Menus.
  • Menu creation
    1. Select you project name with the left mouse button.
    2. Press create menu from the symbols on menu tree (squares with plus symbol).
    3. Select the table you want to do a menu for.
    4. Notice that a new menu appear under the name of your project with three levels:
      • First a Menu item Type of the Menu kind;
      • Second level a Menu item Type of the List kind;
      • Third level a Menu item Type of the Visualization Form kind.
  • Editing List level: On the List Menu item Type (if it's you first Menu will have the number 11) you can use the reorder (4 arrows crossed symbol) to set the order of the columns of the inserted data. On "Edit" functionality (pencil symbol, shown in Figure 1) you can also make filters, access other features, define colors of list presention and positioning and set permissions of create, read, change, delete and duplicate as "Enable" or "Never".
Editing list level on Menus

Figure 1: Editing list level on Menus.

Coming back to our tutorial, regarding Country table...

  1. Add a new top menu for the country table.
  2. GenioWeb will automatically generate a sequence: define the country, display a list with country details, and upon selection, showcase the country form.
  3. Save your progress.

  • Generating the Code: Genio will generate all the necessary code for your new table and fields.

    1. Once the code generation is complete, you'll need to perform database maintenance to accommodate the new table and fields.
    2. After maintenance, log into the system. You should now see two top menus: one for people and another for countries.

  • Manual Data Entry: With the table and form ready, you can manually input country data. For instance, input data for Portugal and Mozambique using the alpha2, alpha3, and numeric codes. Save each entry.

  • Importing Data from Excel: Manually entering data for each country can be tedious. We'll explore how to automate this process by importing data from an Excel sheet.

    1. If you have an Excel sheet with country data, you can import it to populate your table. For that access the Other features of list level of menus and check "File import", as shown in Figure 2.
    2. Ensure that the data in the Excel sheet matches the fields in your table.
    3. Import the data. Note: If you've manually entered data before importing, ensure there are no duplicates.
Defining file import on GenioWeb

Figure 2: Defining file import on GenioWeb.

  • Consecutive data insertion and pop-up form implementation:
    1. In the desired menu (11 COUNT), choose the "Repeat Insertion" option.
    2. Change the form type from "Normal" to "Pop-Up".
    3. Save and review the changes in the system.

3. Establishing Relationships Between Tables

Objective: Elevate your system by weaving relationships between tables using GenioWeb.

3.1. Crafting the "People" Table

  • Table Creation: Initiate by constructing a secondary table named "People".
  • Field Addition:
    1. Head over to the "People" table section.
    2. Introduce a new field labeled "email" and allocate a length of 254 characters.
    3. Confirm your field addition and ensure its visibility in both the form and menu.

3.2. Delving into Foreign Keys

Objective: Grasp the essence of foreign keys in bridging tables.

  • Introduction to Foreign Keys: Recognize the pivotal role of foreign keys in interlinking tables.
  • Creating a Foreign Key:
    1. Navigate to the "People" table.
    2. Forge a foreign key within the "People" table that establishes a connection to the "Country" table.
  • Deciphering Primary and Foreign Keys:
    • Dive into SQL Server to unravel the intricate relationship between primary and foreign keys.
    • Understand that a primary key singularly identifies a record, while a foreign key in the 'people' table correlates to the primary key in the 'countries' table.

3.3. Implementing and Testing Rules

Objective: Ensure data integrity by setting up and testing rules.

  • Setting Restrictions and Rules:
    1. To uphold data quality, establish rules for your tables. For instance, ascertain the absence of duplicate records for countries.
    2. For the "People" table, enforce a rule that mandates the "Name" field to be non-empty.
    3. Validate your rules by attempting to store records that breach them. The system should thwart such endeavors.

3.4. Enhancing the System Interface

Objective: Refine the user interface for a more intuitive experience.

  • Improving the Form View:
    1. Head to the "People" form in GenioWeb.
    2. Introduce subdivisions of countries to the form.
    3. Incorporate an additional column in the form to exhibit countries linked with subdivisions. Ensure the country is contingent on the chosen subdivision.
  • Interactive Form Features:
    1. Transition to the 'count P' form in GenioWeb.
    2. Modify the control type of desired zones to "collapsible", allowing users to expand or collapse sections as needed.
    3. For a more dynamic experience, switch to accordion zones where only one section remains active at a time.
    4. Group these zones and label them, for instance, "accordion". Modify the group's control type to "accordion".

Conclusion

Congratulations on completing this guide! You're now equipped with the knowledge to navigate GenioWeb, create tables, design forms, and establish relationships between tables. As you continue your development journey with GenioWeb, remember to refer back to this guide and the Academy videos for clarity and guidance.