dynamically create component upon click of button

Questions
,
2

Conlan, the easiest way to do this would be to switch to defining an “Inline (Component)” JavaScript Resource named “DynamicTable”, which can be included in your (V1) page using the “Custom” Component. Within the render logic of that DynamicTable custom component, you can setup a subscription to an event, and you can then have your button Publish that event to initiate the main logic of dynamically creating a Model and dynamically creating a Table component. Here is an example of how to do this:

var element = arguments[0],
component = arguments[2],
$xml = skuid.utils.makeXMLDoc;

// Setup an event subscription that can be published from actions, e.g. when a button is clicked
component.subscribeToPageEvent(“loadDynamicTable”, function() {
// Remove any preexisting child components
component.unregisterChildComponents();
// Load dynamically-created models
skuid.model.load(allModels).then(function(){
console.log(“Models Loaded…Building Table…”);
// Dynamically create a new table component
var xmlDef = $xml(
‘’
).append(
$xml(‘’).append(
$xml(‘’),
$xml(‘’)
),
$xml(‘’),
$xml(‘’),
$xml(‘’)
);
var newTable = component.createChildComponent(xmlDef, element);
console.log(“new table created”, newTable);
});

Here is a full page example using Ui-Only Models that demonstrates how to do this:

Create dynamic table {{Model.label}} var element = arguments[0], component = arguments[2], $xml = skuid.utils.makeXMLDoc;

// Setup an event subscription that
component.subscribeToPageEvent(“loadDynamicTable”, function() {
// Remove any preexisting child components
component.unregisterChildComponents();

// Dynamically create a new table component
var xmlDef = $xml(
   '<skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="true" pagesize="50" createrecords="false" model="People" mode="read"/>'
    ).append(
        $xml('<fields/>').append(
            $xml('<field id="FirstName" allowordering="true"/>'),
            $xml('<field id="LastName" allowordering="true"/>')
        ),
        $xml('<rowactions/>'),
        $xml('<massactions/>'),
        $xml('<views><view type="standard"/></views>')
    );
var newTable = component.createChildComponent(xmlDef, element);
// console.log("new table created", newTable);

});