# 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.

![](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2F-M1cvwzKOL9chBoVRmso%2F-M1cwcdxelAPW741sKn1%2FList%20of%20pages.png?alt=media\&token=d39c2099-05ee-4d73-be5a-a9e534d07006)

&#x20;2\. On the top-right corner, click ![](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2F-M1_9Ha4kZEJgLjsB7xQ%2F-M1_DCGfQvqSg3QeKR5W%2FCreate%20page%20icon%20using%20navigation%20menu.png?alt=media\&token=c0007ac3-12ca-4514-9961-bcdd56999cb0) .

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

![](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2F-M1cwhef4Lc486vkFPpP%2F-M1cxveEbEEGHe3mrfcZ%2FNew%20Page%20screen.png?alt=media\&token=d902bf18-ea00-4063-a981-c91902d4b02b)

&#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.

![](https://1117313960-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzMJAXNyRSI4WE3Jt4z%2F-M2Ih_mQeA1eOlR5zwaI%2F-M2IiW63Gvlcb7EymIX0%2FRoles%20Granted_tab.png?alt=media\&token=51214d08-48e7-4773-9705-119de7581490)

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
