How to save Repeater Set data from API?

bitzania · July 15, 2019, 8:25am

Hi There!

I’m new in Cockpit, I’d like to create a simple shopping cart, I can save simple field but having trouble to save Repeater-Set field type.
This field is simply a repeater with fields Quantity (number) and Product ( collectionlink )

{
  "fields": [
    {
      "type": "set",
      "label": "Products",
      "options": {
        "fields": [
          {
            "type": "text",
            "name": "qty",
            "label": "Qty",
            "options": {
              "type": "number"
            }
          },
          {
            "type": "collectionlink",
            "name": "product",
            "label": "Product",
            "options": {
              "link": "product",
              "display": "title",
              "multiple": false,
              "limit": false
            }
          }
        ]
      }
    }
  ]
}

I’m trying to call the API with below data:

{
	"data": {
	    ....
	    "productlist": [
	        {
	            "qty": 10,
	            "product": {
	                "_id": "5d2a1ad86336354f540000e1"
	            }
	        },
	        {
	            "qty": 20,
	            "product": {
	                "_id": "5d2a1ad86336354f540000e1"
	            }
	        }
	    ],
	    ....
	}
}

The data is saved but it seems incorrect, I can’t see it from admin page, the product display name is not displayed correctly.

Kindly advice on how to save this kind of data.

Thank you

raffaelj · July 15, 2019, 3:11pm

Repeaters are complicated… They store all field definitions for each entry, so you have to send them with your api requests, too. They are more for the ui usage.

If you want to keep the structure, create an entry with your admin ui, get the data via api and have a look at the structure. Then build a request with the same structure.

The problem is, that repeaters can have all types of fields in different orders and they need a mechanism to know the field definitions for each value.

This worked for me, but it’s ugly: /api/collections/save/reptest?token=xxtokenxx
json:

{"data":{
  "title":"test",
  "productlist": [
    {
      "field": {
        "type": "set",
        "label": "Products",
        "options": {
          "fields": [
            {
              "type": "text",
              "name": "qty",
              "label": "Qty",
              "options": {
                  "type": "number"
              }
            },
            {
              "type": "collectionlink",
              "name": "product",
              "label": "Product",
              "options": {
                "link": "pages",
                "display": "title",
                "multiple": false,
                "limit": false
              }
            }
          ]
        }
      },
      "value": {
        "qty": 5,
        "product": {
          "_id": "5cbf16e1333862118000010e",
          "link": "pages",
          "display": "page title"
        }
      }
    }
  ]
}}

I would lean back and think about a structure without repeaters, e. g. with multiple collections and collectionlinks.

Or I would built a custom field for my needs. Have a look at the simple-repeater field, that I built a while ago for inspiration: .tag file, usage

If you can’t find a smaller structure, you can build your own api endpoint in /config/bootstrap.php, that adds the field definitions automatically. If you need help with this approach, feel free to ask again.

bitzania · July 15, 2019, 4:55pm

@raffaelj Thank you for the solution!
It is working and you’re right, it’s ugly

Finally, I’m using a simpler structure, just repeater, it still has unnecessary field “VALUE” but It’s acceptable.

this is the request body example:

{
	"data": {
	    ...
	    "productlist": [
            {
                "value": {
                    "qty": 1,
                    "product": {
                        "_id": "5d2a1ad86336354f540000e1",
                        "link": "product",
                        "display": "Product1"
                    }
                }
            },
            {
                "value": {
                    "qty": 2,
                    "product": {
                        "_id": "5d2a1ad86336354f540000e1",
                        "link": "product",
                        "display": "Product1"
                    }
                }
            }
        ],
	    ...
	}
}

bitzania · July 15, 2019, 4:59pm

By the way, how to change the repeater display label for individual item?

I’m looking the code for repeater, there is Label or Display field, but where do I put it in the API request?

raffaelj · July 15, 2019, 5:31pm

{
  "fields": [
    {
      "type": "text",
      "label": "Text",
      "display": "$value"
    },
    {
      "type": "text",
      "label": "Quantity",
      "display": "$value"
    }
  ]
}

cp_repeater_display_value

edit: It only works for new items, because the existing ones don’t have the "display":"$value" setting.

bitzania · July 17, 2019, 5:19pm

Hi @raffaelj, thanks for your quick answer.

I’m trying your solution, but it still not working.

this is my field definistion for product lis ( a repeater )

{
  "field": {
    "type": "set",
    "label": "Products",
    "options": {
      "fields": [
        {
          "type": "text",
          "name": "qty",
          "label": "Qty",
          "display": "$value",
          "options": {
            "type": "number"
          }
        },
        {
          "type": "collectionlink",
          "name": "product",
          "label": "Product",
          "display": "$value",
          "options": {
            "link": "product",
            "multiple": false,
            "limit": false
          }
        }
      ]
    }
  }
}

after changing the sturcture, I add new entries from cockpit, save it and refresh, but the label still the same

any thoughts about this ??

raffaelj · July 18, 2019, 11:56am

