add obj-examples (PR from TinaCMS) (#2518)

* TinaCMS content update Co-authored-by: Josh Berman <[email protected]> * TinaCMS content update Co-authored-by: Josh Berman <[email protected]> * TinaCMS content update Co-authored-by: Josh Berman <[email protected]> * TinaCMS content update Co-authored-by: Josh Berman <[email protected]> * TinaCMS content update Co-authored-by: Josh Berman <[email protected]> * TinaCMS content update Co-authored-by: Josh Berman <[email protected]> * TinaCMS content update Co-authored-by: Josh Berman <[email protected]> * TinaCMS content update Co-authored-by: Josh Berman <[email protected]> * TinaCMS content update Co-authored-by: Josh Berman <[email protected]> --------- Co-authored-by: tina-cloud-app[bot] <58178390+tina-cloud-app[bot]@users.noreply.github.com> Co-authored-by: Josh Berman <[email protected]>
tinacms · Nov 26, 2024 · 2014a12 · 2014a12
1 parent 395a03d
commit 2014a12
Showing 1 changed file with 80 additions and 4 deletions.
diff --git a/content/docs/reference/types/object.mdx b/content/docs/reference/types/object.mdx
@@ -1,6 +1,6 @@
 ---
 title: The "object" field
-last_edited: '2024-09-26T06:54:19.563Z'
+last_edited: '2024-11-26T03:31:16.548Z'
 next: content/docs/reference/types/rich-text.mdx
 previous: content/docs/reference/types/reference.mdx
 ---
@@ -46,16 +46,92 @@ Ultimately there are 3 ways to configure this type...
 * With `list` set to `false`, the `fields` array can be used to wrap some data – this appears in the editor as a nested page. This can be used to organise the CMS, such as grouping options together, as in the gif below.
 
   <WebmEmbed embedSrc="/img/docs/reference/rodmap-grid.webm" width="50%" />
-
 * With `list` set to `true`, the `fields` array contains the data structure to be repeated – this appears in the editor as above, but grouped as a list.
 
   <WebmEmbed embedSrc="/img/docs/reference/roadmap-items.webm" width="50%" />
-
 * With `list` set to `true`, and using `templates` as opposed to `fields` the user can select between associated templates – this appears as above, but pressing the `+`  gives you the option to choose between templates.
 
   <WebmEmbed embedSrc="/img/docs/reference/text-and-media-component.webm" width="50%" />
 
-## Examples
+> Scenario: We have a component on our site that needs to hold an array of other field types, so we define it as a type object. Some of the field types within this parent object are also objects themselves.
+
+```javascript
+import type { Template, TinaField } from 'tinacms';
+
+export const featuresTemplate: Template = {
+  label: 'Feature Block',
+  name: 'featureBlock',
+  fields: [
+    {
+      name: 'featureItem',
+      label: 'Feature Items',
+      type: 'object',
+      list: true,
+      ui {
+      itemProps: (item) => {
+          return { label: item?.headline };
+        },
+      },
+    fields: [
+      { name: 'headline', label: 'Headline', type: 'string' },
+      {
+        name: 'description', label: 'Description',
+        type: 'string', ui: { component: 'textarea' }
+      },
+      {
+        name: 'buttons',
+        label: 'Buttons',
+        list: true,
+        type: 'object',
+        ui: {
+          visualSelector: true,
+          itemProps: (item) => {
+            return { label: item?.label };
+          },
+        },
+        templates: [
+          actionsButtonTemplate as Template,
+          codeButtonTemplate as Template,
+          modalButtonTemplate as Template
+        ],
+      },
+      ] as TinaField[], 
+    },
+  ],
+};
+```
+
+### Code-Block Breakdown
+
+* We originally have a list of feature item objects, each of these objects store an array \[Headline, description, buttons]
+* Each feature item in the list has a dynamic label so that we can differentiate between each feature item in our editor (lines 12-14) 
+* We then have some reusable objects which are stored as a list within our buttons element of the featureBlock array
+* Because each of our unique 3 button templates also stores an array of variables themself, we use the type: object
+
+An example of what this object array would look like is
+
+```javascript
+{
+  'headline': 'Feature Item 1',
+  'description': 'All stuff Tina!',
+    'buttons': [
+      {
+        label: 'Button A',
+        href: '/docs',
+      },
+      {
+        label: 'Button B',
+        href: '/blog'
+      }
+  ],
+},
+{
+  'headline': 'Feature Item 2',
+  'description': 'This feature has no buttons'
+}
+```
+
+## More Examples
 
 Tina will generate the appropriate component depending on the configuration provided.