@servicenow/ui-types

@servicenow/ui-types

Collection of UI Framework on Next Experience data types to provide UIB the ability to auto-wire components and to share common type schemas.

If you are unfamiliar with UI Framework on Next Experience's type schema or JSON Schema, please visit its documentation.

To contribute to this repo, see CONTRIBUTING.md.

• Usage
  • Primitives
  • Sets
• API
  • Primitives
  • Sets

Usage

@servicenow/ui-types has two categories of exports: primitives and sets.

Primitives

Primitives are the building blocks for your UI Framework on Next Experience schemas. They are a set of commonly used types for properties and action payloads for you to use. All primitives are JSON Schema objects.

To use primitives, you can import them from @servicenow/ui-types:

import {sysId} from '@servicenow/ui-types';
import {createCustomElement} from '@servicenow/ui-core';

createCustomElement('my-component', {
	properties: {
		sysId: {
			schema: sysId
		}
	}
});

sysId is one of the primitives and has the JSON Schema rules to make sure users pass in a valid sysId to your component.

If you need to augment the type, you can combine the primitive with your own schema. Please see JSON Schema's documentation on how to combine schemas. For example, let's say your property is a table primitive type but you want to refine it to only be one of a handful of tables. You can use allOf to acheive that:

import {table} from '@servicenow/ui-types';

createCustomElement('my-component', {
	properties: {
		table: {
			schema: {
				allOf: [table, {enum: ['table_one', 'table_two', 'table_three']}]
			}
		}
	}
});

Sets

Sets are a grouping of primitives that are commonly used together. Using sets in your component definitions will help UIB auto-wire your component when it is dropped onto a page: if there is a data broker on the page that already uses the same set as your component, UIB can ask the user if they want to automatically wire that data broker to your properties!

import {record} from '@servicenow/ui-types';
import {createCustomElement} from '@servicenow/ui-core';

createCustomElement('my-component', {
  properties: {
    table: {
      schema: record.table
    }
    sysId: {
      schema: record.sysId
    }
  }
});

API

Primitives API

• table: string
• sysId: string
• query: string

Sets API

• record
  • sysId: required
  • table: required
  • view: optional
• list
  • table: required
  • query: required
  • page: optional
  • recordsPerPage: optional