Detail example on Custom Field Types ?

[richardhsueh]

Can you provide a detail code example on how to declare a custom field type ?

After reading the documentation of Custom Field Types https://v5.keystonejs.com/guides/custom-field-types, I still have no clue on how to create a custom field type.

I'd appreciate if someone can help 🙏🙏🙏

[gautamsi]

you want to take a look at ./test-projects/basic/custom-fields/Stars/index.js files to know how they are created, also look at the same test project to know more how are they used.

if you are only looking at a different rendering based on existing field, @MadeByMike and I am working on spec for custom view for field, this way the Text field can be used with custom rendering, see this #2155 (spec in the PR is not final though)

[richardhsueh]

After reading the code example, it seems my intension may be wrong. I was trying to declare a data structure like this.

{
  "recipe": {
      "recipe_name": "JP Style Caremel Pudding",
      "type": "sweet",
      "ingredient": [
        {
          "ingredient_name": "large eggs",
          "amount": 3,
          "scale": null
        },
        {
          "ingredient_name": "milk",
          "amount": 300,
          "scale": "ml"
        },
        {
          "ingredient_name": "cream",
          "amount": 100,
          "scale": "ml"
        },
        {
          "ingredient_name": "sugar",
          "amount": 60,
          "scale": "g"
        },
        {
          "ingredient_name": "vanila extract",
          "amount": 1,
          "scale": "dash"
        },
        {
          "ingredient_name": "sugar",
          "amount": 70,
          "scale": "g"
        },
        {
          "ingredient_name": "water",
          "amount": 3,
          "scale": "tbsp"
        }
      ],
      "step": [
        {
          "sequence": 1,
          "instruction": "add the 70g sugar and 3 tbsp water to a small pot"
        },
        {
          "sequence": 2,
          "instruction": "use low heat to cook the sugar until it turns to caremel"
        },
        {
          "sequence": 3,
          "instruction": "devide the caremel into the ramekins"
        },
        {
          "sequence": 4,
          "instruction": "Mix milk and cream togeather"
        },
        {
          "sequence": 5,
          "instruction": "Disolve sugar and vanila extract to the milk mixture"
        },
        {
          "sequence": 6,
          "instruction": "Crack the egg and wisk in a large ramekin"
        },
        {
          "sequence": 7,
          "instruction": "Mix the milk mixture with the beaten egg"
        },
        {
          "sequence": 8,
          "instruction": "sithing the mixture 5 times to remove air bubble"
        },
        {
          "sequence": 9,
          "instruction": "divide the mixture into 4 small ramekins"
        },
        {
          "sequence": 10,
          "instruction": "cover the ramekin with tin foil"
        },
        {
          "sequence": 11,
          "instruction": "steam it for 20 mins with low heat"
        },
        {
          "sequence": 12,
          "instruction": "serve cold"
        },
        {
          "sequence": 13,
          "instruction": "Done"
        }
      ]
    }
}

And i thought for step[] and ingredient[] , I need to create a custom field types for each of them in order to have an UI . Am i correct ?

[gautamsi]

you want to create separate list for steps and ingredients then use relationship fields to map them to recipe.

there is no array type field supported.

[richardhsueh]

It's all clear now 😯, thanks a lot.