App Editor

Screens are the backbone of your app, defining its structure and user interface.
Each new screen becomes an opportunity to design unique user interfaces and interactions, tailoring your app to your specific needs.

Step 1: Add screen #

When you create a new application, a starting point is already set –
the first screen is automatically generated.
To expand your application’s functionality and structure,
simply click on the icon to add additional screens.

Duplicate Or delete a screen #

1. Click on the three dots ••• on the right side of the Screen you want to duplicate/delete at the screens section.
   
2. Click on the action you wish to execute.
   

Step 2: Adjust properties #

The app creation board is located on the right side of the application. Through it, you can edit, modify, and configure your application’s screens and sub-screens.

1. Screen Properties #

1. Screen Name
   The “Screen Name” field allows you to give your screen a clear and descriptive label. This name will be visible to users and help them understand the purpose of the screen at a glance.
2. Screen Button Color
   The “Screen Button Color” defines the color of the button that appears in the menu for navigating to this screen.
3. Screen Id
   “Screen ID” is a unique identifier automatically assigned to each screen.
4. Description
   The “Description” field provides a context for the screen’s purpose.
   A clear description helps in understanding and organizing your screens effectively.
5. Direction
   “Direction” sets the layout orientation of your screen. Choose between options: left-to-right or right-to-left.
6. Accessible from Main Screen
   The “Accessible from Main Screen” option allows direct access to this screen from the main application screen. When enabled, the screen is accessible from the main application screen.
7. Enable exit screen
   The “Enable Exit Screen” option adds a button on the screen that allows the user to exit and return to the main menu.
8. Base Table
   Selecting a “Base Table” lets you pick where your screen’s data comes from. It’s the main data that your screen shows and works with. Your app can get data directly from the Engini workbook’s tables.
9. Can add, edit and delete record
   Control the ability to add, edit, and delete records from this screen. Toggle these options on or off based on the actions you want to allow users to perform.
10. Can Filter
    Turn on “Can Filter” to help users easily find and explore data.
    Important:
    Search will query the result displayed on the screen while filter will perform a query against the table records and will refresh the screen to display the results.
11. Display records on screen entry
    “Display records on screen entry” sets a predefined context for the screen by populating it with specific data upon opening.
12. Can scan barcode
    Enable “can scan barcode” to seamlessly use barcode scanning in your app. When you turn on “can scan barcode”, you will see an additional field called “Autocomplete” which, when turned on, will enable automatic completion of the fields typed in the barcode field:
    1. Barcode search definition:
       1. Choose from which table to look for the fields to complete.
       2. Select the field from which the values ​​will be completed.
          
    2. Search in Fields:
       1. Click on “Add Field” button.
       2. Choose from the dropdown the field you want to search in.
       3. Return those steps for adding more fields.
          

You can find the complete guide for Workbooks in Workbooks category.

Important:
Without making this choice, certain crucial functionalities will remain out of reach. Make sure to pick your base table to unlock the full potential of your application.

Fields #

Fields are the building blocks of your screen, allowing you to collect, organize, and present data in a structured manner.

You have the flexibility to draw from the fields available in the chosen base table, ensuring seamless integration with existing data, or if your requirements extend beyond, you can effortlessly add new fields that capture the specifics of your data landscape. 

1. Base Table’s Fields
   After setting your base table, when you navigate to the ‘Fields’ section, by default, the fields from your selected table materialize before you.
2. Add Fields
   1. Click on the “Add field” button and the tooltip will popup showing the field’s types you can use.
   2. Choose the field type you want to add from the following:
      1. Text
         
         1. Fieldname – Customize the name to describe the field’s purpose.
         2. Field type – Fixed as “text” for handling text data.
         3. Default value – Set a pre-filled value.
         4. Is Barcode (toggle) – Enable to use the field as a barcode scanner.
      2. Button (Allows you to create clickable buttons that users can interact with to perform specific actions or trigger events within your application.)
         
         1. Fieldname – Customize the name to describe the field’s purpose.
         2. Field type – Fixed as “button” for action buttons.
         3. Display Title – Specify the text displayed on the button.
      3. Checkbox
         
         1. Fieldname – Customize the name to describe the field’s purpose.
         2. Field type – Fixed as “Checkbox”.
         3. Default value – Choose from the dropdown options (True/False).
      4. Date
         
         1. Fieldname – Customize the name to describe the field’s purpose.
         2. Field type – Fixed as “date” for handling date and time data.
         3. Default value – Set an initial date value if needed.
         4. Format – Define the date format for display.
         5. Show time (toggle) – Enable to include time alongside the date.
         6. Time only (toggle) – Use this for a field that displays time only.
      5. Integer & Number
         
         1. Fieldname – Customize the name to describe the field’s purpose.
         2. Field type – Fixed as “integer” for whole numbers and “number” for decimal values.
         3. Default value – Set an initial numeric value if needed.
         4. Format – Specify the display format for numbers.
         5. Is Barcode – Enable to use the field as a barcode scanner.
      6. Integration Dropdown (Allows users to select options from a dropdown menu linked to other systems or data sources.)
         & People & Status & Link & Labels
         
         1. Fieldname – Customize the name to reflect the field’s purpose.
         2. Field type – Fixed for each type, including Integration Dropdown, People, Status, Link and Labels fields.

