Dynamically add items into the page

[valorin]

For Habits I need to add and remove new form elements for each Habit that the user wants to manage. I've looked through the readme, but it doesn't sound like this is supported in Clay.

Is this something that can be considered and added to the roadmap?

[keegan-lillo]

How would you go about setting appKeys? How does the current implementation work as far as serializing the data?

[valorin]

My current implementation doesn't actually serialise any data back to the Pebble - it sends it to my server via an ajax post request, but that's not really the point. I should probably open another issue for that though - since it's a very common use case if you're working on a timeline enabled app. :-)

The way I currently handle it is by using html arrays. Consider these basic form elements:

<!-- block one -->
<input type="text" name="name[1]" value="nameValue1">
<input type="text" name="description[1]" value="descValue1">

<!-- block two -->
<input type="text" name="name[2]" value="nameValue2">
<input type="text" name="description[2]" value="descValue2">

The data would be received with an array for each of name and description:

name: ["nameValue1", "nameValue2"],
description: ["descValue1", "descValue2"]

I don't really know how this would apply to appKeys, etc... but it's definitely a valid use case for complex apps with multiple configurable "things".

[keegan-lillo]

Interesting...
Maybe if there was a component called something like "dynamic-group" that had very similar syntax to a "section" but would have an add and remove buttons as well as the ability to re-order. The config would look something like:

{
  type: 'dynamic-group',
  structure: [
    // Any combination of components
    {
      type: 'input',
      appKey: 'name',
      label: 'Name'
    },
    {
      type: 'color',
      appKey: 'fave_color',
      'Favorite Color'
    }
  ]
}

And would end up being serialized into something like:

{
  name: ['Joe', 'Fred'],
  fave_color: [0xFF0000, 0x00FF00]  
}

[valorin]

Yeah, something like that should do what I need it to do! :-)

[pautomas]

Sorry for bumping this one, but wanted to add one requests for the future dynamic-group component: the ability to define the max and min number of items in the group. ie: if my config page allows the user to define their favorite contacts to a maximum of 10 the component should look something like:

 {
  type: 'dynamic-group',
  min-items: 1, // this might be the value by default
  max-items: 10,
  structure: [
    {
      type: 'input',
      appKey: 'name',
      label: 'Name'
    },
    {
      type: 'color',
      appKey: 'fave_color',
      'Favorite Color'
    }
  ]
}

[ignat980]

Is this currently possible via a Clay Custom function, or is it impossible unless the package is updated to handle dynamic fields?

[keegan-lillo]

@ignat980 You could achieve it with a custom component, but it will not be trivial. Sorry.