{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2454,"path":"application-development/servicenow-sdk/fluent-service-portal-api.md","title":"Service Portal API - ServiceNow Fluent","bundle":null,"doc_type":null,"release":"australia","body":"\n# Service Portal API - ServiceNow Fluent\n\nThe Service Portal API defines custom widgets \\[sp\\_widget\\] for portal pages.\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\nFor general information about portals, see [Service Portal](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/platform-user-interface/c_ServicePortal.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## SPWidget object\n\nCreate a custom widget \\[sp\\_widget\\] to include on a portal page.\n\nFor general information about creating custom widgets, see [Developing custom widgets](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/platform-user-interface/widget-dev-guide.md).\n\n<table id=\"table_egv_ymg_kfc\" 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\nname\n\n</td><td>\n\nString\n\n</td><td>\n\nRequired. A name for the widget.\n\n</td></tr><tr><td>\n\ncategory\n\n</td><td>\n\nString\n\n</td><td>\n\nThe type of widget.Valid values:\n\n-   standard\n-   otherApplications\n-   custom\n-   sample\n-   knowledgeBase\n-   servicePortal\n-   serviceCatalog\n\nDefault: custom\n\n</td></tr><tr><td>\n\nclientScript\n\n</td><td>\n\nScript\n\n</td><td>\n\nA client-side script that defines the AngularJS controller. This property supports inline JavaScript or a reference to another file in the application that contains a script. Format:\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\nDefault:\n\n```javascript\napi.controller=function() { /* widget controller */ var c = this;};\n```\n\n</td></tr><tr><td>\n\nserverScript\n\n</td><td>\n\nScript\n\n</td><td>\n\nA server-side script that sets the initial widget state, sends data to the widget's client script using the `data` object, or runs server-side queries. This property supports inline JavaScript or a reference to another file in the application that contains a script. Format:\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\nDefault:\n\n```javascript\n(function () { /* populate the 'data' object */ /* e.g., data.table = $sp.getValue('table'); */ })();\n```\n\n</td></tr><tr><td>\n\ncontrollerAs\n\n</td><td>\n\nString\n\n</td><td>\n\nA variable for a reference to the controller in the directive's scope. The client script accesses the server data object using the `c.data` variable by default.Default: c\n\n</td></tr><tr><td>\n\nhtmlTemplate\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 a reference to another file in the application that contains HTML or inline HTML.Format:\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 inline HTML, use string literals or template literals for multiple lines of code: `'HTML' or `HTML``.\n\nDefault:\n\n```xml\n<div><!-- your widget template --></div>\n```\n\n</td></tr><tr><td>\n\ncustomCss\n\n</td><td>\n\nString\n\n</td><td>\n\nThe CSS or SCSS that defines the widget style. This property supports a reference to another file in the application that contains CSS or inline CSS. Format:\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 inline CSS, use string literals or template literals for multiple lines of code: `'CSS' or `CSS``.\n\n</td></tr><tr><td>\n\ndataTable\n\n</td><td>\n\nString\n\n</td><td>\n\nThe table in which to store widget instance options. To define a custom option schema, you can add fields to a table that extends the Widget Instance \\[sp\\_instance\\] table and set your widget to use the extension table as a data source. For more information, see [Store instance options in a table](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/platform-user-interface/c_WidgetInstanceOptions.md).Default: sp\\_instance\n\n</td></tr><tr><td>\n\ndemoData\n\n</td><td>\n\nString or Object\n\n</td><td>\n\nData that demonstrates the widget functionality. This property supports inline strings, a reference to another file in the application that contains JSON, or inline JSON serializable objects.Format:\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 inline JSON, use an object with key and value pairs: `{ key: value }`.\n\n</td></tr><tr><td>\n\ndescription\n\n</td><td>\n\nString\n\n</td><td>\n\nA description of the widget and its purpose.\n\n</td></tr><tr><td>\n\ndocs\n\n</td><td>\n\nReference\n\n</td><td>\n\nThe variable identifier of the Service Portal documentation \\[sp\\_documentation\\] that provides additional information about the widget and its purpose. To define Service Portal documentation, see [Record API - ServiceNow Fluent](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/record-api-now-ts.md).\n\n</td></tr><tr><td>\n\nfields\n\n</td><td>\n\nArray\n\n</td><td>\n\nA list of column names from the data table to use in the widget option schema.\n\n</td></tr><tr><td>\n\nhasPreview\n\n</td><td>\n\nBoolean\n\n</td><td>\n\nFlag that indicates whether you can preview the widget from the Widget Editor.Valid values:\n\n-   true: You can preview the widget from the Widget Editor.\n-   false: You can't preview the widget from the Widget Editor.\n\nDefault: false\n\n</td></tr><tr><td>\n\nid\n\n</td><td>\n\nString\n\n</td><td>\n\nA unique ID for the widget. The ID can't contain spaces.\n\n</td></tr><tr><td>\n\nlinkScript\n\n</td><td>\n\nScript\n\n</td><td>\n\nA link function that uses AngularJS to directly manipulate the DOM. This property supports inline JavaScript or a reference to another file in the application that contains a script.Format:\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\nDefault:\n\n```javascript\nfunction link(scope, element, attrs, controller) { }\n```\n\n</td></tr><tr><td>\n\nroles\n\n</td><td>\n\nArray\n\n</td><td>\n\nA list of variable identifiers of Role objects or names of roles that can access the widget. For more information, see [Role API - ServiceNow Fluent](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/role-api-now-ts.md).\n\n</td></tr><tr><td>\n\noptionSchema\n\n</td><td>\n\nArray\n\n</td><td>\n\nA list of parameters that a Service Portal administrator \\(sp\\_admin\\) can configure for a widget instance. The widget option schema supports reusing a widget and uniquely configuring instances of the widget on different pages. For more information, see [Widget option schema](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/platform-user-interface/c_WidgetInstanceOptions.md).```javascript\noptionSchema: [\n  {\n    name: 'String',\n    label: 'String',\n    section: 'String',\n    type: 'String',\n    defaultValue: 'String',\n    hint: 'String'\n  },\n...\n]\n```\n\n-   name: Required. The name of the parameter.\n-   label: Required. A label for the parameter that appears in the widget instance options.\n-   section: Required. The section of the widget instance options in which the parameter appears.\n\nValid values:\n\n    -   data\n    -   behavior\n    -   documentation\n    -   presentation\n    -   other\n-   type: Required. The data type of the parameter.\n\nValid values:\n\n    -   string\n    -   boolean\n    -   integer\n    -   reference\n    -   choice\n    -   fieldList\n    -   fieldName\n    -   glideList\n    -   glyphIcon\n-   defaultValue: The default value of the parameter.\n-   hint: A short description of the parameter that displays as tooltip when hovering over it.\n\n</td></tr><tr><td>\n\npublic\n\n</td><td>\n\nBoolean\n\n</td><td>\n\nFlag that indicates whether the widget is available to unauthenticated users.Valid values:\n\n-   true: Unauthenticated users can access the widget.\n-   false: Only authenticated users can access the widget.\n\nDefault: false\n\n</td></tr><tr><td>\n\ndependencies\n\n</td><td>\n\nArray\n\n</td><td>\n\nA list of variable identifiers of SPWidgetDependency objects or names or sys\\_ids of dependencies for the widget. For more information, see [SPWidgetDependency object](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/fluent-service-portal-api.md).\n\n</td></tr><tr><td>\n\nangularProviders\n\n</td><td>\n\nArray\n\n</td><td>\n\nA list of variable identifiers of SPAngularProvider objects or names or sys\\_ids of Angular providers for the widget. For more information, see [SPAngularProvider object](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/fluent-service-portal-api.md).\n\n</td></tr><tr><td>\n\ntemplates\n\n</td><td>\n\nArray\n\n</td><td>\n\nA list of Angular ng-templates \\[sp\\_ng\\_template\\] to associate with the widget. Angular ng-templates contain content that is rendered only when you instruct it to render.```javascript\ntemplates: [\n  {\n    $id: Now.ID['String' or Number]\n    id: 'String'\n    htmlTemplate: 'HTML' or `HTML` \n  },\n  ...\n]\n```\n\n-   $id: Required. A unique ID for the metadata object. When you build the application, this ID is hashed into a unique sys\\_id.\n\nFormat: `Now.ID['String' or Number]`\n\n-   id: Required. The ID of the Angular ng-template.\n-   htmlTemplate: Required. The HTML template content. This property supports a reference to another file in the application that contains HTML or inline HTML.\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>```javascript\nimport { SPWidget } from '@servicenow/sdk/core'\n\nSPWidget({\n    $id: 'my_simple_widget',\n    name: 'My Simple Widget',\n    category: 'knowledgeBase',\n    clientScript: Now.include('./client.js'),\n    serverScript: Now.include('./server.js'),\n    controllerAs: '$ctrl',\n    customCss: Now.include('./custom_css.css'),\n    dataTable: 'sp_instance',\n    demoData: { message: 'Hello, World!' },\n    description: 'This is a test widget',\n    docs: widgetDoc,\n    htmlTemplate: Now.include('./template.html'),\n    fields: ['color', 'class_name'],\n    hasPreview: true,\n    id: 'my-simple-widget',\n    linkScript: Now.include('./link.client.js'),\n    optionSchema: [\n        {\n            name: 'my_option',\n            label: 'My Option',\n            type: 'string',\n            section: 'behavior'\n        }\n    ],\n    roles: [manager, 'admin'],\n})\n```\n\n## SPAngularProvider object\n\nCreate an Angular Provider \\[sp\\_angular\\_provider\\] to reuse components in multiple widgets and improve portal performance.\n\n<table id=\"table_egv_ymg_kfc\" 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\nname\n\n</td><td>\n\nString\n\n</td><td>\n\nRequired. A name for the Angular provider.\n\n</td></tr><tr><td>\n\nclientScript\n\n</td><td>\n\nScript\n\n</td><td>\n\nA client-side script to reuse in widgets.This property supports inline JavaScript or a reference to another file in the application that contains a script. Format:\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\ntype\n\n</td><td>\n\nString\n\n</td><td>\n\nThe type of Angular provider.Valid values:\n\n-   directive\n-   factory\n-   service\n\nDefault: directive\n\n</td></tr><tr><td>\n\nrequires\n\n</td><td>\n\nArray\n\n</td><td>\n\nA list of variable identifiers of other SPAngularProvider objects or names or sys\\_ids of Angular providers.\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>```javascript\nimport { SPAngularProvider } from '@servicenow/sdk/core'\nconst OTHER_ANGULAR_PROVIDER = 'd11f285fe069e1f119b44bd05c0770aa'\n\nSPAngularProvider({\n    $id: 'my_angular_provider',\n    name: 'my_angular_provider',\n    clientScript: Now.include('my_angular_provider.client.js'),\n    type: 'directive',\n    requires: [OTHER_ANGULAR_PROVIDER]\n})\n```\n\n## SPWidgetDependency object\n\nCreate a widget dependency \\[sp\\_dependency\\] to link JavaScript and CSS files to widgets and use third-party libraries, external style sheets, or Angular modules.\n\nDependencies are loaded asynchronously from the server when needed. Widgets can have as many or as few dependencies as needed. However, the more you add, the more content a widget must download to render on the page. Keep dependencies as small as possible for more efficient load times. For more information, see [Create a widget dependency](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/platform-user-interface/widget-dependencies.md).\n\n<table id=\"table_egv_ymg_kfc\" 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\nname\n\n</td><td>\n\nString\n\n</td><td>\n\nRequired. The name of the widget dependency.\n\n</td></tr><tr><td>\n\nangularModuleName\n\n</td><td>\n\nString\n\n</td><td>\n\nThe name of the Angular module to load if the JS include is an Angular module.\n\n</td></tr><tr><td>\n\nincludeOnPageLoad\n\n</td><td>\n\nBoolean\n\n</td><td>\n\nFlag that indicates when the dependency loads on a page.Valid values:\n\n-   true: The dependency loads with the initial page load.\n-   false: The dependency loads only when the linked widget is loaded on a page.\n\nDefault: false\n\n</td></tr><tr><td>\n\ncssIncludes\n\n</td><td>\n\nArray\n\n</td><td>\n\nA list of variable identifiers of CssInclude objects or sys\\_ids of CSS includes and their order. For more information, see [CssInclude object](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/fluent-service-portal-api.md).```javascript\ncssIncludes: [\n  {\n    order: Number,\n    include: 'String' or Reference,\n  },\n  ...\n]\n```\n\n</td></tr><tr><td>\n\njsIncludes\n\n</td><td>\n\nArray\n\n</td><td>\n\nA list variable identifiers of JsInclude objects or sys\\_ids of JS includes and their order. For more information, see [JsInclude object](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/servicenow-sdk/fluent-service-portal-api.md).```javascript\njsIncludes: [\n  {\n    order: Number,\n    include: 'String' or Reference,\n  },\n  ...\n]\n```\n\n</td></tr><tr><td>\n\nportalsForPageLoad\n\n</td><td>\n\nArray\n\n</td><td>\n\nA list of sys\\_ids of portals \\[sp\\_portal\\] that load the widget dependency. If empty, the dependency is included on the page load for all portals.\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>```javascript\nimport { SPWidgetDependency } from '@servicenow/sdk/core'\n\nSPWidgetDependency({\n    $id: 'samplejs',\n    name: 'Sample',\n    angularModuleName: 'samplejs',\n    includeOnPageLoad: true,\n    portalsForPageLoad: ['b4572a48262a16df3032b48cef75a853', 'fe12dbbed14bd3f712f0787141c2f656'],\n    cssIncludes: [\n        {\n            order: 100,\n            include: localCss,\n        },\n        {\n            order: 200,\n            include: '94112ccb0fb3c2ed072b01d3cb401196',\n        },\n    ],\n    jsIncludes: [\n        {\n            order: 100,\n            include: localJs,\n        },\n        {\n            order: 200,\n            include: 'f8af18a5e6c71a3702c4f2038b43cf62',\n        },\n    ],\n})\n```\n\n## CssInclude object\n\nCreate a CSS include \\[sp\\_css\\_include\\] to reference a style sheet or external CSS in a widget dependency.\n\n<table id=\"table_egv_ymg_kfc\" 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\nname\n\n</td><td>\n\nString\n\n</td><td>\n\nRequired. The name of the CSS include.\n\n</td></tr><tr><td>\n\nurl\n\n</td><td>\n\nString\n\n</td><td>\n\nThe URL to an external CSS file. This property is required if a style sheet isn't provided with the spCss property.\n\n</td></tr><tr><td>\n\nspCss\n\n</td><td>\n\nString\n\n</td><td>\n\nThe sys\\_id of a style sheet \\[sp\\_css\\]. This property is required if an external CSS file isn't provided with the url property.\n\n</td></tr><tr><td>\n\nrtlCssUrl\n\n</td><td>\n\nString\n\n</td><td>\n\nThe URL to an external right-to-left \\(RTL\\) CSS file for mirroring the direction of a widget when the session language is a right-to-left language, such as Hebrew. For more information, see [Styling for right-to-left languages in portals](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/platform-user-interface/styling-right-to-left-languages.md).\n\n</td></tr><tr><td>\n\nlazyLoad\n\n</td><td>\n\nBoolean\n\n</td><td>\n\nFlag that indicates how to load the CSS Include. This property applies only if you use the spCSS property to specify a style sheet.Valid values:\n\n-   true: The CSS include loads asynchronously to improve page load time.\n-   false: The CSS include doesn't load asynchronously.\n\nDefault: false\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>```javascript\nimport { CssInclude } from '@servicenow/sdk/core'\n\nconst localCss = CssInclude({\n    $id: '22bcf16da81e2bc0340c53d50d531adf',\n    name: 'Sample Styles',\n    spCss: '50e3e32aa321b1c7d1945c5f423228bd',\n})\n```\n\n## JsInclude object\n\nCreate a JS include \\[sp\\_js\\_include\\] to reference a UI script or external JavaScript code in a widget dependency.\n\n<table id=\"table_egv_ymg_kfc\" 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\nname\n\n</td><td>\n\nString\n\n</td><td>\n\nRequired. The name of the JS include.\n\n</td></tr><tr><td>\n\nurl\n\n</td><td>\n\nString\n\n</td><td>\n\nThe URL to an external JavaScript file. The URL should be an absolute path. This property is required if a UI script isn't provided with the sysUiScript property.\n\n</td></tr><tr><td>\n\nsysUiScript\n\n</td><td>\n\nString\n\n</td><td>\n\nThe sys\\_id of a UI script \\[sys\\_ui\\_script\\]. This property is required if an external JavaScript file isn't provided with the url property.\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>```javascript\nimport { JsInclude } from '@servicenow/sdk/core'\n\nconst localJs = JsInclude({\n    $id: '98239e4eadfac88b01cce7daa23b6fc3',\n    name: 'Sample Framework',\n    sysUiScript: 'b67af05645f738df1f286bb3e9ecd55f',\n})\n```\n\n"}}