Dynamic Independent Title for Each Object in Array

Question

In the process of creating an alpaca form, I came across a situation in which I am unsure how to proceed.

Here is a representation of the schema I am using:

$("#samplediv").alpaca({
  "schema": {
    "description": "My Favorite Ice Creams",
    "type": "array",
    "items": {
        "title": "Ice Cream",
        "type": "object",
        "properties": {
            "flavor": {
                "title": "Flavor",
                "description": "Ice cream flavor",
                "type": "string"
            },
            "topping": {
                "title": "Topping",
                "description": "Ice cream topping",
                "type": "string"
            }
        }
    }
  }
});

The rendered schema looks like this:

I have an array of objects, comprised of text fields. My goal is to create a dynamic and independent title for each object in the array, based on data the object contains. In the example case, this could be replacing the 'Ice Cream' title with 'Vanilla' for the first object, and 'Chocolate' for the second object.

I've tried using the postRender callback to set the title property of each object in the array container based on current field data, though I can't seem to get the text to update.

Answer 1

You can achieve this by doing some hack, but by default the Array type of fields usually uses the same title for every item created. What you need to do is to change the title after changing the Flavor field and this will be made by using a change event in that field.

"flavor": {
      "events": {
        "change": function() {
          changeItemLabel(this.parent, this.getValue());
        }
      }
    }

This will do the trick, but all newly created items will have the same updated title! So the idea that comes in mind is to use kind of a default label and override the updated title of the newly created item.

Here's a fiddle demonstrating this case. I hope this helps you but tell me if this isn't what your looking for.