CloudIO Platform
cloudio.ioVersion 3.0 Docs
  • CloudIO Platform
  • Architecture
  • Service Architecture
  • Scalability
  • Installation
  • Getting Started
    • Overview
    • How Tos
  • UI
    • App Controller
    • Page Controller
    • Controller Component
    • Custom Component
      • Sample Property Definitions
      • Custom Component Types
  • DataSource
    • Server Side Scripts
      • Sample Scripts
      • Module Imports
    • WHO Columns
  • REST APIs
    • Authentication
    • Query
    • Post
    • Status
    • API Playground
  • Workflow REST APIs
    • Introduction
    • PUT
    • GET
    • Instance PUT
    • Instance GET
    • Increment and GET
    • Instance Increment and GET
  • App Deployment
    • CloudIO CLI
    • Patch Management
    • SQL Migrations
    • Component Help
    • Email Setup
    • Configure SSO/OAuth
      • OAUTH 2.0
        • GOOGLE
      • SAML
        • AUTH0
        • AZURE AD
        • OKTA
      • Auto User Creation
    • Test Automation
    • On Premise Agent
  • Oracle Instant client
    • Setup
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. UI
  2. Custom Component

Custom Component Types

// The content of this module will be used to declare the types of @cloudio-saas/custom-types
export interface BaseCommonProps {
  comments?: string;
}

export interface Responsive {
  xl?: boolean;
  lg?: boolean;
  md?: boolean;
  sm?: boolean;
  xs?: boolean;
}

export type ExpressionOnlyValue = string;

export type ExpressionType = 'text' | 'expression';

export interface ExpressionValue {
  type: ExpressionType;
  value: string;
}

export const DefaultExpressionValue: ExpressionValue = Object.freeze({
  type: 'text',
  value: '',
});

export interface CommonProps extends BaseCommonProps {
  responsive?: Responsive;
  visible?: boolean;
  visibleCondition?: ExpressionOnlyValue;
  cssClassName?: ExpressionValue;
}

export type ItemID = string;

export interface BaseItem {
  children: ItemID[];
  itemId: ItemID;
  parent: ItemID;
  props: BaseCommonProps;
  type: string;
}

export interface BaseComponentItem extends BaseItem {
  props: CommonProps;
}

/** Add your custom component types below */

// Find below an example type definition for two custom components MyCardContainer & MyCard

// MyCardContainer
// 1. Define the type for the props to your custom component
export interface MyCardContainer extends CommonProps {
  filterDatasourceAlias: string;
  filterAttribute: string;
}

// 2. Define the item type of your custom component
export interface MyCardContainerItem extends BaseComponentItem {
  props: MyCardContainer;
  type: 'MyCardContainer';
}

// MyCard
// 1. Define the type for the props to your custom component
export interface MyCard extends CommonProps {
  seeMoreLabel?: string;
  borderRadius?: number;
  boxShadow?: string;
}

// 2. Define the item type of your custom component
export interface MyCardItem extends BaseComponentItem {
  props: MyCard;
  type: 'MyCard';
}

// 3. Register your custom component type by adding an entry to CustomComponentItemTypeRegistry
export interface CustomComponentItemTypeRegistry {
  MyCardContainer: MyCardContainer;
  MyCard: MyCard;
}

// 4. Added your custom component item type to CustomComponentItem
export type CustomComponentItem = MyCardContainerItem | MyCardItem;

/*
5. You can then import the above types in your component source as shown below

import { MyCard, MyCardContainer, MyCardItem, MyCardContainerItem } from '@cloudio-saas/custom-types';
*/

/** END custom component types */

/** Define any other Custom Types you would like to reuse between custom components 
 * or between manager & component code tabs. These types can then be
 * imported as 
 * 
 * import { MyCustomType } from '@cloudio-saas/custom-types';
 * 
 *******/

export interface MyCustomType {
  sampleType?: string;
}

/* END Custom Types */

export type CustomComponentItemType = keyof CustomComponentItemTypeRegistry;
PreviousSample Property DefinitionsNextServer Side Scripts

Last updated 2 years ago

Was this helpful?