# Creating a page

1. In the **Navigation** **menu**, under the **Developer** role, in the **Developer**

   group, click **Pages**. The list of all existing pages is displayed.

![](/files/-M1cwcdxelAPW741sKn1)

&#x20;2\. On the top-right corner, click ![](/files/-M1_DCGfQvqSg3QeKR5W) .

A new page is created, and its properties are displayed.

![](/files/-M1cxveEbEEGHe3mrfcZ)

&#x20;3\. Under the **Page Details** tab, enter the following details as required:

| **Label**             | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Page Name**         | <p>Name of the page used by the developer to navigate to the page properties and page canvas.</p><p><em>We recommend that the page name reflects its functionality.</em></p>                                                                                                                                                                                                                                                                                                                                                                       |
| **Page Code**         | <p>Unique code assigned to the page that is used while accessing the page from a different page.</p><p><em>The value is auto-generated and you can edit it, if required.</em></p><p><em>The code is mainly required while specifying the page details in the <strong>Open URL</strong> component.</em></p>                                                                                                                                                                                                                                         |
| **Page State**        | <p>Unique code status assigned to the page that is used while accessing the page within a single application.</p><p><em>The value is auto-generated and you can edit it, if required.</em></p><p><br>The state object is where the property values that belongs to the component (a page as a whole) is referred. When the state object changes, the component re-renders.<br>This is important when designing single page applications.<br><em>The state is mainly required while specifying the page state in the Go to page component.</em></p> |
| **Page State Params** | <p>Parameters can be passed to page state in form of json. These params can be evaluated in the target page using expression: <strong>#{page.paramname}</strong><br><em>For example: { vendorno : ‘02150’, vendortype: ‘supplier’ }</em></p>                                                                                                                                                                                                                                                                                                       |
| **Seq No**            | <p>Sequence of the page name under the menu group</p><p><em>The value is auto-generated and you can edit it, if required.</em></p><p><em>When this value is duplicated, pages are displayed in alphabetical order.</em></p>                                                                                                                                                                                                                                                                                                                        |
| **URL**               | The URL to access the page in the application                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Abstract**          | Select if the page is to be used as a template.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Pre-Fetch**         | Select if the page is to be used for offline transactions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Icon**              | <p>Select a suitable icon for the page from the list that will be displayed in the browser tab.</p><p><em>By default, the page holds a desktop icon.</em></p>                                                                                                                                                                                                                                                                                                                                                                                      |
| **Group Header**      | <p>Menu group under which you can view the page in the <strong>Navigation</strong> <strong>menu</strong>.</p><p><em>By default, the newly created pages can be viewed under the <strong>My Menu Group</strong>.</em></p><p><em>You can edit the name to create a new group header. In the <strong>Navigation</strong></em> <em><strong>menu</strong>, this group header will appear under the roles assigned to the page.</em></p>                                                                                                                 |
| **Controller Name**   | <p>Unique page controller name</p><p><em>Currently, this feature is not in use.</em></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **Start Date**        | <p>Date from which the page will be active</p><p><em>By default, it is the current date.</em></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **End Date**          | Date after which the page cannot be accessed                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Description**       | An optional explanation of the page’s functionality and/or intended purpose.                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |

&#x20;4\. Under the **Roles Granted** tab, add the roles that can view and access the page.

* On the top-right corner, from the **Actions** list, click **Add Role.**  A blank row is create&#x64;**.**
* Under the **Role** column, from the list, select the required role.
* Select the **Start Date** and the **End Date** to define the period for which the role has access to the page.

![](/files/-M2IiW63Gvlcb7EymIX0)

5\. On the top-right corner, click **Save**.

6\. To view the page, open the **Navigation** **menu**, and refresh the browser. The newly created page name is displayed in the Navigation menu, under the assigned role, under the page group header added


---

# 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://docs.cloudio.io/creating-pages/working-with-pages/creating-a-page.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.
