FPComponents

The basic components of AppStudio are currently developed based on the OmniCoreAppSDK components, specifically version 1.5.0. AppStudio is fully compatible with OmniCoreAppSDK components. Considering that users may already be familiar with the OmniCoreAppSDK usage patterns, here is a reference link to the OmniCoreAppSDK Manual.

OmniCoreAppSDK-manual

Below is an example showing how to use OmniCoreAppSDK within AppStudio: Creating a Pie Chart component

If you want to place an OmniCoreAppSDK component inside a layoutinfobox component. To do this, you need to create a new project in AppStudio and drag a layoutinfobox component into it.

Then, add the following code inside the onMounted function of the layoutinfobox component.

// Step 1: Get the container html element of the layoutinfobox component.
const myDiv = this.contentRoot;

// Step 2: Create pie chart base on FPComponents API.
var myDonut = new FPComponents.Piechart_A();
myDonut.model = [
[222,  'Used' ],
[164,  'Cache' ],
[254,  'Free' ],
];
myDonut.topText = "Memory";
myDonut.centerText = "640";
myDonut.bottomText = "kB";
myDonut.size = 150;

// Step 3: Attach the pie chart to layoutinfobox.
myDonut.attachToElement(myDiv);

Finally, deploy the application to view the result.