Built-in Functions

The following built-in functions are available for components dynamically defined with the $comp object.

$fn.ui.add(compObj)

Adds a component dynamically defined with the $comp object to the canvas.
This function was added in v4.1.0.

Arguments

Name	Type	Description
compObj	Object	A component object dynamically defined with the $comp object

Return Value

None

Example

// Dynamically define an Image component
const image = new $comp.Image({
    id: "image_1",
    width: 250,
    height: 250,
    x: 50,
    y: 100,
    value: "/sample/01.png",
    objectFit: "contain",
    clickEvent: "detachedAction",
    detachedAction: "show_detail"
})

// Add the defined component to the canvas
$fn.ui.add(image);

$fn.ui.remove(compObj)

Removes a component from the canvas.
This function was added in v4.1.0.

Arguments

Name	Type	Description
compObj	Object	A component object on the canvas

Return Value

None

Example

// Get image component id and value path from DB
const results = await SelectImageCompInfo();

const delArray = [];

// Extract image components from the canvas that match the DB information
results.map(item => {
    Object.keys($ui).forEach(key => {
        if(key == item.id){
            delArray.push($ui[key])
        };
    });
});

// Remove from the canvas
delArray.forEach(component => $fn.ui.remove(component));

Note

You can also delete by specifying the component ID, such as $fn.ui.remove($ui[""]) or $fn.ui.remove($ui.).

$fn.ui.removeDynamicComponents()

Removes all dynamically added components from the canvas at once.
This function was added in v4.1.0.

Arguments

None

Return Value

None

Example

$fn.ui.removeDynamicComponents();