Application Configuration

Application Configuration consists of Top Panel & Explorer, which are required for building an application.

Top Panel

On the top left, we have File, Edit & View and on the top right, we have Automate & Build.

Fig 1: File, Edit & View

File

In this section, we have a few options to perform actions like creating, saving, duplicating & closing modules.

Fig 2. File Options

1. New

When you click on File, the first option will be New. When you hover over new, you will be able to see three options New Screen, New Event, and New Function.

• New Screen: Clicking on “New Screen” will open a popup window to start creating a new screen. Here, you need to specify the name and description of the screen as per requirement. The created Screen will be visible on the Explorer Panel under the Interfaces Section. A new screen can also be created by clicking on the “New Screen” icon against the “Interfaces” section.

Fig 3. New Screen Pop-Up

• New Event: Clicking on “New Event” will open a popup window to start creating a new event. Here, you need to mention the name of the event. The created event will be visible on the Explorer Panel under Interfaces Section. Events are front-end actions that can be defined as changing the state or behavior of an object by performing certain actions. Actions can be a button click, cursor movement, keypress through the keyboard, or page scrolling in your application’s UI. A new event can also be created by clicking on the “New Event” icon against the “Interfaces” section.

Fig 4. New Screen Pop-Up

• New Function: Clicking on “New Function” will a popup window to start creating a new function. Here, you need to mention the name of the function. The created function will be visible on the Explorer Panel under the Functions Section. Functions help users to build backend processing logic that performs simple & complex tasks for the application. A new function can also be created by clicking on the New Function against the “Functions” section.

Fig 5. New Screen Pop-Up

2. Save Changes

As the name suggests this option helps in saving all the changes you have made in your current canvas. It could be a data model, screen, event, function, application menu, access control, or resources.Message will be displayed as “Saved“.

3. Save All Windows

This step helps in saving changes that have been made in all the windows/tabs in your application. Message will be displayed as “Saved“.

4. Duplicate

Clicking on this option will duplicate a screen, an event, and a function. This makes building an application easier by saving time for similar builds. You can also duplicate a module by using Duplicate Screen, Duplicate Event, or Duplicate Function icons against respective modules.

5. Close Window

Clicking on the close window will close the window that is open currently. You can also close a particular window by clicking on the “X” icon on the current tab.

Edit

In this section, we have four options to perform actions like cut, copy, paste, and delete on event steps.

Fig 6: Edit Options

1. Cut

• This feature is used to remove a selected step or content from its current location in the created event

• When you "cut" something, it's typically removed & placed into a temporary clipboard, allowing you to paste it elsewhere in the same event or a different one.

2. Copy

• This feature is used to duplicate or replicate a selected step or content of the event

• When you "copy" something, a duplicated version is placed into a temporary clipboard, leaving the original content in place. You can then "paste" the copied content elsewhere in the same event or a different one.

3. Paste

• This feature is used to insert the content from the clipboard into a new location

• After "cutting" or "copying" something, you can use "paste" to place the content at the cursor's location or in the selected area

4. Delete

• This feature is used to delete an event step from your workflow.

• When working on a particular event workflow, if you wish to delete an event step due to any specific reason, just click on the event step and then click on Delete under the Edit section.

These basic editing functions are fundamental to manipulating and organizing content in an event.

View

This section can be used to zoom in and out while building the application. There are four options you can choose from when you hover on Zoom. They are 25%, 50%, 75% and 100%. The canvas size will change depending on the chosen zoom percentage. You can also zoom in and out using your scroll on the mouse. 

Fig 7: Zoom Options

Automate

You can find this option in the top right corner of your Explorer screen. This option helps to automate the application development process. To understand this, we will look at an example.

1. Let’s say you want to create a CRUD-based application i.e. an application to display a list of records, view/update records & add records. The usual approach is to create necessary screens, events, functions, and menus and deploy the application. To minimize this manual process of creating every module individually, the Automate option can be used. Steps to automate CRUD operation are explained below:

2. Create a Data Model for your application under the Database

3. To create application modules automatically, click Automate on the right corner of the explorer screen. In the tables dropdown, you will get a list of all created tables. You can either select all tables or choose individual tables. This is the reason why you should create a database first. Next, you can select the entities that you want to create via PIES AI according to your requirement & click Generate. Click Close to close the pop up window.

4. Modules will be automatically created. On the explorer pane, you will be able to find screens & events under the interfaces section. Backend processing functions can be found under the functions section. The system will automatically group relevant screens & events in one folder depending on the table name under Interfaces and all related functions in one folder depending on the table name under Functions.

Fig 8: Automate Pop-Up

Fig 9: Screens, Events and Functions generated via Automate

Build

This option is to preview your application & analyze errors if any. More details on this feature can be found in the Deploysection

Fig 10: Build

Explorer Overview

On creating a new project, Explorer panel will be provided on the left side of screen. This explorer panel has various sections, which are useful for building a full-fledged application. The sections on the explorer panel are:

1. Database: This section helps in building or importing Data Model and creating schema of the data to be used in building the application.

2. Interfaces: This section helps in building screens and frontend events of your application.

3. Functions: This section helps in building the backend functions of your application.

4. Menu: This section helps in building the navigation bar of your application.

5. Access Control: This section helps in configuring the Access Control of your application.

6. Resources: This section helps in storing SMTP connection details & creating REST API endpoints.

7. Code Blocks: This section is used to write your own custom code which
   can be later used in your applications.

You will find detailed information on the above in modules section.

The explorer panel can be resized by dragging it to the right. This can be done with the help of a cursor. You can use the cursor to increase or decrease the width of the explorer panel.

Fig 10: Resizing explorer panel

