> For the complete documentation index, see [llms.txt](https://docs.cloudio.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cloudio.io/creating-pages/working-with-pages/creating-a-page.md).

# 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
