I’ve been working off this tutorial here: https://docs.skuid.com/latest/en/skuid/javascript/dynamic-model-component-creation.html#dynamic-creation-of-models
However, the table that gets built in this tutorial is built upon page load…using a Custom Inline Component JS resource.
For my purpose, I would like to build a table dynamically upon click of a button.
My use case is → user loads page that displays a table from a declaratively built model, then selects rows in that table, clicks a button, which runs an inline snippet to dynamically build another model based on the rows selected by the user and dynamically builds another table.
I don’t seem to be able to wrap the sample code in a callable function when it is located within an Inline Component JS Resource…
So I moved the code to an Inline Resource where I am able to wrap it in a function and then call that function from an Inline Snippet (run on button click).
But that’s where I get a bit lost…
…since I’m not using an Inline Component JS Resource, I think I need to call skuid.componentType.register to register my component, and then reference that component when I call skuid.Component.factory…
$.when(skuid.model.load(allModels)).then(function(){My table isn’t displaying on page preview however…any guidance from the community would be much appreciated!
console.log(‘Model Loaded...Building Table...’);
$xml = skuid.utils.makeXMLDoc; var xmlDefinition = $xml( ‘’ ).append( $xml(‘’).append( $xml(‘’), $xml(‘’), $xml(‘’), $xml(‘’) ), $xml(‘’), $xml(‘’), $xml(‘’) ); //Register my dynamic Table Component var myDynamicTable = skuid.componentType.register(‘DynamicTable’,function(element,xmlDefinition,component){}); element.html(‘Loading Table...’); element.empty(); skuid.component.factory({ element: myDynamicTable, xmlDefinition: xmlDefinition }); console.log(“Table Built”); }); };