Form Constants or Hidden Fields.

[kyse]

I have a schema that includes a few array properties that I need to include a property on the array's contents objects. The property differs depending on which object in the array it is.

For example:

Schema:

{
  type: 'object',
  title: 'MyObj',
  properties: {
    PointOfContact: {
      type: 'array',
      items: {
        type: 'object',
        properties: {
          isPrimary: {
            type: 'boolean',
          },
          Name: {
            type: 'string'
          }
        }
      }
    }
  }
}

So for my form, I need to display primary POC and alt POC fields.

Form:

[
  {
    key: 'PointOfContact[0].Name'
  },
  {
    key: 'PointOfContact[0].isPrimary'
  },
  {
    key: 'PointOfContact[1].Name'
  },
  {
    key: 'PointOfContact[1].isPrimary'
  }
]

I need my model's PointOfContact[0].isPrimary to = true, and false otherwise. I'd rather not have this field displayed because it doesn't make sense to do so. I have similar cases where objects in the array need to be displayed as fields in the form, but for the model, I need to include a specific foreign key value for that field's target object.

My understanding is, the point of schema forms is to reduce the need for doing things manually, so the lack of an ability to apply a value to the modal without rendering it on the form, or supplying a hidden input type even is boggling.

I guess I could create a new form type 'hidden' to supply the additional values I need to my model?

So my question to the community: Am I approaching this wrong? What am I missing here?

[Anthropic]

Where does is primary get set? Is there a reason you can't set the ID for which item is primary outside the object and reference it within the array items?

[kyse]

So, for that example, isPrimary would get set in my form definition since I'm manually defining the fields for that array object at index 0 to be the primary POC. Since this scenario would be useful for more than just a on or off bit, but specifying foreign keys like a typeid of a lookupvalue table, a hidden field where I can pass in the value would be nice to have.

This way I could setup an engine to parse template's based on some kind of roles/permissions to include in the form and build out the form template based on the schema/odata metadata automatically.

Yes, I could just go into the model and apply the properties manually from the controller's onSubmit method, but that seems counter to the whole point of schema forms. Also, splits the schema/form logic into a third place.

[Anthropic]

@kyse I think I see your issue, there is a PR related to acting upon array using arrayIndeces, but in extension to that there should be an easier way to set a field default in the form that is calculated. Even using a calculation combined with a destroyStrategy doesn't appear to work as I expected for your purposes. I'll look into it.

[kyse]

Yea, this is where I am at so far.

Schema:

                {
                    type: 'object',
                    title: 'Requestor',
                    properties: {
                        People: {
                            type: 'array',
                            default: [],
                            items: {
                                type: 'object',
                                properties: {
                                    FirstName: {
                                        title: 'First Name',
                                        type: 'string',
                                    },
                                    LastName: {
                                        title: 'Last Name',
                                        type: 'string',
                                    },
                                    Title: {
                                        title: 'Title',
                                        type: 'string',
                                    },
                                    PhoneNumber: {
                                        title: 'Phone Number',
                                        type: 'string',
                                    },
                                    Email: {
                                        title: 'E-Mail Address',
                                        type: 'string',
                                        pattern: '^.+@.+[.].+$',
                                    },
                                    isPrimary: {
                                        type: 'boolean',
                                    },
                                }
                            }
                        },
                        AdditionalInfoes: {
                            type: 'array',
                            default: [],
                            items: {
                                type: 'object',
                                properties: {
                                    Information: {
                                        title: 'Info',
                                        type: 'string',
                                    },
                                    TypeID: {
                                        type: 'number',
                                    }
                                },
                            }
                        },
                    },
                };

