RenderState Structure

The RenderState and its children can be modelled as types in TypeScript. Each visible and active view node in the view tree will be provided to the client as a RenderState object.

/**
 * Defines the type of node that a RenderState object represents
 */
export enum NodeType{
  Attribute = "attribute",
  Box = "box",
  Record = "record",
  Repeater ="repeater",
  Selector = "selector",
  Text = "text",
  ServiceFormItem = "serviceFormItem",
  Menu = "menu",
  Button = "button",
  ServiceIntance = "serviceInstance"
}

/**
 * Base node representation sent from server
 */
export interface RenderState {
  /**
   * Type of node. e.g., box, text, attribute, record, repeater,
   */
  nodetype: NodeType | string;
  /**
   * Any widget configured directly for node
   */
  widget?: string | null;
  /**
   * ID of node.  Used extensively for looking up node in view tree.
   */
  id: string;
  /**
   * Any text for the node to display
   */
  text?: LocalisedText;
  /**
   * Display options.  Hints for the rendering engine to display in particular ways.  e.g., inline
   */
  dos?: string[];
  /**
   * Any key values that have been made available to the UI
   */
  kv?: KeyValues;
  /**
   * Read only flag
   */
  ro?: boolean;
  /**
   * Any errors associated with the node
   */
  errors?: NodeError[];
  /**
   * Source information of where the in the configuration the node exists
   */
  src?: object;
  srcLocation?: string;
  /**
   * Minimum number
   */
  min?: number;
  /**
   * Maximum number
   */
  max?: number;
  /**
   * Any data constraint for the node - this may move to the AttributeRenderState.
   */
  dataConstraint?: DataConstraint;

  dc?: string | null;

  size?: string;
}
/**
 * Render state for any Node that may have children
 */
export interface ContainerRenderState extends RenderState {
  /**
   * ID's of children
   */
  children?: string[];
}
/**
 * Additional fields for Records
 */
export interface RecordRenderState extends ContainerRenderState {
  /**
   * Name of the domain.
   */
  domain: string;
}
/**
 * Additional fields for attributes.
 */
export interface AttributeRenderState extends RenderState {
  /**
   * Name of data constraint for the attribute
   */
  dc?: string;
  /**
   * Attribute name
   */
  attribute: string;
  /**
   * String representation of attribute value
   */
  attributeValue?: string;
  /**
   * Group selector flag
   */
  gs?: boolean;
  /**
   * Mandatory flag
   */
  m: boolean;
}

/**
 * Key values that
 */
export interface KeyValues {
  [key: string]: object | string | number | null | boolean;
}

/**
 * Localised text values
 */
export interface LocalisedText {
  [key: string]: string | null;
}

/**
 * Error levels
 */
export enum NodeErrorLevel {
  fatal,
  error,
  warn,
  info,
  debug
}
/**
 * Representation of an error attached to a view node.
 */
export interface NodeError {
  level: NodeErrorLevel;
  msg: string;
}

Within the Service Transaction View Nodes making up the form are a tree structure called the the ViewTree. When rendering this to the browser this tree is flattened into a map.

Each node is added into this flattened ViewTree with the node’s ID used to key the map.

The root node of the view tres’s ID is identified by the ‘root’ field within the viewtree.

As well as the view node RenderState data constraints and generic text keys are also added to the map. These use DC and TK prefixes to ensure there is no collision within the map.

/**
 * Flattened representation of the server view tree
 */
export interface ViewTree {
  [key: string]:
    | RenderState
    | AttributeRenderState
    | ContainerRenderState
    | RecordRenderState
    | RepeaterRenderState
    | SelectorRenderState
    | string
    | DataConstraint;
  /**
   * Entry point into view tree
   */
  root: string;
}
/**
 * A configured type definition
 */
export interface DataConstraint {
  /**
   * Name of data constraint
   */
  name: string;
  /**
   * Base type ie alpha, long, yesno
   */
  type?: string;
  /**
   * Where there a restricted list of values. e.g., yesno
   */
  restrict: boolean;
  /**
   * Possible values with data constraint code as the key and the text representation as the value
   */
  values?: LocalisedText;
}