Props

Binding Object

Type: object
Default: {}
Sample:

{
  name: 'VCP';
}

Configurations

Type: object
Default:

interface IConfigs {
  maximumFileSize: number;
  language: string;
  imageSrc: string;
  direction: string;
}

imageSrc: Given image for imageElement and variable with image type. usage:

// it can be either imported image file or base64 encoded image
import Logo from './assetsDir/Logo
{
  imageSrc: Logo
}
// or add base64 image you can use VCP's encodebase64 API
{
  imageSrc: base64Image
}

VCP's encodebase64 API

maximumFileSize: Maximum file size in KB.

Variables

Type: array
Default: []
Sample:

[
  {
    id: 'test1'
    type: 'text',
    grandParent: 'Print',
    configs: {
      name: 'name',
      context: 'VCP',
    }
  },
];

DataSets

Type: object
Default: {}
Sample:

object = {
  users: { // dataset name
    key: 'username', // dataset unique key
    title: 'Username DataSset' // dataset title
    columns: [
      {
        title: 'firstName',
        key: 'firstName',
          styles: {
            width: '70px',
          },
      },
      {
        title: 'lastName',
        key: 'lastName',
          styles: {
            width: '70px',
          },
      },
    ]
    rows: [
      {
        firstName: 'Alireza',
        lastName: 'Safari'
      },
      {
        firstName: 'John',
        lastName: 'Doe'
      },
    ]
  }
};

Rows with object data

If you have rows with object data, You should add another column object to that specific column like below:

columns: [
  {
    title: 'firstName',
    key: 'firstName',
    columns: [
      {
        title: 'Child Columns',
        key: 'child Columns',
          styles: {
            width: '70px',
          },
      },
    ]
      styles: {
        width: '70px',
    },
  },
];

And then add DatasetElement to a RepeatorElement, now your array data is avaiable in dataset's settings.

Props ​

Binding Object ​

Configurations ​

Variables ​

DataSets ​

Rows with object data ​