Ticket Id
Issue Description
Ticket Type
External Ticket Number
Priority
Application Name
Application Version
Platform Version
Status
UI Component Name
Assigned To
Planned Resolution Name
Actual Resolution Name
Is Internal
Created By
Creation Date
Last Update By
Last Update Date
Customer Id
Requested By
| | **CPTM\_CUSTOMER\_USER\_MAPPING** |User Id
Creation Date
Last Updated Date
Created By
Last Update By
Purpose
Customer Id
End Date
| | **CPTM\_AVIS\_CUSOTMERS** |Account Name
Account Type
Description
Account Number
Status
Currency Code
Payment Term ID
Tax code
Attribute 1
Attribute 2
Attribute 3
Attribute 4
Attribute 5
Attribute 6
Attribute 7
Attribute 8
Attribute 9
Approver
Sales Contact
Creation date
| | **CPTM\_AVIS\_LOOKUPS** |Lookup Type
Lookup Code
Meaning
Description
Created By
Creation Date
Last Updated By
Last Update Date
Start Date
End Date
| | **CPTM\_AVIS\_TICKET\_SUMMARY\_V** |Customer Id
New
In Progress
Awaiting Testing
Awaiting Response
On Hold
Closed
Under Review
| {% hint style="info" %} *The table names can be different as per your convenience and requirements. However, the following tutorial contains the names as specified.* {% endhint %} # Creating datasources Data sources are used to fetch the data from and perform DML operations (for example, insert, update, delete) on underlying database objects or cloud services. 1. In the top right corner of the menu bar, click
.\
The navigation pane is displayed.
2. Under the **Developer** role group, click **Manage Datasources**. The **Manage DataSources** page with the list of data sources is displayed.
3. In the upper right corner, click **New**.\
The **NewDatasource** page is displayed.
4. In the **Details** tab, under **Properties**, fill-in the following mandatory fields:
1. **Name:** A unique name used to refer to the data source object within the application. For example: **CptmCustomers.**
2. **Table Name:** The name of the database object containing the data; for example: **CPTM\_AVIS\_CUSTOMERS**.
5. Click **Save**. The datasource is created and can be accessed from the **Manage** **Datasources** page.
{% hint style="info" %}
*To know more about datasources, visit the* [***Working with Datasources*** ](/creating-datasources/working-with-datasources/understanding-the-cloudio-data-sources)*section.*
{% endhint %}
# Defining attribute properties
When a datasource is created using a table, the platform generates an attribute for each column in the table. You can also create an attribute manually. You can edit the properties of the attributes as per the requirement.
The data from the database is displayed in the table in the **Attributes** section.
* To fetch all the attributes and their values from the database, in the **Attributes** tab, in the upper-right of the **actions** bar, click 
.
* The **CptmCustomers** datasource will contain the following attributes:
* Account Name
* Account Type
* Account Number
* Description
* Status
* Currency code
* Payment Type ID
* Tax code
* Attribute 1
* Attribute 2
* Attribute 3
* Attribute 4
* Attribute 5
* Attribute 6
* Attribute 7
* Attribute 8
* Attribute 9
* Approver
* Sales Contact
* Creation date
{% hint style="info" %}
*To verify the attributes of all the datasources, visit the* [***Creating tables*** ](/building-your-first-application/building-your-first-application/creating-tables)*section.*
{% endhint %}
# Assigning roles to a datasource
Datasources are secured by assigning roles with permissions for access and other operations. You can control their level of access by selecting the required permissions during the creation of datasources.
1. To assign roles to a datasource, open the **\Roles** tab.\
The **Roles** pane is displayed.
2. To select a role to assign permissions, in the upper right corner of the **Roles** pane, click **Add**.\
A row is added in the **Roles** table.
3. Under the **Role** column, from the list, select **Developer** role, to which permissions are assigned.
4. Select the following checkboxes to assign permissions to the selected role in the respective columns:
| **Permission** | **Description** |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Insert allowed** | Indicates permission to insert a new record |
| **Update Allowed** | Indicates permission to update an existing record |
| **Audit Allowed** | Indicates permission to view the changes made by others from the Audit Page
Note: Audit Page can be accessed from File> Record> Audit menu item
| | **Delete Allowed** | Indicates permission to delete an existing record | | **Query Allowed** | Indicates permission to fetch data | | **Primary Key** | Select an attribute as the primary identification component of the datasource. | 5\. Click **Save**. The selected permissions are assigned to the\ **Developer** role. {% hint style="info" %} *To know more about adding roles, visit the* [***Working with Roles and Users*** ](/managing-roles-and-users/working-with-roles-and-users/creating-a-role)*section* {% endhint %} * To view the created datasource: * Go to the **Manage** **Datasources** page. * On the left-end of the search bar, click
. The newly created datasource can be viewed on top of the list of existing datasources.
For the tutorial, we have created individual data sources for the tables created.
* Repeat these steps to create data sources and add attributes for all the required tables.
* *List of t**ables mapped to the corresponding datasource** for the tutorial are as follows:*
| **Datasource name** | **Table name** |
| -------------------------- | -------------------------------- |
| CptmProductCustomerMapping | CPTM\_PRODUCT\_CUSTOMER\_MAPPING |
| CptmCustomerUserMapping | CPTM\_CUSTOMER\_USER\_MAPPING |
| CptmCustomers | CPTM\_AVIS\_CUSTOMERS |
| CptmLookups | CPTM\_AVIS\_LOOKUPS |
| CptmCustomerTickets | CPTM\_AVIS\_CUSTOMER\_TICKETS |
| CptmLookupTypeView | CPTM\_CP\_LOOKUP\_TYPES\_V |
| CptmTicketSummaryView | CPTM\_AVIS\_TICKET\_SUMMARRY\_V |
# Creating pages
A page is the canvas on which the user interface of the application is built. We build the user interface by placing various components on the page.
## Creating home-page
1. In the **Navigation** **menu**, under the **Developer** role, in the **Developer** group, click **Pages**. The list of all existing pages is displayed.
2. On the top-right corner, click 
. A new page is created, and its properties are displayed.
3. Under the **Page** **Details** tab, enter the following details:
| **Label** | **Description** |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Page Name | **cphome** |
| Icon | Select a suitable icon for the page from the list that will be displayed in the browser tab.
By default, the page holds a desktop icon.
| | Group Header |Ticket Management System
This is the menu group under which you can view the page in the Navigation menu.
By default, it is My Menu Group.
| {% hint style="warning" %} ***Page Code, Page Params, Page State, Seq No., and URL** are auto-generated. These values are used to define navigation across pages.* {% endhint %} 4\. Under the **Roles** **Granted** tab, on the top-right corner, from the\ **Actions** list, click **Add** **Role**. A blank row is created.  1\. Under the **Role** column, from the list, select **Developer** role. 2\. Select the **Start** **Date** and the **End** **Date** to define the period\ for which the role has access to the page. 5\. On the top-right corner, click **Save**. * To view the created page: * Go to the **Pages** page. * On the left-end of the search bar, click
. The newly created page can be viewed on top of the list of existing pages.
{% hint style="info" %}
*To know more about pages, visit the* [***Working with pages*** ](/creating-pages/working-with-pages/creating-a-page)*section.*
{% endhint %}
For the tutorial, we need to create individual pages for easy navigation.\
Repeat these steps to create multiple pages.
Pages to be created for the use-case are as follows:
* ***cphome***
* ***cpticketmgmt***
* ***LookupPage***
*The new ticket page will be automatically created as the new ticket is added to the datasource.*
## Accessing the home-page
You can add various components to make the page interactive and user-friendly.
To add components to a page:
* In the Navigation menu, under the **Developer** role, in the **Ticket Management System** group, click ***cphome***. The homepage canvas is displayed.\
***Note:** You can also access the page from the **Pages** page.*
* On the **Pages** page, against the application homepage entry, under the **URL** column, click the **URL** of the homepage. The application homepage canvas is displayed.
{% hint style="info" %}
*To know how to add components to a page, visit the* [***Working with page components***](/creating-pages/working-with-pages/working-with-page-components) *section.*
{% endhint %}
# Designing the user interface
You can build the user interface by placing various components on the page.
1. To design the user interface, on the menu bar, click the **Enable Developer mode** icon.\ 
2. To open the page designer, click 
.
3. To add components, right click on the parent component. The list of all existing child components is displayed.
4. Select the required component from the list.
{% hint style="info" %}
*To know how to add components to a page, visit the* [***Working with page components*** ](/creating-pages/working-with-pages/working-with-page-components)*section.*
{% endhint %}
## Adding components to the homepage
You can view that the page is already added as a component in the **Tree** tab.
1. In the page designer, right click on the **Page** component, add a **Vertical Layout Panel** component to arrange the page elements vertically in a single column.\
*By default, the child component, **Vertical*** ***Section**, is added.*
2. Right-click on the first **Vertical** **Section** component, and add a **Card** **Wrapper** component to clearly define the sections of the page into header and body. \
*By default, the child components, **Card Header** and **Card Body**, are added.*
1. Right-click on the **Card Header** component, and click **Delete**. We can add the title to the page under the **Card** **Body** component.
2. Right-click on the **Card** **Body** component and select a header component, namely **H1**.
3. Double-click on the **H1** component, the properties tab is displayed.\
Under **General** properties, in the **Text** field, type the required page title. For example: **Welcome to the Customer Portal!**
3. Right-click on the second **Vertical** **Section** component, and add a **Card** **Wrapper** component.
1. In the **Properties** tab of the **Card Header** component, under **General** properties, in the **Title** field, type the required section title. For example: **Ticket Management.**\
*The section title will be used as a placeholder to navigate to the ticket summary page.*
4. Right-click on the **Card** **Header** component, and add **Trigger On Click**.
1. To define an action on click, right-click on the trigger and add the **Go To Page** action.
2. In the **Properties** tab of the **Go To Page** action, under **General** properties, in the **Page State** field, type the **Page state** of the ticket summary page. \
For example: **app.cptickets**
{% hint style="info" %}
* *To copy the **Page State** of a component:*
* *In the **Navigation*** ***menu**, under the **Developer** role, in the **Developer** group, click **Pages**.*
* *Under the Page column, double-click on the ticket summary page name, **cpticketmgmt.** The **Page Details** page is displayed.*
* *Copy the value in the **Page*** ***State** field. You can use this value to navigate to the **cpticketmgmt** page canvas.*
{% endhint %}
5\. To add an explanation to the section, right-click on the **Card**\
**Body** component, and add a **Paragraph** component.
1\. In the **Properties** tab of the **Paragraph** component, under\
**General** properties, in the **Text** field, type the required\
description.\
For example: **Create, Prioritize, and Monitor tickets**
{% hint style="info" %}
*You can change the font color and font type for the description under the **Text*** ***Style** properties.*\
*You can also change the position of the description by changing the margin values under **Layout** properties.*
{% endhint %}
6\. Right-click on the **Card** **Body** component, and add a **Button**\
component.\
*By default, the **Trigger On Click** is added.*
1*.* In the **Properties** tab of the **Button** component, under **Label**\
properties, in the **Text** field, type **View Lookups**.
2\. Right-click on the trigger and add the **Go To Page** action.
3\. In the **Properties** tab of the **Go To Page** action, under\
**General** properties, in the **Page State** field, type the Page\
state of the lookup page. For example: **app.lookuppage**
7\. On the menu bar, click 
. The components added to the page\
are saved.
8\. To view the page functionalities, on the menu-bar, click 
. You\
can now access the page with all the defined functionalities.
# Adding components to the lookup page
Navigate to the **LookupPage** page canvas.
You can view that the page is already added as a component in the **Tree** tab.
1. Right-click on the **Page** component, and add the **Data** **Store** component.\
You can fetch the data from the datasource that is to be displayed on the UI.
1. In the **Properties** tab of the **Data Store** component, under **Datasource** properties, in the **Data Source** field, select the **CptmLookups** datasource.\
By default, in the **Data Source Alias** field, an alias name for the datasource is created.\
*You can use the alias name of the data source henceforth.*
2. Right-click on the **Page** component and add a **Card Wrapper.**
3. Change the **Card Header** title to **Manage Lookups.**\
*Add a suitable icon for the title.*
4. Right-click on the **Card Header** and add an **Action Button** component. \
A separate trigger is not needed for the **Action Button**, as it contains pre-defined actions.
1. In the **Properties** tab of the **Action Button**, under **Action** properties, in the **Action** field, select **New**.
2. In the **Data Source Alias** field, select **CptmLookupsAlias.**
3. Under **General** properties, in the **Text** field, type **NEW.**\
*You can select a suitable icon for the button, for example: **plus-circle.***\
*You can also align the button by changing its margin values under **Layout** properties.*
5. Right-click on the **Action Button** and click **Duplicate.** The triggers and properties of the **Action** **Button** are copied.
1. Change the **Title** to **SAVE**.
2. In the **Action** field, select **Save**.
6. Duplicate the **Action Button** and change the **Title** to **DELETE**.
1. In the **Action** field, select **Delete Selected.**
7. Right-click on the **Card Body** and add a **Vertical Layout Panel**.
1. Right-click on the first **Vertical section** and add a **Smart Search** component.
2. In the **Properties** tab of the **Smart Search** component, under **General** properties, in the **Data Source Alias** field, select **CptmLookupsAlias.**
3. Right-click on the **Smart Search** component, and click **Auto Populate Attributes.**\
The attributes of the **CptmLookups** datasource are added to the search component.\
*You can use these attributes to search for a particular ticket. You can add, delete, or modify any of the filters added to the **Smart*** ***Search** component.*
8. Right-click on the second **Vertical section** and add a **Grid** component.
1. In the **Properties** tab of the **Grid** component, under **DataSource** properties, select the **Use the Existing Data Source** checkbox.
2. In the **Data Source Alias** field, select **CptmLookupsAlias**.
3. In the **Properties** tab of the **Grid** component, under **General** properties, select the **Auto Fill Columns** checkbox.\
*The grid will automatically take the width of the page.*
4. Right-click on the **Grid** component, and click **Auto Populate Attributes.** The datasource attributes are automatically added to the **Grid.**\
*You can remove any column component as per your requirement.*
1. Add the **Checkbox Column** component to the **Grid**.\
This component allows you to select a particular entry and perform any of the added operations (save or delete).
9. On the menu bar, click 
. The components added to the page are saved.
10. To view the page functionalities, on the menu-bar, click . You can now access the page with all the defined functionalities.
# Adding components to the ticket summary page
Navigate to the **cpticketmgmt** page canvas.
You can view that the page is already added as a component in the **Tree** tab.
## To add popup to the page
1. Right-click on the **Page** component and add the **Data Store** component .
1. Add the **CptmCustomerTickets** to the **Data** **Store** component.
2. Add the following data sources to separate **Data** **Store** components:
1. CptmCustomerUserMapping
2. CptmCustomers
3. CptmTicketSummaryView
3. Right-click on the first **Page** component, and add a **Card** **Wrapper** component.
4. Right-click on the first **Page** component, and add a **Popup** component.\
*By default, the **Vertical Layout Panel** component along with its child components is added.*
5. Right-click on the **Card** **Header** component, and add a **Button** component.
1. In the **Text** field of the **Button** component, change the title to **New** **Ticket**.
2. In the **Icon** field, select a suitable icon from the list.\
For example: **folder-plus**.
3. Add the **Show** **Popup** action to the trigger.\
The button will be used to add a new ticket to the datasource.
4. In the **Properties** tab of the **Popup** component, under **Standard** properties, copy the value in the **Item** **ID** field.
5. In the **Properties** tab of the **Show** **Popup** action, under **General** properties, in the **Popup Item ID** field, paste the **Item ID** of the **Popup** component.
### To add triggers to the Popup
* Right-click on the **Popup** component and add the following triggers:
* **Trigger After Popup Close**
* **Trigger Before Popup Open**
1. Right-click on the **Trigger Before Popup Open** and add the **Refresh** **DataSource** action.
1. In the **Properties** tab of the **Refresh DataSource** action, under **General** properties, in the **Target Data Source Alias** field, select **CptmCustomerTicketsAlias.**
2. To add a new ticket to the datasource, right-click on the trigger and add the **Insert** **Record** action.
3. In the **Properties** tab of the **Insert** **Record** action, under **General** properties, in the **Target Data Source Alias** field, select **CptmCustomerTicketsAlias.**
4. To insert a new ticket row on top of the datasource entries, select the **Insert At Top** checkbox.
5. To specify the mandatory ticket information columns, in the **Tree** tab, right-click on the **Insert** **Record** action, and add the **Input** component.
6. In the **Properties** tab of the **Input** component, under **General** properties, in the **Value** **Expression** field, click. The **Expression Builder: Value Expression** dialog box is displayed.
1. Under **Category** column, select **Datasource**.
2. Under **Choose a Datasource Alias** column, select **CptmCustomersAlias**
3. Under **Choose an Attribute** column, select **customerId**.
4. Click **Submit**. The customer Id attribute of the Customers datasources is added.
7. In the **Target Attribute** field, select **Customer** **Id**.
8. Repeat the steps to add the following input elements:
1. ticketType
2. priority
3. status
4. requestedBy
2. Right-click on the **Trigger After Popup Close** component and add the **Refresh** **DataSource** action.
1. In the **Properties** tab of the **Refresh DataSource** action, under **General** properties, in the **Target Data Source Alias** field, select **CptmCustomerTicketsAlias**.
2. Expand the child components of the **Vertical Layout Panel** component, and delete the second **Vertical Section** component. Also, delete the **Scroll** **Layout** component from the first **Vertical Section** component.
3. To add text fields to the popup for ticket description, add the **Form** component to the **Vertical Section** component.
4. In the **Properties** tab of the **Form** component, under **DataSource** properties, in the **Data Source Alias** field, select **CptmCustomerTicketsAlias.**
5. Right-click on the **Form** component and add the **Text Field** component.
1. In the **Properties** tab of the **Text Field** component, under **Label** properties, in the **Field Label** field, type **Ticket Title.**\
This text field is for the user to add a title to the ticket.
2. Under **Data** properties, in the **View Attribute** field, select **Title** from the list.
3. Select the **Insert Allowed** and **Update Allowed** checkboxes.\
*You can set the column size and change the font color and style under the **Label*** ***Style** properties. For the tutorial we have kept the column size as 12.*
4. Add the **Text** **Field** component for the following mandatory ticket information details:
1. Ticket Title
2. Ticket Description
3. Application URL
4. Username
5. Password\
*Select the corresponding datasource element for each field in the **View*** ***Attribute** field.*
6. Right-click on the **Form** component and a **Button**.
1. In the **Text** field of the **Button** component, change the title to **Create**.
2. In the **Icon** field, select a suitable icon from the list.\
For example: **folder-plus**
3. Add the **Save DataSource** action to the trigger.\
*The button will complete the action of adding the new ticket to the datasource.*
4. In the **Properties** tab of the **Save DataSource** action, under General properties, in the **Target** **Data Source Alias** field, select **CptmCustomerTicketsAlias.**
5. Right-click on the **Save DataSource** action, and add the **Hide** **Popup** action.\
*This action will close the popup once the new ticket is added in the datasource.*
6. In the **Properties** tab of the **Hide** **Popup** action, under **General** properties, in the **Popup Item ID** field, paste the **Item ID** of the **Popup** component.
7. Right-click on the **Form** component and a **Button**.
1. In the **Text** field of the **Button** component, change the title to **Cancel**.
2. In the **Icon** field, select a suitable icon from the list.\
For example: **folder-minus**
3. Add the **Hide** **Popup** action to the trigger.
4. In the **Properties** tab of the **Hide** **Popup** action, under **General** properties, in the **Popup Item ID** field, paste the **Item ID** of the **Popup** component.
8. On the menu bar, click . The components added to the page are saved.\
You have successfully added components to the page header and the popup.
The **cpticketmgmt** page will be used as a summary page to view the status of the available tickets in the database.
You need to add components to display and differentiate between the status of the available tickets.
## To add components to view the ticket count:
1. Right-click on the **Card** **Body** and add a **Vertical Layout Panel** component.
2. Delete the second **Vertical Section** component.
3. Right-click on the **Vertical Section** component and add a **Card Wrapper.**\
*You can delete the **Card Header** component.*
4. Right-click on the **Card Body** and add a **Row** component.\
*We will be creating a row with multiple columns to display the ticket statuses.*\
*By default, a **Col** component is added to the **Row** component.*
1. Right-click on the **Col** component and add a **Card Wrapper**.
2. In the **Title** field, type **Open**.
3. Right-click on the **Card Header** component and add the **Icon** component.
4. In the **Properties** tab of the **Icon** component, under **General** properties, in the **Icon** field, select a suitable icon.\
For example: **folder-open.**
5. Right-click on the **Card Body** component and add a header component, namely **H1**.
6. In the **Text** field, type 0.
7. Right-click on the **Row** component and add **Col** components for the following ticket statuses:
| **Ticket status** | **Corresponding datasource attribute** |
| ----------------- | -------------------------------------- |
| Open | New |
| In Progress | In Progress |
| Awaiting Response | Awaiting Response |
| In Testing | Awaiting Testing |
| On Hold | On Hold |
| In Review | Under Review |
| Closed | Closed |
### To view the ticket details
1. Right-click on the **Card Body** and add another **Row** component.
1. Right-click on the **Col** component and add a **Smart** **Search** component.
2. In the **Data Source Alias** field, select **CptmCustomerTicketsAlias**.
3. Right-click on the **Smart Search** component and click **Auto Populate Attributes.**
4. Add another **Col** component to the row.
5. Right-click on the **Col** component and add a button.
6. Add the **Export Data** action to the trigger.
7. In the **Properties** tab of the **Export Data** component, under **General** properties, from the options under **Field** **Type**, select **Excel**.\
*You can download the ticket summary datasource table as an Excel sheet in your device.*
2. Right-click on the **Card Body** and add **Card Table** component.\
*You can view the ticket details in a tabular form.*
1. In the **Properties** tab of the **Card Table** component, under **DataSource** properties, in the **Data Source Alias**, select **CptmCustomerTicketsAlias.**
3. Right-click on the **Card Table** and add the **Card Table Column** component.
4. Right-click on the **Card Table Column** and add a **Paragraph** component**.**
1. In the **Text** field, type **Ticket ID**.
2. In the **View Attribute** field, select **Ticket Id.**\
*You can change the length of the component by changing the pixels in **Max*** ***Width** field.*
5. Add separate **Card Table Column** components for each ticket details attribute.
6. Add the following child components to fill-in the **Card Table**:
| **Component** | **Ticket details attribute** |
| -------------- | ---------------------------- |
| Paragraph | Title |
| Paragraph | Ticket Type |
| Paragraph | Requested By |
| Row-Col | User Picture |
| Row-Col | Assigned To |
| Badge | Status |
| Badge | Priority |
| Paragraph-Date | Created On |
| Paragraph-Date | Update On |
| Paragraph | Application Name |
| | |
7\. On the menu bar, click . The components added to the page\
are saved.
8\. To view the page functionalities, on the menu-bar, click . You\
can now access the page with all the defined functionalities.
# Adding components to a new ticket page
Navigate to the **cpticketmgmt** page, and add a new ticket.
1. On the top-right corner of the **cpticketmgmt** page, click **New Ticket**. The **Add Ticket** dialog box is displayed.
2. Fill-up the necessary details in the form and click **Create**.
3. Refresh the page, and you can now see the newly added ticket as the first entry in the **Card Table**.
4. Double-click on the first entry. The new ticket page canvas is displayed.
5. On the menu bar, click . The components added to the page are saved.
## **To add components to the ticket details page component:**1. Right-click on the **Page** component and add separate **Data Store** components for the following datasources: 1. CptmCustomerUserMapping 2. CptmCustomerTickets\ *Select the **Auto-Query** and **Update Allowed** checkboxes to inherit and modify the datasource attributes.* 2. Right-click on the **CptmCustomerTickets** **Data Store** component and add **Trigger on Query.** 1. Add the **Show Popup** action to the trigger. 3. Right-click on the **Page** component and add three **Popup** components. 1. In the **Properties** tab of the **Popup** component, under **General** properties, in the **Title** field, enter **Change** **history**. 2. Change the **Title** of the second **Popup** to **Notes**. 3. Change the **Title** of the second **Popup** to **Update Title**. 4. Right-click on the **Change** **history** popup and add the **Trigger After Popup Open**.\ Add the **Query DataSource** action to the trigger. 5. Right-click on the **Vertical Section** child component of the **Notes** popup and add a **Card Wrapper**. 1. Change the **Card Header Title** to **Internal Comments**. 2. Right-click on the **Card Body** and add the **Collaboration** component. 3. In the **Properties** tab of the **Collaboration** component, under **General** properties, in the **Collaboration Datasource Alias**, type **CptmCustomerTickets.** 4. In the **Context** field, type **Internal Comments.** 5. In the **Context** **Value** field, type **#{params.ticketId}** 6. In the **Date** **Format** field, type **DD-MM-YYYY HH:mm** 7. Select the **Show Likes, Show Attachments, and Always Show Delete** checkboxes. 6. Add a button to the second **Vertical Section** of the **Notes** popup. 1. Change the **Button** **Title** to **Close**. 2. Add the **Hide** **Popup** action to the trigger. 3. In the **Properties** tab of the **Hide** **Popup** action, under **General** properties, in the **Popup Item ID** field, paste the **Item ID** of the **Notes** popup component. 7. Add a **Row** component to the **Update Title** popup**.** 1. Add a header component to the **Col** component, namely, **H5**. 2. In the **Text** field, type **Update Title**. 8. Add another **Col** component to the row. 1. Right-click and add an **Icon** component to the column. 2. Add the **Refresh DataSource** and **Hide Popup** actions to the trigger. 3. In the **Properties** tab of the **Refresh DataSource** action, under **General** properties, in the **Target Data Source Alias** field, select **CptmCustomerTicketsAlias.** 4. In the **Properties** tab of the **Hide** **Popup** action, under **General** properties, in the **Popup Item ID** field, paste the **Item ID** of the **Update Title** popup component. 9. On the menu bar, click
. The components added to the page are saved.
## **To add components for ticket status and description:**
1. Right-click on the **Page** component and add a **Vertical Layout Panel** component.
1. In the **Properties** tab of the **Vertical Section** component, under **General** properties, in the **Height** field, type **0.1.**
2. Add a **Card Wrapper** to the **Vertical Section** component.
1. Delete the **Card** **Header**.
2. Add a **Row** component to the **Card Body**.
3. In the **Properties** tab of the **Rol** component, under **DataSource** properties, select the **Use the Existing Data Source** checkbox.
4. In the **Data Source Alias** field, select **CptmCustomerTicketsAlias**.
5. Add a header component to the **Col** component. For example: **H3**.
6. In the **Properties** tab of the **H3** component, under **General** properties, in the **View Attribute** field, select **Ticket Id**.\
*The header component will now display the ticket Id fetched from the datasource.*
3. Add another **Col** component to the row.
1. Right-click on the **Col** component and add a **Badge** component, to display the status of the ticket.
2. In the **Properties** tab of the **Badge** component, under **General** properties, in the **Text** field, enter **New**.
3. In the **Badge Color** field, click **Enter Custom** and again click **Expression Builder.** The **Expression Builder: Badge Color** dialog box is displayed.
4. In the bottom of the dialog box, in the **Expression** text box, enter the following expression: **decode(#{CptmCustomerTicketsAlias.status},'1','danger','2','primary','3','warning','4','default','5','success')**
5. Click **Submit**. The expression specifies the badge color according to the status of the ticket.
6. In the **View Attribute** field, select **Status** from the list.
7. Add another **Badge** component to the column and in the **Text** field, enter **Status**.
8. To add badge color, repeat step d. The expression specifies the badge color according to the priority status of the ticket.
9. In the **View Attribute** field, select **Priority** from the list.
4. Add another **Col** component to the row.
1. Add a **Text Field** component to the column.
2. In the **Properties** tab of the **Text Field** component, under **Label** properties, delete the text in **Field Label** field.
3. In the **Placeholder** field, click. The **Expression Builder: Tool Tip** dialog box is displayed.
1. Under **Category** column, select **Datasource**.
2. Under **Choose a Datasource Alias** column, select **CptmCustomerTicketsAlias**
3. Under **Choose an Attribute** column, select **Title**.
4. Click **Submit**.
5. Add another **Col** component, and set the base size, so that the column is displayed in left corner of the page.R
1. Right-click on the **Col** component and add the **Icon** component.
2. Add a **Trigger On Click** to the **Icon** component.
3. Add the **Set as Current StoreRecord** and **Show Popup** actions to the trigger.
6. Add another **Col** component to the row
1. Add a button to the **Col** component.
2. In the **Text field**, enter **Ticket Summary**.\
*You can select a suitable icon under the **Icon** field.*
3. Add the **Go To Page** action to the trigger.
4. In the **Properties** tab of the **Go To Page** action, under **General** properties, in the **Page State** field, enter **app.cptickets** (the page state of the **cpticketmgmt** page).
7. Add another button to the **Col** component, and set the button title as **Changes History.**
1. Add the **Show Popup** action to the trigger.
8. Add another button to the **Col** component, and set the button title as **Internal Comments.**
1. Add the **Show Popup** action to the trigger.
9. Add another button to the **Col** component, and set the button title as **Close**.
1. Add **Confirm Message** action to the trigger.
2. In the **Properties** tab of the **Confirm Message** action, under **General** properties, in the **Message** field, type ‘**Do you want to close this ticket?’**
3. Add **Update StoreRecord** action to the trigger.
4. In the **Properties** tab of the **Update** **StoreRecord** action, under **General** properties, in the **Target Attribute** field, select **Status** from the list.
5. In the **Value Expression** field, type **5.**
6. Add **Save** **DataSource** action to the trigger.
7. In the **Properties** tab of the **Save** **DataSource** action, under **General** properties, in the **Target Data Source Alias** field, select **CptmCustomerTicketsAlias.**
8. Add **Refresh DataSource** action to the trigger.
9. In the **Properties** tab of the **Save** **DataSource** action, under **General** properties, in the **Target Data Source Alias** field, select **CptmCustomerTicketsAlias.**
10. **Duplicate** the **Close** button. The triggers are copied as well.
1. Change the button title to **Re-Open.**
2. In the **Message** field of the **Confirm Message** action, type ‘**Do you want to re-open this ticket?**’
3. In the **Value Expression** field of the **Update** **StoreRecord** action, type **10.**
11. Add another button to the **Col** component and set the button title as **Save Changes.**
1. Add **Update StoreRecord** action to the trigger.
2. In the **Properties** tab, under **General** properties, in the **Target Data Source** **Alias** field, select **CptmCustomerTicketsAlias.**
3. Under **Target Attribute**, select **Status** from the list.
4. In the **Value** **Expression** field, click. The **Expression Builder: Value Expression** dialog box is displayed.
1. Under **Category** column, select **Datasource**.
2. Under **Choose a Datasource Alias** column, select **CptmCustomerTicketsAlias**
3. Under **Choose an Attribute** column, select **Status**.
4. Click **Submit**.
5. In the **Enable** **Condition** field, click. The **Expression Builder: Enable Condition** dialog box is displayed.
1. Under **Category** column, select **Datasource**.
2. Under **Choose a Datasource Alias** column, select **CptmCustomerTicketsAlias**
3. Under **Choose an Attribute** column, select **Status**.
4. Click **Submit**.
12. On the menu bar, click . The components added to the page are saved.
You have added the components to view the current ticket status.## **To add components to the second Vertical Section for ticket description:** 1. Right-click and add **Vertical Layout Panel** to the **Vertical Section** component. 2. For clear sectioning of the page, add a **Horizontal Layout** component to the **Vertical Section** component.\ *By default, the child component, **Horizontal*** ***Section**, is added.* 3. Add a **Card Wrapper** to the **Horizontal** **Section** component. 1. In the **Title** field of the **Card** **Header**, type **Ticket Comments** and set a suitable icon. 4. To view comments or reviews related to the ticket, add the **Collaboration** component to the **Card Body**. 1. In the **Properties** tab of the **Collaboration** component, under **Context** properties, in the **Collaboration Datasource** **Alias** field, select **ticketCollaboration**. 1. In **Context** field, select **issueId**. 2. In **Date Format** field, enter **DD-MM-YY HH:mm** 3. Select the **Show Likes, Show Attachments, and Always Show Delete** checkboxes. 2. In **Context Value** field, click. The **Expression Builder: Context Value** dialog box is displayed. 1. Under **Category** column, select **Datasource**. 2. Under **Choose a Datasource Alias** column, select **CptmCustomerTicketsAlias** 3. Under **Choose an Attribute** column, select **ticketId** 4. Click **Submit**. 3. Under **Look & Feel** properties, in the **Height** field, type **1**. 5. On the menu bar, click
. The components added to the page are saved.
## **To add components to the second Horizontal Section component:**
1. Add a **Card Wrapper** to the **Horizontal Section** component.
1. In the **Title** field of the **Card** **Header**, type **Ticket Details** and set a suitable icon.
2. Right-click on the **Card Body** and add a **Form** component.
1. In the **Properties** tab of the **Form** component, under **DataSource** properties, select the **Use the Existing Data Source** checkbox.
2. In the **Data Source Alias** field, select **CptmCustomerTicketsAlias**
3. Add a **Row** component to the **Form** component.
1. In the **Properties** tab of the **Row** component, under **DataSource** properties, select the **Use the Existing Data Source** checkbox.
2. In the **Data Source Alias** field, select **CptmCustomerTicketsAlias**.
3. In the **Properties** tab of the **Col** component, under **General** properties, in the **Horizontal Alignment** field, select **Default**.
4. In the **Vertical Alignment** field, select Default.
4. Add the **Paragraph** component to the **Col** component.
1. In the **Text** field of the **Paragraph** component, enter **Created on**.
2. Add a **Date** component to the **Col** component, and place it against the **Paragraph** component.
3. In the **Properties** tab of the **Date** component, under **General** properties, in the **View Attribute** field, select **Creation Date**.
4. Add a **User** **Picture** component to the **Col** component., and place it against the **Date** component.
5. In the **Properties** tab of the **User Picture** component, under **General** properties, in the **View Attribute** field, select **Creation By**.\
*You can change the alignment of individual components or the **Row** on whole by changing the margin values or **Display** alignment position.*
5. Duplicate the **Col** component.
1. Change the **Text** value of the **Paragraph** component to **Updated on.**
2. Change the **View Attribute** of the **Date** component to **Last Update Date.**
6. Right-click on the **Row** component and add a **Text Field** component.
1. In the **Properties** tab of the **Text Field** component, under **General** properties, in the **Field Label** field, enter **Ticket Description**.
2. Under **Data** properties, in the **View Attribute** field, select **Issue Description**.
3. In the **Total lines** field, enter **6.**
7. Right-click on the **Row** component and add a **Select** component.
1. In the **Field Label** field of the **Select** component, enter **Priority**.
2. In the **View Attribute** field, select **Priority**.
3. Under **Select** **DataSource** properties, in the **DataSource** field, select **CptmLookups**.
4. In the **Data** **Source Alias** field, enter **CptmLookupsAlias1**.
5. In the **Default Where Clause field**, type **LOOKUP TYPE=’TICKET\_PRIORITY’**
6. In the **Order By Clause** field, type **#meaning#ASC.**
7. In the **Value Attribute** field, select **Lookup Code**.
8. In the **Display Attribute** field, select **Meaning**.
8. Duplicate the **Select** component.
1. Change the **Field** **Label** value to **Ticket Type**
2. Change the **Default Where Clause field** to **LOOKUP TYPE=’TICKET\_TYPE’**
9. Duplicate the **Select** component.
1. Change the **Field** **Label** value to **Requested By.**
2. Change the datasource selected in the **DataSource** field to **CptmCustomerUserMapping**.
3. Change the **Order By Clause** field to **#userName#ASC.**
4. In the **Value Attribute** field, select **User Id.**
5. In the **Display Attribute**, select **User Name**.
6. Right-click and add the **Trigger Before Select Query**.
7. Add the **Set Query Filter Value** action to the trigger.
8. In the **Properties** tab of the **Set Query Filter Value** action, under **General** properties, in the **Value Expression** field, click. The **Expression Builder: Value Expression** dialog box is displayed.
1. Under **Category** column, select **Datasource**.
2. Under **Choose a Datasource Alias** column, select **CptmCustomerTicketsAlias**
3. Under **Choose an Attribute** column, select **customerId**.
4. Click **Submit**.
10. Right-click on the **Requested By Select** component and add the **Trigger Before Render.**
1. Add the **Query DataSource** action to the trigger.
2. In the **Properties** tab of the **Query DataSource** action, under **General** properties, select the **Force** checkbox.
3. In the **Properties** tab of the **Query Param** action, under **General** properties, in the **Value Expression** field, click. The **Expression Builder: Value Expression** dialog box is displayed.
1. Under **Category** column, select **Datasource**.
2. Under **Choose a Datasource Alias** column, select **CptmCustomerTicketsAlias**
3. Under **Choose an Attribute** column, select **customerId**.
4. Click **Submit**.
4. In the **Param Attribute** field, select **Customer Id**.
5. In the **Filter Type** field, select **=.**
6. In the **Data Source Alias** field, select the **Item Id** of the datasource added to the **Select** component.
11. Duplicate the **Select** component.
1. Change the **Field** **Label** value to **Assigned To.**
2. Change the datasource selected in the **DataSource** field to **CptmCustomerUserMapping**.
3. In the **Value Attribute** field, select **User Id.**
4. In the **Display Attribute**, select **User Name**.
12. Right-click on the **Assigned To Select** component and add the **Trigger Before Render.**
1. Add the **Query DataSource** action to the trigger.
2. In the **Properties** tab of the **Query DataSource** action, under **General** properties, select the **Force** checkbox.
3. In the **Data Source Alias** field, select the **Item Id** of the datasource added to the **Select** component.
4. In the **Properties** tab of the **Query Param** action, under **General** properties, in the **Value Expression** field, click. The **Expression Builder: Value Expression** dialog box is displayed.
1. Under **Category** column, select **Datasource**.
2. Under **Choose a Datasource Alias** column, select **CptmCustomerTicketsAlias**
3. Under **Choose an Attribute** column, select **customerId**.
4. Click **Submit**.
5. In the **Param Attribute** field, select **Customer Id**.
6. In the **Filter Type** field, select **=.**
13. Similarly, add components for the following ticket details:
| **Component name** | **Ticket details** |
| ------------------ | ----------------------- |
| Text Field | Application URL |
| Text Field | User Name |
| Text Field | Password |
| Text Field | Ext Ticket Number |
| Text Field | Available on Build |
| LOV | Application Name |
| Date Field | Planned Resolution Date |
| Date Field | Actual Resolution Date |
| Text Field | Justification |
| Text Field | Root Cause Analysis |
| Text Field | Customer-Specific Tags |
14\. On the menu bar, click . The components added to the\
page are saved.
15\. To view the page functionalities, on the menu-bar, click .\
You can now access the page with all the defined\
functionalities.
# Viewing the final output
After adding all the components, you can view the pages as follows:
# Understanding the User Interface
# Working with the menu bar
The menu bar has the following elements:
| **Label** | **Description** |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| **1** | Click to view notifications. |
| **2** | Click to enable the developer mode.
Developer mode can is available only for users having access to developer role.
| | **3** | Click to navigate to the home page. | | **4** | Click to view the navigation menu. | | **5** | Click to view the language list. From the given list, select the language for the user interface labels. | | **6** | View the user display name. | | **7** | Click to change profile preferences. | # Managing user preferences To change the preferences: 1. Click the profile photo and from the dropdown, click **Preferences**.  2\. Edit the following profile preferences as required: {% hint style="success" %} **Note:** Username and email address cannot be edited. {% endhint %} | **Field name** | **Description** | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Profile Photo** |To upload a profile photo:
- Under Profile, click Upload.
- Select the required image.
Search and select the required time zone:
- Click. The List of Values: Time Zone dialog box is displayed.
- Select the required time zone.
- Click Select.
Select to reload the pages automatically.
Only the pages that do not fetch data from data sources can be reloaded automatically.
| 3\. To save the changes, on the top-right corner, click **Save.** *If there are no changes, **Save** will be disabled.* # Changing password 1. Click the profile photo and from the dropdown, click Change Password. The **Change** **Password** page is displayed. *The user display name cannot be edited here.*  2\. Change the **password** 3\. Click **Save** # Working with navigation menu To view the navigation menu, in the menu bar, on the right, click .  The navigation menu displays application components available when developing an application. The application components are grouped under the roles assigned to you. # Working with the developer group of the developer role You can manage (search, add, edit, and/or delete) the various application components.  Click the required group to access its details. | **Option** | **Description** | | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Developer Dashboard** |Displays your dashboard. You can view and navigate to the recent pages, datasources, roles, and users.
To know more, refer to the Working with the Developer Dashboard section.
| | **Expression Playground** |Enables you to evaluate any expression and fetch the relevant dynamic data.
By default, the expression displays the Session ID.
Examples:
- #{session.sessionId}: Displays the session Id for the current session.
- #{session.orgId}: Displays the Id of the instance of CloudIO in use.
- #{session.userId}: Displays the Id of the logged-in user.
- #{session.userName}: Displays the user name of the logged-in user.
The list of expressions and their syntax can be viewed in the Expression builder in the developer mode.
| | **Manage Images** | Displays a list of images uploaded to the platform. The details displayed includes the name of the file, timestamp of the upload, and thumbnail of the image. | | **Manage Custom Handlers** | Displays a list of custom handlers that implement custom code to perform DML (Insert, Update, Delete) operations on the datasource. | | **Manage Datasources** |Displays a list of existing datasources.
To know more, refer Managing data sources.
| | **Manage HTML Requests** |Displays a list of custom JSON, JavaScript, or Java code snippets.
The item Id of the code snippet can be later as and when needed.
| | **Manage HTML Templates** |Displays a list of custom HTML code snippets. You can also add JSON, JavaScript, or Java code snippets.
The item Id of the code snippet can be later as and when needed.
| | **Manage Java Snippets** |Displays a list of custom Java code snippets.
The item Id of the code snippet can be later as and when needed.
| | **Manage Language** |Displays a list of languages that can be used to localize the interface.
To add a language, use its universal language code. Under the Dictionary management role, you have to define rules for localization for the language added.
| | **Manage Profile Values** |Displays a list of conditions that govern access rights.
Profiles can be updated at the following levels as defined during creation:
a. site (server) level
b. org (instance) level
c. role level
d. user level
You cannot add a new profile in this page.
| | **Manage Profiles** |Displays a list of existing profiles created by the administrator as well as the developer.
To know more, refer to the Managing profiles section.
| | **Manage Database Log** |Displays the database log.
You can only view and clear the log.
Need more information from CloudIO to update the content.
| | **Monitor Email Requests** |Displays the list of all the emails sent, along with the receiver and sender details, status of the email, subject, email body, and email sent date.
You can also select and resend a particular email email(s).
| | **OfflineRules** |Displays the list of rules set for offline transactions.
The platform allows you to access the pages offline.
| | **Page Fragments** | Displays a list of the existing reusable page fragments. To use a particular page fragment, use the unique **Fragment Id** in the **Expression** **builder**. | | **Pages** |Displays the list of existing pages.
To know more, refer to the Working with Pages section.
| | **Upload Requests** | Displays the recent uploads. | # Working with other developer role groups You can manage (search, add, edit, and/or delete) the various application components.  | **Group** | **Description** | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Inbound Emails** |The emails received can be viewed here.
- Under Inbound mails tab, you can view the list of received emails.
- Under Inbound Setup tab, you can configure a template for auto-generated replies.
- Under OCR Setup tab, you can configure the OCR (Optical character recognition) text to field mapping.
The pages created under the developer role are displayed under this group
The group is defined when the page is created.
By default, a new page is placed under My Menu Group. A page created under any other role will be placed under this group under that respective role.
| | **Screen Generator** |You can generate a page using the Screen Generator option.
To know more, refer to the Building your application using screen generator section.
| | **Workflow** | The existing workflows and workflow nodes | # Managing Profiles Displays a list of existing profiles created by the administrator as well as the developer. Profiles specific to application characteristics can be created by the developer using the application URL of the platform. While creating a new profile, you can do the following: 1. set the profile as active or inactive 2. add SQL queries to define the condition 3. allow the user to update the profile at different levels {% hint style="warning" %} Profiles specific to the platform characteristics can be created only by the administrator using the admin URL of the platform. You can only view these profiles, and not edit or duplicate it. {% endhint %} # Working With Roles And Users # Defining a role A role is used to provide controlled access to users, pages, workflow, data sources, java snippets, HTML requests and/or HTML templates. {% hint style="info" %} Roles can only be created and managed by the administrator. {% endhint %} To create a role, 1. In the upper right corner of the CloudIO homepage, in the menu bar, click. The **Navigation** page is displayed. 2. Under the **Administration** role, click **Manage Roles**. The **Manage Roles** page is displayed.  3\. In the upper right corner, click **Add Role**. The role-details page is displayed.  4\. Enter the following details: | User Detail | Description | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Role Name | The name of the role | | Role Code | A unique code for the role that can be accessed from functions like hasRole() | | Responsibility Id |The responsibility ID obtained from Oracle Apps
Note: This field is applicable only for Oracle EBS customers that is when the platform is configured using Oracle EBS.
| | Application Id |The application ID obtained from Oracle Apps
Note: This field is applicable only for Oracle EBS customers that is when the platform is configured using Oracle EBS.
| | Start Date | The start date for the role to be active | | End Date | The end date for the role to be active | | Auto Assign | Indicates that the role is to be automatically assigned to a newly created user | | Is AD Group | Indicates that the **Authentication Provider** is of the type **Active Directory** | | Is BI Enabled | Gives permissions to the role for using CloudIO dataSense 3.0 for creating and viewing reports | 5\. If required, assign one or more of the following components to the role through the respective tabs: * Datasources * Java Snippets * HTML Requests * HTML Templates * Workflow Nodes * Workflow Definitions 6\. Click **Save**. The role is created. 7\. To assign the created role with pages and/or users, in the respective section, click , select the required user(s) or page(s) and click **Save**.  The role is assigned to the selected users and/or pages accordingly. # Understanding the types of roles The CloudIO platform provides a default Administrator role when it is set up. Additionally, the CloudIO platform has the following predefined roles that can be assigned to users: ## Administrator A user with the administrator role has the permissions to: * manage the application setup * create new roles and users * create subdomains ## Developer A user with the developer role has the permissions to create new datasources and pages. ## Patch Manager A user with the patch manager role has the permissions to create and apply patches of the application components. ## Site Developer A user with the site developer role can make cosmetic changes to the application if the solution built on the CloudIO platform is implemented at the customer site. **Limitations for Site Developer Role:** 1. Has read-only access to **Manage Datasources** 2. Cannot create a new page but can redesign the existing one 3. Cannot create custom workflow nodes ## Site Administrator A site administrator can make changes in setup, add new users and assign existing customized roles to these users if the solution built on the CloudIO Platform is implemented at a customer site. **Limitations for Site Administrator** 1. Cannot create any role 2. Can create user and assign customized roles to the user, but not the pre-defined platform roles 3. Can schedule request by selecting customized roles # Creating a user Users can access and control the components of the application based on the roles that they are assigned to. {% hint style="info" %} Users can only be created and managed by the administrator. {% endhint %} For the native authentication provider type, to create a native user, 1. In the upper right corner of the CloudIO homepage, in the menu bar, click. The **Navigation** page is displayed.  2\. Under the **Administration** role, click **Manage Users.** The **Manage Users** page is displayed.  3\. Click **Add User.** The user details page is displayed.  4\. Enter the following user details: | User Detail | Description | | ------------ | ----------------------------------------------------------------------------------------- | | User Name | The login name for the user | | Email | The email ID of the user | | Display Name | The name of the user that should be displayed in the user profile | | Start Date | The start date for the user to be active | | End Date | The end date for the user to be active | | Manager | The name of the manager for the user | | API Key | The API key value for the user that will be used to make REST API calls | | API Secret | The API secret value for the user that will authenticate them while making REST API calls | 5\. Click **Save**. The user is added and their details can be accessed from the **Manage users** page. **OR** To assign roles to user, click **Next**. The roles page is displayed. # Assigning a role to the user After a user is created, the administrator can assign roles to the user for controlling the access to the application components. 1. In the upper right corner of the CloudIO homepage, in the menu bar, click. The **Navigation** page is displayed.  2\. Under the **Administration** role, click **Manage Users.** The **Manage Users** page is displayed.  3\. Click on the required user. The **User Details** page is displayed.  4\. In the upper right corner of the **User Details** section, click **Next**. The roles page is displayed.  5\. In the upper right corner of the **User Roles** section, click **Add Role** and in the role column, select the role to be assigned to the user. 6\. Enter the details for the role and click **Save**. The user is assigned to the role. # Managing roles and users ## Managing a role 1. In the upper right corner of the CloudIO homepage, in the menu bar, click. The Navigation page is displayed. 2. Under the **Administration** role, click **Manage Roles**. The **Manage Roles** page is displayed.  3\. For the required role, click on the required icon from the following options: | Icon | Description | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | |  | Edit role | |  | Manage user assignments | |  | Manage page assignments | |  | Manage datasource assignments | |  | Manage the assignment of Java snippets | |  | Manage the assignment of HTML resources | |  | Manage the assignment of HTML templates | |  | Manage the assignment of workflow nodes | ## Managing a user 1. In the upper right corner of the CloudIO homepage, in the menu bar, click. The Navigation page is displayed. 2. Under the **Administration** role, click **Manage Users**. The **Manage Users** page is displayed.  3\. To manage the roles for a user, for the required user, click . The **User Roles** page is displayed. You can update the user role details as required  4\. To update other user details, click **Previous**. The **User Details** page is displayed. You can update the user details as required. # Working with DataSources # Understanding the CloudIO data sources Data sources are used to fetch the data from and perform DML operations (for example, insert, update, delete) on underlying database objects or cloud services. The components of the user interface such as *Grids*, *Charts* or *Form Fields* interact with the database through a data source. ## Naming conventions Every data source must have a unique name which is used while interacting with the database. Ideally, the data source name must be simple, concise and user-friendly. * The data source name must not contain any special characters or space. * The data source name can have maximum 128 characters. * As a standard practice, you should name your data sources using the Title/Camel Case. For example, if your table name is *MTL\_SYSTEM\_ITEMS*, then your data source name should be *MTLSystemItems*. ## Benefits of CloudIO data sources CloudIO data sources encapsulates the database objects and provides an additional layer of security on top of what the database already provides. It combines the data access layer along with the business logic you have defined. Developers can control the way the system generates the SQL query for fetching the data. The use of the CloudIO data source has the following benefits: * **Flexible**: Data sources are defined using a highly flexible metadata layer. The developer can configure/customize the process of retrieving data from and posting data to the underlying object. * **Secure**: Data sources are highly secured and one can grant access privileges based on roles. For example, a user role can be granted to only view the data, while an admin role can be granted access to perform delete operations. You can also control the access to individual columns and specify whether a user can view or update a specific column. * **High-speed**: Data sources exhibit high performance with speeds measured in milliseconds. * **Customizable queries**: The SQL query generated by the data source may not be the one preferred by an SQL expert. In such cases, the developer can change the construction of the query. * **Audit**: The changes made to the data through the data source are audited and the user with the appropriate access privileges can view all the changes made to a given row. * **REST Enabled**: A data source in CloudIO is a single source where you can define all your business and data access logic using the REST APIs. * **Proactive**: Data sources will proactively send email alerts to the developer if there is any performance issue or if a user encounters a programmatic error. In other words, as a developer, you will know the issue even before the user reports it to you. # Accessing data sources 1. In the top right corner of the menu bar, click  . The Navigation pane is displayed.   2\. Under the required role group, click **Manage Datasources**. The **Manage DataSources** page with the list of datasources is displayed.  3\. To view the details of a datasource, click on the required datasource. All the details of the selected datasource are displayed. You can view and manage these details from here. # Creating a data source Go to the **Manage Datasources** page and in the upper right corner, click **New**.  The **NewDatasource** page, consisting of the following tabs, is displayed: * [Details](/creating-datasources/working-with-datasources/creating-a-data-source/defining-data-source-details) * [Attributes](/building-your-first-application/building-your-first-application/creating-datasources/defining-attribute-properties) * [Server-side validations](/creating-datasources/working-with-datasources/creating-a-data-source/defining-server-side-validations) * [Pre Query](/creating-datasources/working-with-datasources/creating-a-data-source/defining-a-pre-query) * [Post Query](/creating-datasources/working-with-datasources/creating-a-data-source/defining-a-post-query) * [Roles](/building-your-first-application/building-your-first-application/creating-datasources/assigning-roles-to-a-datasource) # Defining data source details In the **Details** tab, under **Properties**,  Complete the following **details** : | **Property** | **Description** | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Name**\* | A unique name used to refer to the datasource object within the application | | **Table Name**\* | The name of the database object containing the data; for example, name of the Table, View or REST API | | **API Name** | The name of the stored procedure, if any, that is used to perform DML operations | | **Object Type** | The type of the underlying data source | | **Object Connection Code** |A connection code for connecting to different schemas/databases.
Note: The object connection details of these schemas/databases must be defined in the Setup page. If you are using the default application schema under the current subdomain, you must not select any Object Connection Code.
| | **Object Handler Class** | The class name of the custom java code, if any, that required to access the datasource | | **Enable logging** |Select Yes to enable logging of database operations.
Note: This is useful for debugging the pre-query, post query or server-side validation scripts.
| If applicable, select the following **checkboxes** : | **Name** | **Description** | | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Active** |Indicates that the datastore is active.
If inactivated, any UI component, that is bound to the object, will throw an error while trying to access the object.
| | **UseAPI** | Indicates the use of the APIs for standard DML operations | | **Call Post Query** | Indicates that the defined post query will be invoked | | **Skip Query For Updates** | Indicates that the update query operation, if any, will be skipped for the data source | | **Email On Insert** | Sends email notifications when the user performs an insert operation | | **Email On Update** | Sends email notifications when the user performs an update operation | | **Email On Delete** | Sends email notifications when the user performs a delete operation | | **Confirmation Enabled** | Indicates that a confirmation message will pop up in the **UI** before an action is to be performed. | Click **Save**. The datasource is created and can be accessed from the **Manage Datasources**. # Defining attribute properties When a datasource is created using a table, the platform generates an attribute for each column in the table. You can also create an attribute manually. You can edit the properties of the attributes as per the requirement. An attribute can have the following properties: | **Property** | **Description** | | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Name** |The name of the attribute being created
Note: The name should not contain any special character other than space.
| | **Type** |The data type of the column
Note: The number columns are of the data type decimal and the character columns are of the data type String.
| | **Length** | The maximum length of the data | | **Scale** | The maximum number of decimal places allowed in numeric data | | **Default Value** |Note: You can define a default value for the attribute that will be set if the user does not enter the value for the attribute.
- UUID: generates and populates the attribute value with a Universally Unique Identifier (UUID)
- OrgID: populates the attribute value with the Org Id of the current subdomain
- SYSDATE: current date
- master.attributeName: Populates the attribute value from a parent/master row
- CURRENTUSER: The username of the signed in user
- CURRENTUSERID: The user id of the signed in user
- =SELECT: Executes the given select statement and populates the attribute with the resulting value
- PASSWORD: Populates the attribute value with the hash value of a randomly generated 12 alphanumeric value. The actual password value in clear text will be populated withattributeName\_clear. For example, if pwd is the attribute name, then pwd\_clear will have the generated value and pwd will have the hash value.
- String or Number Constant Value: If the specified value doesn't fall under any of the above, then it is treated as a constant value.
Indicates that the value is generated from a database sequence.
If selected, in the Default Value column, enter the sequence name
| | **Optional** | Indicates if the attribute can be left blank by the user | | **Audit** | Indicates if the changes to the attribute value should be audited | | **Query** |Indicates that the column should be automatically included in the Where Clause when a value is passed during a query.
When this property is not selected, the platform will not include the column in the where clause even if a value is specified. The developer should programmatically handle its value through the pre-query script.
| | **Disable Uppercase Search** |By default, the where clause is constructed as UPPER(column) LIKE 'VALUE%.
When this property is selected, column = 'Value' is constructed instead, which gives better performance when the column is indexed without using the UPPER function
. Search filters are displayed for each attribute. Clicking onagain will hide with search filters.
b. To search for a specific attribute values, in the search filters for the respective attribute(s), select the search criteria. The attributes are displayed as per the search criteria.
* To delete a data row, in the checkbox column,
a. Select the row(s) that you want to delete and click 
.
b. Click **Delete**. The selected row(s) are deleted.
* To refresh the table, in the **Attributes** tab, in the actions bar, click  .
# Defining a Pre Query
The pre-query script lets you specify any custom search clause that will be appended to the default search criteria generated by the platform. You can manipulate the different components of the query that are used during the search. When your application requires implementing custom search, you can write pre query script on the datasource. The platform invokes the pre-query script for performing a search, allowing the developer to control the query being executed to obtain appropriate results.
You must write the pre-query script in the Java programming language.
* To define a pre-query, open the **\Pre Query** tab. The query editor is displayed. You can define your pre-query here as per the requirement.
{% hint style="info" %}
* You can call the predefined pre-query methods directly from the editor. On entering *db.* in the text editor, the list of methods is displayed. You can click on the required method from this list.
{% endhint %}
# Examples of pre-query scripts
1. The manipulation of the WHERE clause of a Search. The platform appends the result of this query to the result of the generated whereClause.
```
// check if whereClause already exists
if (whereClause.length() > 0) {
// whereClause already exists. append AND or OR clause as required
whereClause.append(" AND ");
}
// use bind variables. e.g. ? or :EVENT_STATUS
whereClause.append("x.EVENT_STATUS = ?");
// append the bind variable
params.add(101);
```
2\. Advanced manipulation of the WHERE clause
```
String custNo = data.get("accountNumber");
// check if the custNo is entered by the user in the search region
if (custNo != null) {
if (whereClause.length() > 0) {
whereClause.append(" AND ");
}
if (custNo.indexOf("%") != -1) {
// wildchar found, use LIKE instea
whereClause.append("X.ACCOUNT_NUMBER LIKE ?");
} else {
whereClause.append("X.ACCOUNT_NUMBER = ?");
}
params.add(custNo);
}
```
3\. Calling a PL/SQL procedure before executing the query
```
/ Get the required parameter values from the current search criteria
// provided by the user i.e. user entered values in the search panel
String customerNameDummy = data.get("partyName");
String customerNumberDummy = data.get("accountNumber");
String contactNameDummy = data.get("contactName");
String emailDummy = data.get("emailAddress");
String postalCodeDummy = data.get("postalCode");
// Prepare the model to be used invoke the Pre-Query PL/SQL Procedure
RPCModelData model = new RPCModelData();
model.set("customerName", customerNameDummy);
model.set("customerNumber", customerNumberDummy);
model.set("contactName", contactNameDummy);
model.set("contactEmail", emailDummy);
model.set("postalCode", postalCodeDummy);
model.set("searchCriteria", searchValue);
// Invoke the Pre-Query PL/SQL Procedure. This will call
// PACKAGE.INSERT_ROW Procedure
db.postObjectToDB("customerPreQueryAPI", model);
// Get the return value
Double searchValue = model.get("searchCriteria");
// Use the return value in the where clause
if (searchValue != null) {
if (whereClause.length() > 0) {
whereClause.append(" AND ");
}
whereClause.append("x.search_context_id = ? ");
params.add(searchValue);
}
```
4\. The manipulation of the ORDER BY clause of a search. The platform appends the result of this query to the result of the generated order by clause.
```
if (orderByClause.length() > 0) {
orderByClause.append(", ");
}
orderByClause.append("x.NET_LOSS_AMOUNT");
```
5\. Replacing the FROM clause of a query
```
if (someCondition) {
fromClause.setLength(0); // remove the existing FROM CLAUSE
fromClause.append(" FROM NEW_TABLE_OR_VIEW_NAME x"); // alias should always be x
}
```
6\. Manipulating the bind variable
```
// make sure to uncheck the "Query Allowed" property for this attribute
// so that the system won't include this attr in the system generated
// where clause
String phoneNo = data.get("phoneNumber");
if (phoneNo != null) {
if (whereClause.length() > 0) {
whereClause.append(" AND ");
}
whereClause.append("x.transposed_phone_number LIKE ?");
params.add(new StringBuilder(phoneNo.replaceAll("[^0-9]", "")).reverse().append("%").toString());
}
```
7\. Replacing the query with a custom query with UNIONs
```
Double custAccountId = data.get("customerId");
if (custAccountId != null) {
// backup the existing bind variables if any as we need the repeat
// the where clause of every UNION
List paramsCopy = new ArrayList();
paramsCopy.addAll(params);
StringBuffer newWhereClause = new StringBuffer();
if (whereClause.length() > 0) {
newWhereClause.append(" AND ");
}
// backup the select clause as we need to repeat for every UNION
String sel = selectClause.toString();
newWhereClause.append("x.bill_customer_id = ?");
/**
** RA_TOTAL_ROWS will help the platform to know the total rows
* thereby avoiding the use of an extra query to calculate the total
* rows i.e. select count(1)
**/
fullSQL.append("SELECT X.*, count(1) over() RA_TOTAL_ROWS FROM (");
fullSQL.append(sel).append(fromClause).append(" WHERE ").append(whereClause).append(newWhereClause);
params.add(custAccountId);
fullSQL.append(" UNION ");
newWhereClause.setLength(0);
if (whereClause.length() > 0) {
newWhereClause.append(" AND ");
}
newWhereClause.append("x.ship_customer_id = ?");
fullSQL.append(sel).append(fromClause).append("WHERE ").append(whereClause).append(newWhereClause);
params.addAll(paramsCopy);
params.add(custAccountId);
fullSQL.append(" UNION ");
newWhereClause.setLength(0);
if (whereClause.length() > 0) {
newWhereClause.append(" AND ");
}
newWhereClause.append("x.customer_id = ?");
fullSQL.append(sel).append(fromClause).append("WHERE ").append(whereClause).append(newWhereClause);
params.addAll(paramsCopy);
params.add(custAccountId);
fullSQL.append(") X");
if (orderByClause.length() > 0) {
fullSQL.append(" ORDER BY ").append(orderByClause.toString().toLowerCase().replaceAll("_", ""));
}
}
```
8\. Restricting blind query by appending the following code at the end of the pre-query script
```
if (whereClause.length() == 0) {
throw new RAException("Blind Query", "You must specify atleast one search criteria");
}
```
9\. Query allowed By default, all attributes are query allowed and the platform automatically generates whereClause when a user perform a search on an attribute. To programmatically control the whereClause, uncheck the Query Allowed property while [defining the attribute properties](/creating-datasources/working-with-datasources/creating-a-data-source/defining-attribute-properties) to ignore those attributes while generating the whereClause.
10\. Custom handling of grid filters
You can access the data related to the grid filters through [FilterConfig](http://dev.sencha.com/deploy/gxt-2.2.5/docs/api/com/extjs/gxt/ui/client/data/FilterConfig.html) object. You can use`data.getFilterConfigs()` method to retrieve the list of FilterConfig.
```
import com.extjs.gxt.ui.client.data.FilterConfig;
List