how to set gridlayout from js from a string of layout defined - nativescript

Question

I'm trying to set a grid layout as below in xml
layout: `<GridLayout row="0" rows="*, 2*, *">
<GridLayout width="57%" row="0" horizontalAlignment="center" verticalAlignment="center">
<Label class="lobster-regular carousel-item-head" text="Welcome to Payments App" textWrap="true"></Label>
</GridLayout>
<GridLayout class="carousel-item-circle" row="1" horizontalAlignment="center" verticalAlignment="center">
<Label class="fa carousel-item-icon" text="" textWrap="true"></Label>
</GridLayout>
<GridLayout width="49%" row="2" horizontalAlignment="center" verticalAlignment="center">
<Label class="opensans-regular carousel-item-desc" text="Let's see a quick overview of our features." textWrap="true"></Label>
</GridLayout>
</GridLayout>
`,
so i created a scroll view from js and tried to add content to it as below. but its giving stackerror.
also i found that https://play.nativescript.org/?template=play-js&id=sRSad7&v=162 here they implemented same thing. but difficult to understand.
but when i tried the similar thing i'm not able to do so, here is my project link. https://play.nativescript.org/?template=play-js&id=GbN2TT
const myScroll = new ScrollView();
myScroll.orientation = "vertical";
console.log(homeViewModel.layout);
myScroll.content = homeViewModel.layout;
please give me in detail suggestion and answer or alternative to achieve this.

Answer 1

Use UI Builder
const layout = `<GridLayout row="0" rows="*, 2*, *">
<GridLayout width="57%" row="0" horizontalAlignment="center" verticalAlignment="center">
<Label class="lobster-regular carousel-item-head" text="Welcome to Payments App" textWrap="true"></Label>
</GridLayout>
<GridLayout class="carousel-item-circle" row="1" horizontalAlignment="center" verticalAlignment="center">
<Label class="fa carousel-item-icon" text="" textWrap="true"></Label>
</GridLayout>
<GridLayout width="49%" row="2" horizontalAlignment="center" verticalAlignment="center">
<Label class="opensans-regular carousel-item-desc" text="Let's see a quick overview of our features." textWrap="true"></Label>
</GridLayout>
</GridLayout>
`;
const builder = require("tns-core-modules/ui/builder");
const gridLayout = builder.parse(layout);
myScroll.content = gridLayout;