Dynamically create widgets based on records in a datasource

(Apologies in advance for the poorly worded question.)

Not sure if this is even possible - Have not been able to find any documentation regarding this...

I have a datasource whose records contain fields of information on certificates.
For each record in the data source I want to create a label widget on a specified panel. (The panel has been already been created on an app maker page.)

Going to put some pseudo code below to show what I am hoping to achieve:

var length = app.datasources.Certificates.items.length;
var records = app.datasources.Certificates.items;

for (var i =0; i <length; i++){
app.pages.A_Edit_Certificate_Requirements.descendants.Panel1.createNewWidget(label,text = records[i].Certificate_Name) 
}

.newWidget(type of widget, property of widget to configure) is the pseudo portion.

Anyone know if something like this is even possible? Reason I am looking to do it via this method is to keep the page as dynamic as possible.

Solution

If you do want to proceed with creating the labels dynamically yourself here would be some sample code to get the same accomplished. In order for this to work your panel datasource would need to be set to 'Certificates' and the code would need to be attached to the panel's onDataLoad event:

widget.datasource.items.forEach(function(item) {
  var node = document.createElement('div');
  node.className = 'app-Label';
  node.style.margin = '8px';
  node.textContent = item.Certificate_Name;
  widget.getElement().appendChild(node);
});