The explorer panel has various sections. It can get difficult for a user to differentiate between different options. Therefore, to minimize human error every feature is given a unique Icon such as below,

1. Screen

2. Events

3. Functions

4. Code Blocks <>

Module Functionalities

The below functionalities are possible in explorer pane modules.

1. Interfaces: Hovering over the Interfaces section reveals three icons - New Screen, New Event, and New Folder.

   1. The First Icon () refers to the New Screen. Clicking on this Icon allows users to create a New Screen under the interfaces section.

   2. The Second Icon () refers to the New Event. Clicking on this Icon allows users to create a New Event under the interfaces section.

   3. The Third Icon () refers to the New Folder. Clicking on this Icon allows users to create a New Folder under the interfaces section.

Fig 11: Features against Interfaces

1.1. Screen: Clicking on individual Screen reveals four icons - New Event, Duplicate Screen, Edit Screen, and Delete Screen.

a. The First Icon () refers to the New Event. Clicking on this Icon creates a New Event in the respective folder. i.e. an event can be created within a screen thereby allowing users to group relevant screens & events.

b. The Second Icon () refers to the Duplicate Screen. Clicking on this Icon creates a copy of the screen in the respective folder. Duplicated screen names will be suffixed by ‘copy’.

c. The Third Icon () refers to the Edit Screen. Clicking on this Icon allows the user to Edit the Screen name.

d. The Fourth Icon () refers to the Delete Screen. Clicking on this Icon deletes the selected Screen.

Fig 12: Feature Against a Particular Screen

1.2 Event: Clicking on an individual event reveals three icons - Duplicate Event, Edit Event, and Delete Event.

a. The First Icon ( ) refers to a Duplicate Event. Clicking on this Icon creates a copy of the event under the interfaces section or within the respective folder. The duplicated event name will be suffixed by ‘copy’.

b. The Second Icon ( ) refers to the Edit Event. Clicking on this Icon allows the user to Edit the Event name.

c. The Third Icon ( ) refers to the Delete Event. Clicking on this Icon deletes the selected event.

Fig 13: Features Against Event

2. Functions: Hovering over the Functions section reveals two icons - New Function and New Folder.

   1. The First Icon () refers to the New Function. Clicking on this Icon creates a New Function under the Functions section. Duplicated function name will be suffixed by ‘copy’

   2. The Second Icon () refers to the New Folder. Clicking on this Icon creates a New Folder under the Functions section.

Fig 14: Features against Functions

NOTE: The rest of the sections such as Database, Menu, Access Control, and Resources do not have any of the above-mentioned features against them.

2.1. Function: Clicking on an individual Function reveals three icons - Duplicate Function, Edit Function, and Delete Function.

a. The First Icon () refers to a Duplicate Function. Clicking on this Icon creates a copy of the function in the respective folder. Duplicated function name will be suffixed by ‘copy’.

b. The Second Icon () refers to the Edit Function. Clicking on this Icon allows the user to Edit the function name.

c. The Third Icon () refers to the Delete Function. Clicking on this Icon deletes the selected Function.

Fig 15: Feature Against a Particular Function

2. Folder: Hovering on an individual Folder reveals five icons - Add Screen,Add Event,Add,Edit folder,New Folder and Delete Folder

3. The First Icon () refers to the New Screen. Clicking on this Icon allows users to create a New Screen under the interfaces section.

4. The Second Icon () refers to the New Event. Clicking on this Icon allows users to create a New Event under the interfaces section.

5. The Third Icon () refers to the Edit Screen. Clicking on this Icon allows the user to Edit the Screen name.

6. The Fourth Icon ( ) refers to the New Folder. Clicking on this icon allows user to create another sub folder under the Main folder.

7. The Fifth Icon () refers to the Delete Screen. Clicking on this Icon deletes the selected Screen.

3.Code Blocks: Hovering over Code blocks reveals icon - Add Code Blocks

Add Block Icon ( ) - refers to the New Code Block. Clicking on this Icon allows users to create a New Code Block.

3.1. Code Block: Clicking on an individual Code Block reveals two icons - Edit code_block and Delete code_block.

Edit code_block () - refers to Edit Code Event. Clicking on this Icon allows users to edit the Code Block.

Delete code_block () - refers to Delete Code Block. Clicking on this Icon allows users to delete the Code Block created.

Palette Information

A palette is a list of attributes that are used to build the application by dragging and dropping the attributes onto the canvas. The modules that have palette linked to them are Screens, Events, and Functions. Clicking on any of the Screen, Event or Function opens a Palette below the Explorer panel. Each module has a different set of attributes in its Palette. The palette will change depending on what the user has clicked or selected in Explorer. The palette can be resized just like the explorer panel with the help of a cursor.

Fig 19: Palette Example for Events

Fig 20: Palette Resizing with the Help of Cursor

Folder Structure

The Explorer panel has various sections that help in building the application as discussed above. To create a clean architecture, it is important to organize the application in a readable manner. This is where the “Folder Structure“ feature come in handy. Folder creation & modification are widely used in functions and the interfaces section as these sections consist of screens, events, and functions, which are the core modules when building an application.

As discussed above the “New Folder“ Icon creates a New Folder in their respective section namely Interfaces and Functions. Users can also drag and reposition the folders that have been created. However, the only limitation while repositioning the folders is that they cannot be repositioned across different sections i.e. a folder from Interfaces cannot be moved to Functions & vice versa.

Users can rename the folder using the Edit Folder () icon.

Modules

Below are the different modules involved in building an end-to-end application.

DATABASE INTERFACES

FUNCTIONS MENU

ACCESS CONTROL RESOURCES