{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2457,"path":"application-development/servicenow-sdk/fluent-ui-page-api.md","title":"UI Page API - ServiceNow Fluent","bundle":null,"doc_type":null,"release":"australia","body":"\n# UI Page API - ServiceNow Fluent\n\nThe UI Page API defines custom user interface \\(UI\\) pages \\[sys\\_ui\\_page\\] that display forms, dialogs, lists, and other UI components.\n\n**Note:** For the latest ServiceNow Fluent API documentation and examples, see the [ServiceNow Fluent API reference](https://servicenow.github.io/sdk/category/api-reference) and [ServiceNow SDK examples repository](https://github.com/ServiceNow/sdk-examples) on GitHub.\n\nA UI page displays as a web page and can be added to a widget for use in dashboards. For general information about UI pages, see [UI pages](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/api-reference/scripts/r_UIPages.md).\n\nYou can develop a simple React application with the UI Page API. In the `src/client` directory, add static content files that define the HTML, client script, and styling of the page. From the UiPage object, refer to the page's HTML entry point \\(`index.html`\\). For more information, see [User interface development with React](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-development-react.md).\n\n**Parent Topic:**[ServiceNow Fluent API reference](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/servicenow-fluent-api-reference.md)\n\n**Related topics**  \n\n\n[ServiceNow Fluent](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-fluent.md)\n\n## UiPage object\n\nCreate a UI page \\[sys\\_ui\\_page\\] for a custom user interface.\n\n<table id=\"table_qyv_1pj_4fc\" class=\"parameters\"><thead><tr><th>\n\nName\n\n</th><th>\n\nType\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\n$id\n\n</td><td>\n\nString or Number\n\n</td><td>\n\nRequired. A unique ID for the metadata object. When you build the application, this ID is hashed into a unique sys\\_id. For more information, see [ServiceNow Fluent language constructs](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/fluent-constructs.md).Format: `Now.ID['String' or Number]`\n\n</td></tr><tr><td>\n\nendpoint\n\n</td><td>\n\nString\n\n</td><td>\n\nRequired. The endpoint to access the web page. The endpoint value can't contain spaces.Format: `<scope>_<ui_page_name>.do`\n\n</td></tr><tr><td>\n\ndescription\n\n</td><td>\n\nString\n\n</td><td>\n\nA description of the user interface and its purpose.\n\n</td></tr><tr><td>\n\ndirect\n\n</td><td>\n\nBoolean\n\n</td><td>\n\nFlag that indicates whether to omit the standard HTML, CSS, and JavaScript for a UI page. For React UI pages, set this property to `true`.Valid values:\n\n-   true: Omit the standard HTML, CSS, and JavaScript and provide custom CSS and JavaScript for the page.\n-   false: Include the standard HTML, CSS, and JavaScript.\n\nDefault: false\n\n</td></tr><tr><td>\n\nhtml\n\n</td><td>\n\nString\n\n</td><td>\n\nThe body HTML code that defines what is rendered when the page is shown. It can contain either static XHTML, dynamically generated content defined as Jelly, or call script includes and UI Macros. This property supports an alias to import an `index.html` file for React development, a reference to another file in the application that contains HTML, or inline JavaScript.**Note:** With React development and imported HTML, the html property of the UiPage object supports only one-way synchronization. After defining the HTML of a UI page in source code, if the HTML is modified outside of the source code, those changes aren't synchronized and reflected in the source code.\n\nFormat:\n\n-   An alias to import the `index.html` file from the previous build for UI development with React. The alias can be any value and must also be imported in the `now.ts` file that contains the UiPage object: `import <alias> from 'path/to/index.html'`.\n-   To use text content from another file, refer to a file in the application using the following format: `Now.include('path/to/file')`. For more information, see [ServiceNow Fluent language constructs](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/fluent-constructs.md).\n-   To provide inline HTML, use string literals or template literals for multiple lines of code: `'HTML' or `HTML``.\n\n</td></tr><tr><td>\n\ncategory\n\n</td><td>\n\nString\n\n</td><td>\n\nThe type of UI page.Valid values:\n\n-   general: The page is general purpose.\n-   homepages: The page is used as a home page.\n-   htmleditor: The page is used to insert HTML content.\n-   kb: The page is used with a Knowledge Base.\n-   cms: The page is used with the Content Management System \\(CMS\\).\n-   catalog: The page is used with Service Catalog.\n\n</td></tr><tr><td>\n\nclientScript\n\n</td><td>\n\nScript\n\n</td><td>\n\nA script that runs in the browser, such as functions called by buttons. This script handles any required client-side processing needed, like setting focus to a field or other interactive DHTML features after a page is loaded. This property supports inline JavaScript or a reference to another file in the application that contains a script.Client scripts for the UI page are deployed to the browser within a `<script>` tag, so the content can similarly be defined within the HTML field. The clientScript property can be used instead to define these scripts concisely to maintain the Jelly and HTML manageability.\n\nFormat:\n\n-   To use text content from another file, refer to a file in the application using the following format: `Now.include('path/to/file')`. For more information, see [ServiceNow Fluent language constructs](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/fluent-constructs.md).\n-   To provide an inline script, use string literals or template literals for multiple lines of code: `'Script' or `Script``.\n\n</td></tr><tr><td>\n\nprocessingScript\n\n</td><td>\n\nScript\n\n</td><td>\n\nA script that runs on the server when the page is submitted, which is useful if your page has a form defined with the `<g:ui_form/>` or `<g:form/>` tags. This property supports a function from a JavaScript module, a reference to another file in the application that contains a script, or inline JavaScript.Format:\n\n-   For functions, use the name of a function, function expression, or default function exported from a JavaScript module and import it into the `.now.ts` file. For information about JavaScript modules, see [JavaScript modules and third-party libraries](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/javascript-modules-third-party-libraries.md).\n-   To use text content from another file, refer to a file in the application using the following format: `Now.include('path/to/file')`. For more information, see [ServiceNow Fluent language constructs](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/fluent-constructs.md).\n-   To provide an inline script, use string literals or template literals for multiple lines of code: `'Script' or `Script``.\n\n</td></tr><tr><td>\n\n$meta\n\n</td><td>\n\nObject\n\n</td><td>\n\nMetadata for the application metadata.With the installMethod property, you can map the application metadata to an output directory that loads only in specific circumstances.\n\n```javascript\n$meta: {\n      installMethod: 'String'\n}\n```\n\nValid values for installMethod:\n\n-   demo: Outputs the application metadata to the `metadata/unload.demo` directory to be installed with the application when the **Load demo data** option is selected.\n-   first install: Outputs the application metadata to the `metadata/unload` directory to be installed only the first time an application is installed on an instance.\n\n</td></tr></tbody>\n</table>In this example of UI development with React, the HTML of the page is imported from the `index.html` file in the `src/client` directory.\n\n```javascript\n//incident-manager.now.ts\nimport '@servicenow/sdk/global'\nimport { UiPage } from '@servicenow/sdk/core'\nimport incidentPage from '../../client/index.html'\n\nUiPage({\n    $id: Now.ID['incident-manager-page'],\n    endpoint: '<scope>_incident_manager.do',\n    description: 'Incident Response Manager UI Page',\n    category: 'general',\n    html: incidentPage,\n    direct: true,\n})\n```\n\nIn the `index.html` file, the `<script>` tag refers to the `main.jsx` file in the `src/client` directory, which contains the component code.\n\n```xml\n//index.html\n<html>\n<head>\n  <title>Incident Response Manager</title>\n\n  <!-- Initialize globals and Include ServiceNow's required scripts -->\n  <sdk:now-ux-globals></sdk:now-ux-globals>\n\n  <!-- Include your React entry point -->\n  <script src=\"./main.jsx\" type=\"module\"></script>\n</head>\n<body>\n  <div id=\"root\"></div>\n</body>\n</html>\n```\n\n"}}