Informat Component Library

This chapter explains the component libraries defined by the platform, their specific usage methods, and documentation.

Informat Runtime

Informat runtime environment provides all capabilities of client-side scripts. It is generally used in modules embedded in the system. For specific API documentation, please refer to Client Scripts

Note

Components that reference the Informat Runtime component library cannot be called on external pages and can only run 依托于 the platform base. Such as custom component fields, custom views, and other modules embedded in the platform.

Informat Web Runtime

The Informat Web runtime environment is a subset of client-side scripts. It inherits the capabilities of client-side scripts except for context-related APIs. It is generally used in external pages.

informatweb.callAutomatic

Call automation

informatweb.callAutomatic({ automaticId, args });

Parameter	Type	Description
appId	String	The application ID to which the called automation belongs. If not passed, it defaults to the current application
automaticId	String	Automation identifier
args	Array	Parameters passed to the automation
withoutTimeoutLoading	bool	Whether to display the system's execution loading

Return Value Automation call result

Example

//Call system automation
informatweb
  .callAutomatic({
    // appId: 'msucfeq7305cn',
    automaticId: "a1",
    args: ["123", 1],
  })
  .then((result) => {
    console.log(result);
  });

Note

Automations called by Informat Runtime only execute server-side steps, not client-side steps, and the called automation needs to enable Allow calling automations via Http

informatweb.attachmentUrl

Get data table attachment field file link

informatweb.attachmentUrl(tableKey, fieldKey, fileId);

Parameter	Type	Description
tableKey	String	Module identifier
fieldKey	String	Field identifier
fileId	String	File ID

Return Value Type is String

Example

const attachmentUrl = informatweb.attachmentUrl("testTable", "testField", "xxxx.png");
console.log(attachmentUrl); // https://next.informat.cn/web0/file/fieldkey/gx6wpgysmthb1/testTable/testField/xxxx.png?token=xxxxxxx

Informat Vue Utility Functions

A collection of custom Vue directives and filters, providing commonly used functions and filters.

$informatAge

Convert date to age

this.$informatAge(date);

Parameter	Type	Description
date	Date|Number|String	Date

Return Value Type is Number

Example

const age = this.$informatAge("2000-01-01");
console.log(age); // 24

$informatArrReverse

Reverse an array

this.$informatArrReverse(arr);

Parameter	Type	Description
arr	Array	Original array

Return Value Type is Array

Example

const arr = [1, 2, 3, 4];
const ret = this.$informatArrReverse(arr);
console.log(ret); // [4,3,2,1]

$informatArrSort

Sort an array

this.$informatArrSort(arr, key, direction);

Parameter	Type	Description
arr	Array	Original array
key	String	Property key for sorting calculation
direction	String	Sorting method (asc, desc)

Return Value Type is Array

Example

const arr = [{ value: 1 }, { value: 5 }, { value: 3 }, { value: 2 }];
const ret = this.$informatArrSort(arr, "value", "asc");
console.log(ret); // arr = [{ value: 1 },{ value: 2 },{ value: 3 },{ value: 5 }]

$informatCapitalize

Capitalize the first letter

this.$informatCapitalize(value);

Parameter	Type	Description
value	String	String content

Return Value Type is String

Example

const ret = this.$informatCapitalize("test");
console.log(ret); // Test

$informatChop

String content truncation

this.$informatChop(value, length, location);

Parameter	Type	Description
value	String	String content
length	Number	Truncation length
location	String	Truncation method (start, end) default end

Return Value Type is StringExample

const ret = this.$informatChop("hello world", 5, "end");
console.log(ret); // world

$informatCurrency

Add currency symbol to number

this.$informatCurrency(value, code);

Parameter	Type	Description
value	Number	Amount
code	String	Currency code. Such as: PHP, USD, AUD, GBP, CNY

Return Value Type is String

Example

const ret = this.$informatCurrency(100, "PHP");
console.log(ret); // ₱100

$informatDateFormat

Date formatting

this.$informatDateFormat(date, format);

Parameter	Type	Description
date	Date,Long,String	Date
format	String	Format

Return Value Type is String

Example

const ret = this.$informatDateFormat(new Date(), "yyyy-MM-dd HH:mm:ss");
console.log(ret); // 2024-05-21 19:46:56

$informatFileSize

Format file size display, convert bytes to specific file size

this.$informatFileSize(value);

Parameter	Type	Description
value	Number	File byte size

Return Value Type is String

Example

const ret = this.$informatFileSize(1024);
console.log(ret); // 1.0 Kb

const ret2 = this.$informatFileSize(10000000000);
console.log(ret2); // 9.3 Gb

$informatJson

Format and display object as JSON

this.$informatJson(value, indent);

Parameter	Type	Description
value	Object	Object
indent	Number|String	Indent content

Return Value Type is String

Example

const ret = this.$informatJson({ name: "张三" }, 2);
console.log(ret);
/*
{
  "name": "张三"
}
*/

$informatLowercase

Convert letters to lowercase

this.$informatLowercase(value);

Parameter	Type	Description
value	String	String content

Return Value Type is String

Example

const ret = this.$informatLowercase("HELLO WORLD");
console.log(ret); // hello world

$informatObjectSize

Format and output the size of a given object

this.$informatObjectSize(value);

Parameter	Type	Description
value	Object	Object

Return Value Type is String

Example

const ret = this.$informatObjectSize({ name: "张三" });
console.log(ret); // 17 B

$informatReplace

String content replacement

this.$informatReplace(value, replacee, replacer);

Parameter	Type	Description
value	String	String content
replacee	String	Content text or regex to replace
replacer	String	Content to replace with

Return Value Type is String

Example

const ret = this.$informatReplace("In the end", /end/i, "start.");
console.log(ret); // In the start.

$informatReverse

Reverse string content

this.$informatReverse(value);

Parameter	Type	Description
value	String	String content

Return Value Type is String

Example

const ret = this.$informatReverse("hello");
console.log(ret); // olleh

$informatSandwich

Prepend and append data around the given value

this.$informatSandwich(value, start, end);

Parameter	Type	Description
value	String	String content
start	String	Content to prepend
end	String	Content to append (default reversed start content)

Return Value Type is String

Example

const ret = this.$informatSandwich("中", "前", "后");
console.log(ret); // 前中后

const ret1 = this.$informatSandwich("内容", "<< ");
console.log(ret1); // << 内容 >>

$informatTruncate

Truncate string content to specified length and replace excess part with ellipsis

this.$informatTruncate(value, length);

Parameter	Type	Description
value	String	String content
length	Number	Truncation length

Return Value Type is String

Example

const ret = this.$informatTruncate("这是一行很长很长的文本", 4);
console.log(ret); // 这是一行...

$informatUppercase

Convert string content letters to uppercase

this.$informatUppercase(value);

Parameter	Type	Description
value	String	String content

Return Value Type is String

Example

const ret = this.$informatUppercase("test");
console.log(ret); // TEST