For more information about the Fields types, go to Build a Table.

2. View Properties #

In this part, discover View Properties.
Each screen has 2 views: preview– list of records and detailed– specific record.

Preview #

“Preview” offers a window into your application’s user-facing side, letting you design data presentation.
Since “preview” presenting a record collection, you can also classify and filter data as needed.

Fields #

1. Field name
   Next to the field name in the table appears an editable field with the name of the field in the table by default. You can change the name of this field, so that a different name is displayed to the user than the name in the table. Please note that altering the field name within the application does not affect the field’s name in the database or the data table; it solely impacts the user interface context.
2. Eye icon
   Adjacent to the Field name is an eye icon – clicking it toggles visibility of the field. This empowers you to decide whether users see the field or if it remains hidden. A crossed-out eye indicates the field is hidden from users.
3. Available in Filter
   The “Available in Filter” option appears only after selecting “Can Filter” in the Screen Properties. By using this option, you can select which fields will be filterable on the screen.
   When the filter button is clicked on the screen, you can see the fields you chose to filter.
   
   After clicking on it, you can choose a condition and define the value that the selected field should match.
   
   If “Can Filter” hasn’t been selected, this is what will be displayed for each field.
   

Sorting #

Sorting lends order to your data. With the so you can establish how the view’s data is organized.
 

1. Choose Field
2. Decide the order in which data is presented.
   Ascending showcases data in increasing order,
   while descending displays it in decreasing order.
3. By click on the “Add field” label, you can add sort option.

Initial query #

By defining an “Initial Query,” you set the conditions for data inclusion. This ensures that when users open the view, they’re presented with data that’s contextually relevant from the get-go. 

1. Choose a Field
2. Choose a Condition
3. Define the value: input the value that the selected field should match or meet based on the chosen condition.
4. By click on the “Add filter” label, you can add more filters to further refine the initial data view.

Detailed View #

The “Detailed View” feature offers an extended interface within your application, strategically designed to provide additional information without overwhelming the user.
While “Detailed” focuses on a specific record, it doesn’t allow operations like classification and filtering.

When you click on the “Detailed View” tab, you gain access to all available fields, empowering you to make the following adjustments:

1. Field name
   Next to the field name in the table appears an editable field with the name of the field in the table by default. You can change the name of this field, so that a different name is displayed to the user than the name in the table. Please note that altering the field name within the application does not affect the field’s name in the database or the data table; it solely impacts the user interface context.
2. Eye icon
   Adjacent to the Field name is an eye icon – clicking it toggles visibility of the field. This empowers you to decide whether users see the field or if it remains hidden. A crossed-out eye indicates the field is hidden from users.
3. Required
   Toggle “Required” to indicate whether the field must be filled out by users. When turned on, users won’t be able to add, edit, delet and search a record without providing the necessary information.
4. Read only
   By activating “Readonly,” you ensure that users can only view the data and not modify it. This is particularly useful for displaying data that shouldn’t be altered.
5. Location row
   Control the placement of the field within the layout by specifying its location row.

3. Sub Screens #

Sub screens let you connect screens within your app smoothly. This means you can easily add one screen inside another, making a connected user experience.

Choose Sub Screen #

1. Screen
   Choose the Screen you want to use as a sub screen.
2. Display Order
   “Display Order” determines the sequence in which Sub Screens appear within the main screen. By assigning a numerical value, you orchestrate the order of presentation, ensuring a structured and intuitive navigation flow.
3. Display in Main Form
   When you turn on “Display in Main Form”, your Sub Screen seamlessly integrates into the main screen’s layout. Users can access the Sub Screen’s content without needing to navigate away from the main context. 

Use Conditions #

Using conditions on Subscreen fields is like making a smart cut in a puzzle. You decide what pieces to show based on certain rules, creating a clear and focused view for users.

1. Choose a Field
2. Choose a Condition
3. Define the value: input the value that the selected field should match or meet based on the chosen condition.
4. By click on the “Add Condition” lable, you can add more conditions to further refine the initial data view.

Default values #

Setting a default value for Sub Screen fields, ensures that the field in the Sub screen already has a value from the parent screen, maintaining the cut we’ve defined when use conditions.

1. Choose Field
2. Set value expression.
   

4. Business Rules #

As we finish looking at Screen Properties, we step into Business Rules.
To learn more about using Business Rules as part of your app, check out the link.