UI-only dynamic model and table in edit mode

MarkMark ✭✭
edited May 9, 2019 in Questions
I am creating a UI-only dynamic model and a dynamic table but am unable to get the table to go into edit mode!

The xml for the table when I create it has 'mode="edit"' attribute set for the <skootable element - I am also trying by grabbing the component object and setting its mode and list.mode to 'edit' - neither works.

The xml below is a short example to replicate the issue. The Fetch Data button calls a snippet which loads up the Contacts model. An action on the model calls the 'create model and table' snippet which grabs data from the Contacts model and creates a dynamic model and table. The Edit Mode button tries to set the dynamic table into 'edit' mode.

Does anybody have any ideas how to get the blinking table into edit mode?



<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
<models>
<model id="Contacts" limit="20" query="false" createrowifnonefound="false" datasource="salesforce" sobject="Contact">
<fields>
<field id="FirstName"/>
<field id="LastName"/>
<field id="Email"/>
<field id="Id"/>
</fields>
<conditions/>
<actions>
<action>
<actions>
<action type="custom" snippet="createDynamicModelAndTable"/>
</actions>
<events>
<event>models.loaded</event>
</events>
</action>
</actions>
</model>
</models>
<components>
<buttonset model="Contacts" uniqueid="sk-3_1P-950" position="left">
<buttons>
<button type="multi" label="Fetch Data" uniqueid="sk-3_1Q-953">
<actions>
<action type="custom" snippet="fetchData"/>
</actions>
</button>
<button type="multi" label="Edit Mode" uniqueid="sk-3_83-208">
<actions>
<action type="custom" snippet="setEditMode"/>
</actions>
</button>
</buttons>
</buttonset>
<wrapper uniqueid="tblDynamic">
<components/>
<styles>
<styleitem type="background"/>
<styleitem type="border"/>
<styleitem type="size"/>
</styles>
</wrapper>
</components>
<resources>
<labels/>
<javascript>
<jsitem location="inlinesnippet" name="fetchData" cachelocation="false">var params = arguments[0],
$ = skuid.$;


var model = skuid.model.getModel('Contacts');
if(model)
{
    //set conditions if applicable
    
    model.updateData();
}
</jsitem>
<jsitem location="inlinesnippet" name="createDynamicModelAndTable" cachelocation="false">
var params = arguments[0],
    $ = skuid.$;


var rows;
var modelSource = skuid.model.getModel('Contacts');


