A Skuid Page with JavaScript code for creating Models and Components dynamically from JavaScript

DynamicModelsAndComponents.xml

<skuidpage showsidebar="true" showheader="true">
   <models>
        <model id="DummyUserModel" datasource="salesforce" sobject="User" limit="1" query="false"/>
   </models>
   <components>
      <custom name="DynamicTableAndModel"/>
   </components>
   <resources>
      <labels/>
      <javascript>
         <jsitem location="inlinecomponent" name="DynamicTableAndModel" cachelocation="false" url="">var element = arguments[0],
   $ = skuid.$,
   $xml = skuid.utils.makeXMLDoc;

// Add some content to our area while we are loading it in
element.html('Loading...');

// Define our Model(s)
var allModels = [];
var OppModel = new skuid.model.Model({
   dataSourceName: "salesforce",
   objectName: "Opportunity",
   id: "OpportunityData",
   recordsLimit: 20,
   fields: [
      { id: 'Name' },
      { id: 'AccountId' },
      { id: 'Account.Name' },
      { id: 'StageName' },
      { id: 'Amount' },
      { id: 'CloseDate' },
      { id: 'OwnerId' },
      { id: 'Owner.Name' },
   ],
   conditions: [
      { 
         type: 'fieldvalue', 
         field: 'StageName', 
         operator: '=', 
         value: '', 
         state: 'filterableoff', 
         inactive: true,
         name: 'StageName',
         encloseValueInQuotes: true
      },
   ],
});
allModels.push(OppModel);

// Initialize each of our Models
// so that they have index maps created
// and other internal guts,
// then register them with Skuid
// so that Skuid officially knows about them
$.each(allModels,function(){
   // Register each of our Models with Skuid
    this.initialize().register();
});


// Define the XML for the component we want to show in our element,
// which we'll instantiate once our Models are loaded
var xmlDefinition = $xml(
    '&lt;skootable showconditions="true" showsavecancel="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="OpportunityData" mode="read"/&gt;'    
).append(
    $xml('&lt;fields/&gt;').append(
        $xml('&lt;field id="Name" allowordering="true"/&gt;'),
        $xml('&lt;field id="AccountId"/&gt;'),
        $xml('&lt;field id="StageName"/&gt;'),
        $xml('&lt;field id="Amount"/&gt;'),
        $xml('&lt;field id="CloseDate"/&gt;'),
        $xml('&lt;field id="OwnerId"/&gt;')
    ),
    $xml('&lt;rowactions/&gt;').append(
        $xml('&lt;action type="edit"/&gt;'),
        $xml('&lt;action type="delete"/&gt;')   
    ),
    $xml('&lt;massactions usefirstitemasdefault="true"/&gt;').append(
        $xml('&lt;action type="massupdate"/&gt;'),
        $xml('&lt;action type="massdelete"/&gt;')    
    ),
    $xml('&lt;views&gt;&lt;view type="standard"/&gt;&lt;/views&gt;'),
    $xml('&lt;filters/&gt;').append(
        $xml('&lt;filter type="select" filteroffoptionlabel="Any Stage" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" condition="StageName"/&gt;')
            .append(
               $xml('&lt;sources&gt;&lt;source type="metadata" effectsbehavior="justdefault"/&gt;&lt;/sources&gt;') 
            )
    )
);

// Load all Models --- this will:
// (a) populate all metadata
// (b) run the queries on the models

// Once the loading is finished, 
// we'll build our components from XML
$.when(skuid.model.load(allModels)).then(function(){
    element.empty();
    skuid.component.factory({
       element: element,
       xmlDefinition: xmlDefinition
    });    
});

</jsitem>
      </javascript>
      <css/>
   </resources>
</skuidpage>

@hasanthaera @sankaran1984 I have revised the Gist to work with the Brooklyn release.

Thanks @zachelrath this works now

Hi @zachelrath,

I'm trying to add a custom filter to the table, but it doesn't show me the filter list. It just shows a button instead.
My CompetitionTeam__u field is a UI field which I'm trying to populate the values from another model.
Heres the snippet;

`var element = arguments[0],
$ = skuid.$,
$xml = skuid.utils.makeXMLDoc;
// Add some content to our area while we are loading it in
element.html('Loading...');
var originalSource = skuid.$M('PlayerStatistics');
var Statisticsdefinition = skuid.$M('Statisticsdefinition');
// Define our Model(s)
var allModels = [];

$.each(allModels, function() {
// Register each of our Models with Skuid
this.initialize().register();
});

// Define the XML for the component we want to show in our element,
// which we'll instantiate once our Models are loaded

//generate the table column headers dynamically, this is the main reason we used a custom table component
var statFields = [];
var statFieldsForModel = [];

// adding default fields
statFields.push('NAME') ;
statFieldsForModel.push({id: 'NAME', label: 'NAME', accessible: true, displaytype: "TEXT", filterable: true});
statFieldsForModel.push({id: 'CompetitionTeam__u', label: 'Competition Team', accessible: true, displaytype: "PICKLIST", filterable: true, snippet : "CompetitionTeamPicklIstRenderer"});

//dunamically adding the fields
$.each(Statisticsdefinition.data, function(i,row){
statFields.push(row.code) ;
statFieldsForModel.push({id: row.code, label: row.code, accessible: true, displaytype: "TEXT", filterable: false});
});

originalSource.fields = statFieldsForModel;

allModels.push(Statisticsdefinition);
allModels.push(originalSource);

var xmlDefinition = $xml(
''
).append(
$xml('').append(
skuid.$.map(statFields,function(statField){
return $xml('').attr('id',statField);
})
),
$xml('').append(
$xml(''),
$xml('')
),
$xml('').append(
$xml(''),
$xml('')
),
$xml('')
,
$xml('').append(
$xml('')
)

);

console.log(xmlDefinition);

// Load all Models --- this will:
// (a) populate all metadata
// (b) run the queries on the models

// Once the loading is finished,
// we'll build our components from XML
$.when(skuid.model.load(allModels)).then(function() {
element.empty();
skuid.component.factory({
element: element,
xmlDefinition: xmlDefinition
});
});`