# Getting Started

## Overview

A brief description of all the tools available at your disposal when you log in as a developer or administrator.

{% content-ref url="getting-started/overview" %}
[overview](https://next-docs.cloudio.io/getting-started/overview)
{% endcontent-ref %}

## Building Application

### What is an Application?

An Application is a collection of various components via. pages, data sources, functions, workflows, roles, access controls etc. Once an application is developed, you can then easily migrate it from one instance to another in just a few clicks.

### Application Data

Each application can be backed by its database. All the application data will be stored in the configured database schema. Use the connections sidebar panel to manage different database connections.

### External System Integrations

When building enterprise applications, there may be some use cases for which you may have to pull in data from external systems and at times even push data to the external systems. As long as there are REST APIs exposed by those external systems or allow direct database connections, you can integrate those external systems using external data sources and build a page or dashboard that can display data from one or more such systems.

### Steps Involved

#### Define a Storage Connection

Using the Storage Connection panel, define a new storage connection if not already defined. This storage connection will be used by any file attachments or CSV upload/download performed via the application.

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2F3FajQjZ7yPIk1oycqUGH%2FScreen%20Shot%202022-10-09%20at%2010.25.51%20PM.png?alt=media&#x26;token=b956a4b9-38c1-40fc-a7e0-58bac48abf97" alt=""><figcaption><p>Edit Storage Connection Panel</p></figcaption></figure>

#### Define a Database Connection

Using the connections panel, define a new connection for your application. Give a unique code, name and choose the database type and provide the connection URL in a format supported by the database type. Optionally provide a script to be executed every time a connection is pulled out from the pool to service user requests.

{% hint style="info" %}
Also define an additional read-only connection with a database user who only has read permissions to the application data. This read-only connection will be used by SQL Worksheet when authorized users issue ad-hoc SQL queries.
{% endhint %}

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2Fxv8dMucTiiSWjtfJr81Q%2Fimage.png?alt=media&#x26;token=094eb2ea-41d9-4aa3-b76a-2c66d14fad54" alt=""><figcaption><p>Edit Connection Panel</p></figcaption></figure>

#### Define the Application using the above connection

Using the Applications panel, create a new application and choose the database connections and storage connection. You must define a storage connection if not already done using the Storage Connections panel.

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2FMEXYv4VzTx7KLylr72dW%2Fimage.png?alt=media&#x26;token=71a3e99f-f7f7-49ba-8747-4dda15e07149" alt=""><figcaption><p>Application Header Toolbar</p></figcaption></figure>

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2FEbBwM4F36JzkTylNkpYt%2Fimage.png?alt=media&#x26;token=7f996e63-1a96-43f3-afed-99cadde6b97d" alt=""><figcaption><p>Edit Application Panel</p></figcaption></figure>

#### Define Roles

Create one or more roles as per the user personas required for the application. Choose a unique code & name for each role. A role is used to grant access permission on pages & data sources. You can also define new roles by copying permissions from an existing role.

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2FhazvO242KkASoy0kJMja%2Fimage.png?alt=media&#x26;token=03c1f7fd-8634-41cf-9a63-c71a8edf1d4c" alt=""><figcaption><p>Application Roles Panel</p></figcaption></figure>

#### Define DataSource

Using the DataSource panel, define one or more data sources as needed for your application. If your database tables are already created, make sure the existing tables have the necessary [WHO Columns](https://next-docs.cloudio.io/datasource/who-columns) if the application needs to update the data in those tables. If you do not have the tables pre-defined, then use the From Scratch option to manually defined a data source.

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2FJzSatz9RmGwxTkxjBI2R%2Fimage.png?alt=media&#x26;token=739c058b-0458-4cb0-97fa-d25e15e6c847" alt=""><figcaption><p>DataSource Creation Wizard</p></figcaption></figure>

When manually defining a data source, choose the appropriate data type and max length for the attributes.

{% hint style="info" %}
Note: When you add a new field (also called an Attribute) to an existing data source, a column is added to the database table.
{% endhint %}

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2Fm17YE9zuJjs7Kp27Vg87%2Fimage.png?alt=media&#x26;token=49e198cd-b0c7-4e2b-9f04-c4c85a6b4f5a" alt=""><figcaption><p>Add or Edit Field Panel</p></figcaption></figure>

After defining a data source, navigate to Access Settings and assign the appropriate privileges to various roles.

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2Fu7skz8htD1EPD3X8cx7m%2Fimage.png?alt=media&#x26;token=fd0c8d9f-3eb4-4773-970b-c2d6fdf73d1c" alt=""><figcaption><p>DataSource More Actions Menu</p></figcaption></figure>

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2FkCVubMgGvg8U37lCGrrk%2Fimage.png?alt=media&#x26;token=aaadb96f-bf7e-4422-831b-b930a33c9a67" alt=""><figcaption><p>DataSource Access Settings</p></figcaption></figure>

#### Define Pages

Using the Pages panel, create one or more pages as needed for the application. For a simple page with CRUD operations, chose the Generate for a DataSource option to auto-generate a page for each data source. Start with a blank page, for more complex UIs. There are some pre-defined templates you can choose from as a quick start while building a page.

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2FeUpi0RHKsXRiZQtPOu6V%2Fimage.png?alt=media&#x26;token=b449b034-2493-4fd0-9dde-ba6e97eb654a" alt=""><figcaption><p>Create Page Wizard</p></figcaption></figure>

After creating a page, navigate to Access Settings and assign access to all the required roles.

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2FtTsl8y8IniMz0Hjxyzod%2Fimage.png?alt=media&#x26;token=80f304e8-afcb-46b4-8f57-d6c3eff836bc" alt=""><figcaption><p>More Actions Menu</p></figcaption></figure>

{% hint style="warning" %}
No two developers can work on the same page at a time. If more than one developer is accessing the page at the same time, their profile icon will be shown on the header similar to google docs. When the other developer commits any changes to the page, the changes will automatically be pushed to all other users viewing the same page.
{% endhint %}

{% hint style="info" %}
As a best practice, divide the page into multiple sub-pages and use a wrapper page that embeds all the other sub-pages. That way different developers can work on a different part of the wrapper page at the same time.
{% endhint %}

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2FxmLSsF0ZzcNrmofzeDkL%2Fimage.png?alt=media&#x26;token=3681a48f-cd45-4ad5-b8d7-de4b533135c4" alt=""><figcaption><p>Sample Page with Complex Layouts</p></figcaption></figure>

<figure><img src="https://754235390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZ64BhrvkgPMyL9F3tk%2Fuploads%2Fz3HkGpuvnIehwr3RqY05%2Fimage.png?alt=media&#x26;token=4287bf8a-7402-449a-ba65-48e3a377d4fb" alt=""><figcaption><p>Designer View</p></figcaption></figure>

* Create cloud functions for more complex functionality
* Create an external data source to pull data from external systems.
* Define workflows for automating business processes e.g. Approvals
* Assign application roles to users
* Define lookups and profiles as needed for the application.
* Upload images to be used in the application.
* Define and use custom react component
* Define and use a custom workflow node
* Set up languages and upload labels for all the languages defined.
* Create test scripts for test automation
* Generate application patch and DB migration scripts for migrating the app from DEV to UAT & PROD.

## Advanced UI Topics

{% content-ref url="ui/app-controller" %}
[app-controller](https://next-docs.cloudio.io/ui/app-controller)
{% endcontent-ref %}

{% content-ref url="ui/page-controller" %}
[page-controller](https://next-docs.cloudio.io/ui/page-controller)
{% endcontent-ref %}

{% content-ref url="ui/custom-component" %}
[custom-component](https://next-docs.cloudio.io/ui/custom-component)
{% endcontent-ref %}

## Advanced Backend Topics

{% content-ref url="datasource/scripts" %}
[scripts](https://next-docs.cloudio.io/datasource/scripts)
{% endcontent-ref %}

{% content-ref url="datasource/scripts/sample-scripts" %}
[sample-scripts](https://next-docs.cloudio.io/datasource/scripts/sample-scripts)
{% endcontent-ref %}

{% content-ref url="datasource/scripts/module-imports" %}
[module-imports](https://next-docs.cloudio.io/datasource/scripts/module-imports)
{% endcontent-ref %}

{% content-ref url="datasource/who-columns" %}
[who-columns](https://next-docs.cloudio.io/datasource/who-columns)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://next-docs.cloudio.io/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
