How do I render different or multiple field editors in the same table column?

Questions
1

I have a Model that has several different “value” fields that I want to display in a table. The user should be able to edit one or more of these value fields based on the value of a “type” field. In most cases, only one value field needs to be edited for a given type, but in one case there are several fields used to express a “single” value. I don’t want to show all of the value fields, though, because most of them will be irrelevant/not applicable for a particular row.

For example, a row with a type of “date” should allow the user to edit the “date value” field, but not the “number value” field.

How can I achieve this in a Skuid Table?

2

Custom Field Renderers are useful in many ways. One cool but perhaps overlooked feature is the ability to render any or multiple fields, not just the field defined for the table column. Taking advantage of this, you can actually branch based on the value of one field to show one of several different fields, or even concatenate multiple fields together within a single table cell.

The example below demonstrates one way you might do this. The scenario is outline in the question… based on a “type” field, display one of several “value” fields, or multiple fields comprising a single “value”.

var $ = skuid.$,
    model = arguments[0].model,
    row = arguments[0].row,
    element = arguments[0].element, mode = arguments[0].mode;

// A shortcut function to save use some complexity below
function renderField( fieldName){
    var field = new skuid.ui.Field( row, model, null, { fieldId: fieldName, register: true } ),
        value = model.getFieldValue( row, fieldName );
    skuid.ui.fieldRenderers[field.metadata.displaytype][mode]( field, value );
    return field.element;
}

var valueType = model.getFieldValue( 'TypeField__c', row );
switch ( valueType ){
    case 'Amount':
        element.append(
            $('<span>').text(' Qty: '),
            renderField( 'Quantity__c' ),
            $('<span>').text(' Rate: '),
            renderField( 'Rate__c' ) );
        break;
    case 'Date':
        element.append( renderField( 'DateValue__c' ) );
        break;
    case 'Boolean':
        element.append( renderField( 'BooleanValue__c' ) );
        break;
    case 'Text':
        element.append( renderField( 'TextValue__c' ) );
        break;
}

You can learn more about extending Skuid Table with Custom Field Renderers by reading this tutorial:

http://help.skuidify.com/m/11720/l/204496-table-component-custom-field-renderers

You can learn more about Skuid’s standard field renderers here:

http://help.skuidify.com/m/11720/l/214147-skuid-ui-field-renderers

3

Any idea how to make this work when one of the fields is a reference  and the other a text field?