How to Use OmniCoreAppSDK components in AppStudio

yitong

In the new AppStudio version, you can get help by referring to the API Documentation.

introduction/FPComponents.html


The basic components of AppStudio are currently developed based on the OmniCoreAppSDK components.

AppStudio is fully compatible with OmniCoreAppSDK components. 

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.