Custom UI component woes


I’m trying to create a custom UI component that will take the keys from and associative array and populate a grid. This has taken a huge amount of trial-and-error, as I really can’t find much documentation on this topic (other than an appendix in the first version of The NativeScript Book - it was somehow removed from the second version.)

So, what I want is something like,

<gridTable: gridTable keys="{{ data }}" />

Where data is something like:

data = {
 “Fri”: “Friday”, 
“Sat”: “Saturday”,
“Sun”: Sunday}

And end up with a GridLayout like:

Fri Sat Sun

Here’s my assumptions so far:

  1. I have to use the onLoaded event of the parent container to populate the GridLayout, because the bindingContext isn’t available at constructor time

  2. I can add my onLoaded handler via this.onLoaded = exports.onLoaded in my constructor

But, when doing so, I receive the error, “Error: super.Loaded not called… ”

So, what to do? I can’t find any documentation on that particular error. Any help or pointers would be most welcome. Oh, this is a JavaScript project (i.e., no TypeScript, Angular, or Vue).


Are you calling super.Loaded?
Would you mind to share some code?


@manojdcoder - yeah, that’s kind of an obvious one :slight_smile:

When I add a call to super.Loaded I get: System.err: > 'super' keyword unexpected here

I’ll clean up my code and prepare a playground.

Thanks, as always…


Here’s the playground I created:

I’m still just guessing that this is the right approach to use the data bound values to populate the GridLayout. I realize that I could do all this in the page’s Loaded event, but the whole point here is to do this within the custom component code.


Here you go

In the original code, You didn’t have reference for _super (the parent chain), super is ES6 special operator. I guess you confused them both.


@manojdcoder - your awesomeness continues to impress me. Thanks so much!

Yes, I wasn’t sure how to access _super from the onLoaded function, but you solved that by including the function where _super is defined. Makes perfect sense, and works perfectly, too.