if (modelSource) 
{
    //mdlTarget.emptyData();
    rows = modelSource.getRows();
    if (rows) 
    {
        var newRow = null;
        var idx = 0;
        var dynamicModelFields = [];
        var strFieldsXML = '';
        var fieldId = '';
        var strTableHeader = '';
        var strModelLabel = '';
        var dynamicModelName = '';
        var dynamicElementId = '';
        var allModels = [];
        var ContactId = '';


        dynamicModelName = 'mdlDynamic';
        dynamicElementId = 'tblDynamic'; //id of wrapper


        strTableHeader = 'Contacts';
        strModelLabel = 'Contacts';


        myDynamicModel = new skuid.model.Model({dataSourceName:"Ui-Only"});
    
        myDynamicModel.processonclient="true";
        myDynamicModel.createrowifnonefound="false";
        
        myDynamicModel.labelPlural = strModelLabel;
    
        myDynamicModel.id = dynamicModelName;
    
        dynamicModelFields.push({id:"ContactId", displaytype:"TEXT", label:"Contact Id"});
        strFieldsXML = '&lt;field id="ContactId" /&gt;';


        dynamicModelFields.push({id:"FirstName", displaytype:"TEXT", label:"First Name"});
        strFieldsXML = '&lt;field id="FirstName" /&gt;';


        dynamicModelFields.push({id:"LastName", displaytype:"TEXT", label:"Last Name"});
        strFieldsXML += '&lt;field id="LastName" /&gt;';
        
        dynamicModelFields.push({id:"Email", displaytype:"TEXT", label:"Email"});
        strFieldsXML += '&lt;field id="Email" /&gt;';
        
        myDynamicModel.fields = dynamicModelFields;
        allModels.push(myDynamicModel);
        // 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();
        });


        var $xml = skuid.utils.makeXMLDoc;
        var strXML = '&lt;skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="client" searchbox="true" showexportbuttons="true" hideheader="false" hidefooter="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="' + dynamicModelName + '" mode="edit" allowcolumnreordering="false" responsive="true" uniqueid="' + dynamicElementId + '" heading="' + strTableHeader + '"&gt;';


        strXML += '&lt;fields&gt;';
        strXML += strFieldsXML;
        strXML += '&lt;/fields&gt;';
        strXML += '&lt;rowactions /&gt;';
        strXML += '&lt;massactions /&gt;';
        strXML += '&lt;views&gt;';
        strXML += '&lt;view type="standard"/&gt;';
        strXML += '&lt;/views&gt;';
        strXML += '&lt;searchfields/&gt;';
        strXML += '&lt;/skootable&gt;';


        var xmlDefinition = $xml(strXML);
        
        // Load all Models --- this will:
        // (a) populate all metadata
        // (b) run the queries on the models
        $.when(skuid.model.load(allModels)).then(function(){
            
            //get the wrapper (div) that we're using for the component
            var myDynamicElement = $('#' + dynamicElementId);
            
            var dynamicTable = skuid.component.factory({
                element: myDynamicElement,
                xmlDefinition: xmlDefinition
            });


            //put the table into edit mode - not working
            dynamicTable.mode = dynamicTable.list.mode = 'edit';
            dynamicTable.list.render({ doNotCache: true });
        });


        var obj = {};
        ContactId = '';
        
        for (idx = 0; idx &lt; rows.length; idx++) 
        {
            fieldId = 'ContactId';
            obj[fieldId] = rows[idx].Id;


            fieldId = 'FirstName';
            obj[fieldId] = rows[idx].FirstName;


            fieldId = 'LastName';
            obj[fieldId] = rows[idx].LastName;


            fieldId = 'Email';
            obj[fieldId] = rows[idx].Email;


            newRow = myDynamicModel.createRow({ doAppend: true, editModeForNewItems: true });


            if(newRow !== null) //copy our values to the newRow
            {
                myDynamicModel.updateRow(newRow, obj);
                obj = {};
            }
        }
        
        myDynamicModel.save();
    }
}


</jsitem>
<jsitem location="inlinesnippet" name="setEditMode" cachelocation="false">var params = arguments[0],
$ = skuid.$;




var componentObject = $('#tblDynamic').data('object');
console.log(componentObject);
componentObject.mode = componentObject.list.mode = 'edit';
componentObject.list.render({ doNotCache: true });


</jsitem>
</javascript>
<css/>
<actionsequences uniqueid="sk-3zwp-224"/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>



Comments

  • Luzie BaumgartLuzie Baumgart 🛠️ 
    edited May 9, 2019
    Hi Mark, I'm sorry to see that your post remained without an answer and you probably figured out a resolution in the meantime. However, we checked your page and could find out that the fields in your dynamically created UI-only model don't contain full metadata. That's why you can't address the field's editability.
    To check that, you can preview your page, open the browser console and enter the following line and hit enter:

    skuid.model.map().mdlDynamic

    Go to "fields" and open field details to see that it only contains the metadata that you set up in your JS: displaytype, id, and label.
    image


    If you would create a new UI-only model declaratively in the Skuid Page Composer, add a field, place a table on the page and check the browser console for the NewModel:

    skuid.model.map().NewModel

     You can see which metadata is usually available for UI-only fields, e.g. "editable: true":

    image

    That said, we recommend to either create a UI only model declaratively in the Skuid Page Composer and use JS to populate the field values. That way you benefit from having all metadata available.
    Or, if you need to create the UI-only model dynamically, we recommend to add the missing metadata to your JS "createDynamicModelAndTable". Then you might not even need the second button + JS, because the field's "editable" is "true" already.

    I hope this is helpful for you.

    Regards,
    Luzie & team


Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!