The following document outlines the existing array behaviour in composers and how they could be tightly converted into the new format.
{
"composer": [
{
"type": "textRepeatable",
"value": ["Item one", "Item two", "Item three"]
}
]
}
This could simply remain as is without the need to breaking it down.
{
"composer": [
{
"type": "textRepeatable",
"value": [
{
"type": "_text",
"value": [
{
"type": "_fragment",
"value": "Item one"
}
]
},
{
"type": "_text",
"value": [
{
"type": "_fragment",
"value": "Item two"
}
]
},
{
"type": "_text",
"value": [
{
"type": "_fragment",
"value": "Item three"
}
]
}
]
}
]
}
{
"composer": [
{
"type": "numberRepeatable",
"value": [10, 11, 12]
}
]
}
{
"composer": [
{
"type": "numberRepeatable",
"value": [
{
"type": "_number",
"properties": {
"type": "integer"
},
"value": 10
},
{
"type": "_number",
"properties": {
"type": "integer"
},
"value": 11
},
{
"type": "_number",
"properties": {
"type": "integer"
},
"value": 12
}
]
}
]
}
{
"composer": [
{
"type": "numberRepeatable",
"value": [10, 11, 12]
}
]
}
{
"composer": [
{
"type": "numberRepeatable",
"value": [
{
"type": "_number",
"properties": {
"type": "decimal",
"decimalPlaces": 2
},
"value": 10.00,
},
{
"type": "_number",
"properties": {
"type": "decimal",
"decimalPlaces": 2
},
"value": 11.00
},
{
"type": "_number",
"properties": {
"type": "decimal",
"decimalPlaces": 2
},
"value": 12.00
}
]
}
]
}
{
"composer": [
{
"type": "markupRepeatable",
"value": [
"<p>This is rich <em>text</em> with some <strong>styling</strong> one</p>",
"<p>This is rich <em>text</em> with some <strong>styling</strong> two</p>",
"<p>This is rich <em>text</em> with some <strong>styling</strong> three</p>"
]
}
]
}
Markdown would follow the same approach below, but with a format property of Markdown,
{
"composer": [
{
"type": "markupRepeatable",
"value": [
{
"type": "_markup",
"properties": {
"format": "html"
},
"value": "<p>This is rich <em>text</em> with some <strong>styling</strong> one</p>"
},
{
"type": "_markup",
"properties": {
"format": "html"
},
"value": "<p>This is rich <em>text</em> with some <strong>styling</strong> two</p>"
},
{
"type": "_markup",
"properties": {
"format": "html"
},
"value": "<p>This is rich <em>text</em> with some <strong>styling</strong> three</p>"
}
]
}
]
}
Alternatively we could treat HTML and markdown as first class types.
e.g rather that _markup with a format of HTML simply have a type of _html
and _markdown
{
"composer": [
{
"type": "markupRepeatable",
"value": [
{
"type": "_html",
"value": "<p>This is rich <em>text</em> with some <strong>styling</strong> one</p>"
},
{
"type": "_html",
"value": "<p>This is rich <em>text</em> with some <strong>styling</strong> two</p>"
},
{
"type": "_html",
"value": "<p>This is rich <em>text</em> with some <strong>styling</strong> three</p>"
}
]
}
]
}
{
"composer": [
{
"type": "quoteRepeatable",
"value": [
{
"text": "It always seems impossible until its done",
"source": "Nelson Mandela"
},
{
"text": "The people who are crazy enough to think they can change the world are the ones who do",
"source": "Steve Jobs"
}
]
}
]
}
{
"composer": [
{
"type": "quoteRepeatable",
"value": [
{
"type": "_quote",
"properties": {
"source": "Nelson Mandela",
"cite": "https://www.brainyquote.com/quotes/nelson_mandela_378967"
},
"value": [
{
"type": "_fragment",
"value": "It always seems impossible until its done"
}
]
},
{
"type": "_quote",
"properties": {
"source": "Steve Jobs",
"cite": ""
},
"value": [
{
"type": "_fragment",
"value": "The people who are crazy enough to think they can change the world are the ones who do"
}
]
}
]
}
]
}
{
"composer": [
{
"type": "locationRepeatable",
"value": [
{ "lon": -3.17909, "lat": 51.481581000000013 },
{ "lon": -2.997664, "lat": 51.584151 },
{ "lon": -4.703579, "lat": 51.672738 }
]
}
]
}
{
"composer": [
{
"type": "locationRepeatable",
"value": [
{
"type": "_location",
"value": [
{
"lon": -3.17909,
"lat": 51.481581000000013
}
]
},
{
"type": "_location",
"value": [
{
"lon": -2.997664,
"lat": 51.584151
}
]
},
{
"type": "_location",
"value": [
{
"lon": -4.703579,
"lat": 51.672738
}
]
}
]
}
]
}
This format reflects the multiple list selection. But is no different than that of the text array. Needs some thinking and discussion.
{
"composer": [
{
"type": "list",
"value": ["Plum", "Orange", "Banana"]
}
]
}
This is effectively the same as a repeatable text field but it lacks definition of being a set of selected list items (no good in the canvas editor) scenario.
{
"composer": [
{
"type": "list",
"value": [
{
"type": "_string",
"value": "Plum"
},
{
"type": "_string",
"value": "Plum"
},
{
"type": "_string",
"value": "Plum"
},
]
}
]
}
{
"composer": [
{
"type": "multiImage",
"value": [
{
"asset": {
"altText": "A photo of Jon Maskrey.",
"sys": {},
"entryTitle": "jon-maskrey-blog-image",
"entryDescription": null
},
"caption": "",
"altText": "A photo of Jon Maskrey.",
"transformations": null
},
{
"asset": {
"altText": "A photo of Olivia Turner.",
"sys": {},
"entryTitle": "liv-blog-headshot",
"entryDescription": null
},
"caption": "",
"altText": "A photo of Olivia Turner.",
"transformations": null
},
{
"asset": {
"altText": "A photo of Ryan Bromley.",
"sys": {},
"entryTitle": "ryan-blog-image",
"entryDescription": null
},
"caption": "",
"altText": "A photo of Ryan Bromley.",
"transformations": null
}
]
}
]
}
{
"type": "_imageArray",
"properties": {
"layout": "gallery, carousel"
},
"value": [
{
"type": "_image",
"properties": {
"caption": "",
"altText": "A photo of Jon Maskrey.",
"transformations": null
},
"value": {
"altText": "A photo of Jon Maskrey.",
"sys": {},
"entryTitle": "jon-maskrey-blog-image",
"entryDescription": null
}
},
{
"type": "_image",
"properties": {
"caption": "",
"altText": "A photo of Ryan Bromley.",
"transformations": null
},
"value": {
"altText": "A photo of Ryan Bromley.",
"sys": {},
"entryTitle": "ryan-bromley-blog-image",
"entryDescription": null
}
},
{
"type": "_image",
"properties": {
"caption": "",
"altText": "A photo of Richard Saunders.",
"transformations": null
},
"value": {
"altText": "A photo of Richard Saunders.",
"sys": {},
"entryTitle": "richard-saunders-blog-image",
"entryDescription": null
}
}
]
}