Ah, I see. This is complicated again.

The repeater has an option to display it’s values if you define "display":"$value" for the set field.

github.com

agentejo/cockpit/blob/next/modules/Cockpit/assets/components/field-repeater.tag#L176-L177


if (display == '$value') {
    value = App.Utils.renderValue(meta.type, item.value, meta);

The set field has a templating mechanism, that doesn’t support nested keys, yet.

github.com

agentejo/cockpit/blob/next/assets/app/js/app.utils.js#L328-L338


App.Utils.renderer.set = function(v, meta) {


    if (v && meta && meta.options && meta.options.display) {


        var str = meta.options.display;
        Object.keys(v).forEach(function(k) { str = str.replace('{'+k+'}', v[k]) });
        return str;
    }


    return App.Utils.renderer.default(v);
};

So this would work:

{
  "field": {
    "type": "set",
    "label": "Products",
    "display": "$value",
    "options": {
      "display":"{qty} x {product}",
      "fields": [
        {
          "type": "text",
          "name": "qty",
          "label": "Qty",
          "options": {
            "type": "number"
          }
        },
        {
          "type": "text",
          "name": "product",
          "label": "Product"
        }
      ]
    }
  }
}

But you have a collection link field and your products title is stored in the nested key product.display. I don’t see a way to display that with the current setup, sorry.

But as always - there are multiple ways to achieve the goal.

Use a third field inside set for displaying in the admin ui and send/change the product title manually.

{
  "field": {
    "type": "set",
    "label": "Products",
    "display": "$value",
    "options": {
      "display":"{qty} x {producttitle}",
      "fields": [
        {
          "type": "text",
          "name": "qty",
          "label": "Qty",
          "options": {
            "type": "number"
          }
        },
        {
          "type": "text",
          "name": "producttitle",
          "label": "Product title"
        },
        {
          "type": "collectionlink",
          "name": "product",
          "label": "Product",
          "display": "$value",
          "options": {
            "link": "product",
            "multiple": false,
            "limit": false
          }
        }
      ]
    }
  }
}

You can set the producttitle automatically in the background with something like this in /config/bootstrap.php (not tested):

$app->on('collections.save.before.products', function($name, &$entry, $isUpdate) {
    $entry['productlist']['value']['producttitle'] = $entry['productlist']['value']['product']['display'];
});

Write a custom field for your special needs. Here is an example:

github.com

raffaelj/cockpit-scripts/blob/master/custom-fields/field-customset.tag

/**
 * This is a riot.js/Javascript file. Syntax highlighting in my text editor is a bit
 * weird, because of the mixed content, but it works. If you place this file
 * in `path/to/cockpit/config/tags`, it will be loaded automatically.
 * The name must start with "field-", so the field manager will detect it.
 * 
 * This custom field is a simple demo by Raffael Jesche. It is a 99% copy of
 * https://github.com/agentejo/cockpit/blob/next/modules/Cockpit/assets/components/field-set.tag
 */

// The default renderer in entries view has no clue about this new field.
// So you have to tell the app, how to display the values:

App.Utils.renderer['customset'] = function(v, meta) {
    
    // create a custom renderer
    // field options: {"custom":true}
    if (meta.options.custom) {
        return '<span>Yeah! ' + v.title + '</span>';
    }

This file has been truncated. show original

Write a custom renderer for the set field or for your custom field. Example:

github.com

raffaelj/cockpit-scripts/blob/master/custom-renderers/README.md

# Custom renderers

Sometimes the field content renderer in entries view doesn't show the content in the preferred way.

## Example for set field

To see the full functionality, use the next branch >= [this commit][1] (2018-11-07). Before this update, field definitions weren't passed to the renderer. For older versions, there is a fallback to display a simple items counter instead. Have a look at [the discussion on discourse][2] for some more background. Scroll down for screenshots.

If you want to write your own renderers, have a look at [app.utils.js][3] and discover the core renderers `App.Utils.renderer.{fieldname}`. You can overwrite everything, you want with a custom js file.

[1]: https://github.com/agentejo/cockpit/commit/907c1de5ba92f7bbab25635ad20d8b1d5d43a099
[2]: https://discourse.getcockpit.com/t/renderer-for-set-field-in-backend/372
[3]: https://github.com/agentejo/cockpit/blob/next/assets/app/js/app.utils.js


**bootstrap.php**

```php
if (COCKPIT_ADMIN && !COCKPIT_API_REQUEST) {

This file has been truncated. show original

bitzania · July 20, 2019, 8:23am

Wow you’re the best
I got it working with the first solution.

Thank you for your support

Topic		Replies	Views
Fieldtype set in repeater field Support	2	3164	October 24, 2018
How to display value in repeater with different field types Support	0	576	May 3, 2021
Fieldtype to get array of objects Support	1	955	September 15, 2020
Is there any field that returns me the correct data structure for a FAQ Schema? General	3	281	March 27, 2023
Descriptive repeater rows - how? Support	12	2889	June 19, 2020

How to save Repeater Set data from API?

Related Topics