Form Def (I'm using extension methods on an array to build out the array, method(key, class, additionalParamsToMerge). You'll notice a pattern that can be turned into a build engine.):

                // Create the tabs
                var tabRequestor = tabs.tab('Requestor');

                var pocPrimary = tabRequestor.fieldset('Primary POC', 'col-xs-6');
                pocPrimary.hidden('People[0].isPrimary', true); // key, value
                pocPrimary.text('People[0].FirstName', null, { title: 'First Name'}); // key, htmlClass, otherOptionsObject
                pocPrimary.text('People[0].LastName', null, { title: 'Last Name' });
                pocPrimary.text('People[0].Title', null, { title: 'Title' });
                pocPrimary.text('People[0].Email', null, { title: 'E-Mail Address' });
                pocPrimary.text('AdditionalInfoes[0].Information', null, { title: 'Other Email 1' });
                pocPrimary.hidden('AdditionalInfoes[0].TypeID', 13, null, { condition: '!!model.AdditionalInfoes[0].Information' });
                pocPrimary.text('AdditionalInfoes[1].Information', null, { title: 'Other Email 2' });
                pocPrimary.hidden('AdditionalInfoes[1].TypeID', 15, null, { condition: '!!model.AdditionalInfoes[1].Information' });
                pocPrimary.text('People[0].PhoneNumber', null, { title: 'Phone Number' });
                pocPrimary.text('AdditionalInfoes[2].Information', null, { title: 'Other Phone Number 1' });
                pocPrimary.hidden('AdditionalInfoes[2].TypeID', 3, null, { condition: '!!model.AdditionalInfoes[2].Information' });
                pocPrimary.text('AdditionalInfoes[3].Information', null, { title: 'Other Phone Number 2' });
                pocPrimary.hidden('AdditionalInfoes[3].TypeID', 5, null, { condition: '!!model.AdditionalInfoes[3].Information' });
                pocPrimary.text('AdditionalInfoes[4].Information', null, { title: 'Fax Number' });
                pocPrimary.hidden('AdditionalInfoes[4].TypeID', 7, null, { condition: '!!model.AdditionalInfoes[4].Information' });
                pocPrimary.text('AdditionalInfoes[5].Information', null, { title: 'Other Fax Number 1' });
                pocPrimary.hidden('AdditionalInfoes[5].TypeID', 9, null, { condition: '!!model.AdditionalInfoes[5].Information' });
                pocPrimary.text('AdditionalInfoes[6].Information', null, { title: 'Other Fax Number 2' });
                pocPrimary.hidden('AdditionalInfoes[6].TypeID', 11, null, { condition: '!!model.AdditionalInfoes[6].Information' });

                var pocAlt = tabRequestor.fieldset('Alternate POC', 'col-xs-6');
                pocAlt.hidden('People[1].isPrimary', false);
                pocAlt.text('People[1].FirstName', null, { title: 'First Name' });
                pocAlt.text('People[1].LastName', null, { title: 'Last Name' });
                pocAlt.text('People[1].Title', null, { title: 'Title' });
                pocAlt.text('People[1].Email', null, { title: 'E-Mail Address' });
                pocAlt.text('AdditionalInfoes[7].Information', null, { title: 'Other Email 1' });
                pocAlt.hidden('AdditionalInfoes[7].TypeID', 14, null, { condition: '!!model.AdditionalInfoes[7].Information' });
                pocAlt.text('AdditionalInfoes[8].Information', null, { title: 'Other Email 2' });
                pocAlt.hidden('AdditionalInfoes[8].TypeID', 16, null, { condition: '!!model.AdditionalInfoes[8].Information' });
                pocAlt.text('People[1].PhoneNumber', null, { title: 'Phone Number' });
                pocAlt.text('AdditionalInfoes[9].Information', null, { title: 'Other Phone Number 1 });
                pocAlt.hidden('AdditionalInfoes[9].TypeID', 4, null, { condition: '!!model.AdditionalInfoes[9].Information' });
                pocAlt.text('AdditionalInfoes[10].Information', null, { title: 'Other Phone Number 2' });
                pocAlt.hidden('AdditionalInfoes[10].TypeID', 6, null, { condition: '!!model.AdditionalInfoes[10].Information' });
                pocAlt.text('AdditionalInfoes[11].Information', null, { title: 'Fax Number' });
                pocAlt.hidden('AdditionalInfoes[11].TypeID', 8, null, { condition: '!!model.AdditionalInfoes[11].Information' });
                pocAlt.text('AdditionalInfoes[12].Information', null, { title: 'Other Fax Number 1' });
                pocAlt.hidden('AdditionalInfoes[12].TypeID', 10, null, { condition: '!!model.AdditionalInfoes[12].Information' });
                pocAlt.text('AdditionalInfoes[13].Information', null, { title: 'Other Fax Number 2' });
                pocAlt.hidden('AdditionalInfoes[13].TypeID', 12, null, { condition: '!!model.AdditionalInfoes[13].Information' });

Template "hidden.html":

    $templateCache.put("decorators/bootstrap/hidden.html", "<div class=\"form-group schema-form-{{form.type}} {{form.htmlClass}}\"><input type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" class=\"form-control {{form.fieldHtmlClass}}\" id=\"{{form.key.slice(-1)[0]}}\" schema-validate=\"form\" sf-field-model=\"replaceAll\" ng-model=\"$$value$$\" name=\"{{form.key.slice(-1)[0]}}\" aria-describedby=\"{{form.key.slice(-1)[0] + \'Status\'}}\" value=\"form.value\" ng-init=\"$$value$$=form.value\"></div>");

   function configSchemaForm(schemaFormProvider, schemaFormDecoratorsProvider, sfBuilderProvider, sfPathProvider) {
        var base = 'decorators/bootstrap/';

        var simpleTransclusion = sfBuilderProvider.builders.simpleTransclusion;
        var ngModelOptions = sfBuilderProvider.builders.ngModelOptions;
        var ngModel = sfBuilderProvider.builders.ngModel;
        var sfField = sfBuilderProvider.builders.sfField;
        var condition = sfBuilderProvider.builders.condition;
        var array = sfBuilderProvider.builders.array;

        var defaults = [sfField, ngModel, ngModelOptions, condition];

        schemaFormDecoratorsProvider.defineAddOn('bootstrapDecorator', 'hidden', base + 'hidden.html', defaults);
    }

The end result of this in my model object is:
People property is an object instead of an array (why?) containing 0 and 1, with isPriority set to true and false properly. Other fields applied properly.

AdditionalInfoes property is an array as expected. TypeID is applied only to proper object in array when and only when Information field is populated. Array length is size of last element populated (ie if I only fill in field Other Phone Number 1 for primary POC I get an array size 3, but only array[2] is in the array, indexes 0 and 1 are missing. Also, when typing into a text type field then clearing it out, it remains on my model as an empty string. I guess there are use cases for this? Would be nice to add an form level default option for this to remove the property and in this case since its contained in an array object, the object itself from the array if it its empty after removing the field property, rather than setting the property to "". I looked at destroySolution for this but I think it's only related to the specific array form type builder and removing the object from the array via the remove button. Not properties themselves.

Hopefully this wont be an issue on post, but I guess I could just do a Array.prototype.slice on it to reset the array indexes before post.

Then again, this really isn't a solution since the values wont bind to the proper fields if I set model = the object from the OData api response. I need to expand this to conditionally apply additionalinfoe's information property title based on the typeid somehow for an existing model. If I just use AdditionalInfoes[].Information, all those fields get the same result since the controller isn't considering it an array. Perhaps I need to create a text template using the array builder?

I was looking at destroyStrategy originally for removing the typeID's before I started messing with conditions and noticed they seem to only apply when removing an entity from an array, but in this case, again, not using the array builder with this setup, just hacking the fields into an array model key, which sometimes just ends up being an object instead of an array.

After typing all this and thinking through my thoughts I'm wondering if its just better to leave the logic of building the final post object and parsing an existing entity into a form model schema forms can bind to more appropriate as far as time constraints goes. It just seems, if the API is smart enough to take the post object and apply updates internally to the proper tables, that moves the onus of supporting such complex forms that span multiple tables to schema forms to support. And by that I in no way mean to degrade schema forms and what you guys have created so far. It's amazing work and I applaud it. Just thinking improvement wise. Maybe if you agree I'm going in the right direction to resolve my scenario I can spend some personal time creating a pull requests to resolve. Just don't want to waste time on a direction thats not in your vision for your library.

Cheers!

[Anthropic]

@kyse could you make a plunker possibly? That's a lot to follow outside my work hours, a plunker would help my visualise what you're trying to do better.

[kyse]

Sure, does this link work for you? https://plnkr.co/NsEzQGz5DoRdD018RTWn

[kyse]

Just an additional note. If I use condition: 'model.People[0]' or 'model.People[1]' on the two hidden IsPrimary people fields I get People as an array in the model, but my desired result is to always have an array of 2 People entities in the array with that IsPrimary field populated. So even though that could be a solution, it defeats the purpose of using the hidden input field as a way to apply constants in this scenario.

[kyse]

Updated the plunker to resolve the array being initialized as an object issue. Using default containing the default values I want (non conditional) resolves that problem. Just need to figure out how to bind the AdditionalInfo fields to the array without hard coding the index. As I can't be sure the array being returned from the API will be in the proper order, since they aren't required to include all fields, the current setup wont work. Maybe I need to write some custom binding logic for arrays into the text directive? Need to be able to find a field's key in array format to the array where a contained entity contains a specific key, or keys to take care of binding from the model to the field. And handle properly adding a new entity to the array without adding a bunch of nulls (an effect of me currently manually binding to an array index for each field).

Also, still trying to figure out how to manipulate ngModel to delete the entity rather than leaving an empty string when the field is cleared. Actually deleted not cleared. I noticed when hitting the x (in IE) in the checkbox to clear the checkbox it doesn't trigger the onChanged event, and the model retains the uncleared value.

[Anthropic]

@kyse there is work needed to fix how arrays are behaving, probably our biggest pain point is that the library does use ngModel, would probably have been better to avoid it given how many quirks it has. But too late now. I really want to help you more, please don't take my slow responses the wrong way! But I spent almost an hour looking at your problem before realising I really need to focus on updating the library and starting to fix some of the underlying issues that are responsible.

I can see your issues and once the lib core is updated we can start tackling them, but for now I would really suggest using a struct poc:{primary:{},secondary:{}} as the easiest way to overcome the issue. An onsubmit could loop the keys into the array structure you desire.

The delete issue can partially be overcome with destroy strategy but can only do what ngModel will let it, I think there are already issues raised about that.

[Anthropic]

Oh and nice plunker, helped a lot to visualise what you are trying to achieve, thank you, when I get around to fixing the underlying issues it will really help! :)

[kyse]

Thanks for your time on this. I've just about come to the same conclusion. Thinking about one last avenue before I give up. What about being able to provide a getter/setter function to ngModel that allows control over assigning a field to a new entity in an array based on a condition. So if setting, it would find the entity (or create an index lookup store) and update, or push a new entity to the target array. If getting, it would use the index hash lookup table to retrieve the proper array index.

So to summarize:

1. Global form ngModelOptions, set getterSetter to true.
2. Append the model or array with the appropriate getter/setter functions needed for the fields in the array.
3. Come up with some form field definition option for passing conditional binding requirements inside the getter/setter function.

Might end up being too much trouble, and the hack in the submit method might be the easiest. :/

In case anyone else is following this or has the need: https://plnkr.co/dHCN9GWKj1X4pLrTYPXZ