How do I use a Link Addition (hyperlink) in Apple News Format without using markdown?

Question

I know that it is possible to include a hyperlink in an Apple News Format article using markdown by doing the following:

{
    "version": "1.0",
    "identifier": "sketchyTech_Demo",
    "title": "My First Article",
    "language": "en",
    "layout": {},
    "components": [
        {
            "role": "title",
            "text": "My First Article",
            "textStyle": "titleStyle"
        },
        {
            "role": "body",
            "format": "markdown",
            "text": "Here's a [hyperlink](http://sketchytech.blogspot.co.uk).",
            "textStyle": "bodyStyle"
        }
    ],
    "componentTextStyles": {
        "titleStyle": {
            "textAlignment": "center",
            "fontName": "HelveticaNeue-Bold",
            "fontSize": 64,
            "lineHeight": 74,
            "textColor": "#000"
        },
        "bodyStyle": {
            "textAlignment": "left",
            "fontName": "Georgia",
            "fontSize": 18,
            "lineHeight": 26,
            "textColor": "#000"
        }
    }
}

but in Apple News Format there is also a Link Addition type, which I presume should work in a similar way to inline text styles, which are placed inside a component like this:

    {
        "role": "title",
        "text": "My First Article",
        "textStyle": "titleStyle",
        "inlineTextStyles": [{
            "rangeStart": 3,
            "rangeLength": 5,
            "textStyle": {
                "textColor": "#FF00007F"
            }
        }
    }

Apple provides sample code:

{
  "type": "link",
  "URL": "http://www.apple.com",
  "rangeStart": 0,
  "rangeLength": 20
}

But it doesn't give any instructions on where it should be placed like the other elements do. It is also rather mysterious that it has a "type" key, which is unlike other elements. Not only this but in the type description it is described as a LinkAddition in all uppercase. I have tried various combinations, the most obvious of which I would guess to be

"linkAdditions": [{
  "type": "link",
  "URL": "http://www.apple.com",
  "rangeStart": 0,
  "rangeLength": 20
}]

added to a component in the same way as inlineTextStyles (because a block of text could have multiple links, just as it can have multiple styles) but I can't get this or any variants that I've tried to work. Is it perhaps that News Preview isn't yet capable of rendering this?

score 2 · Accepted Answer · answered Mar 22 '16 at 15:39

Add it under the "additions" property instead of under "linkAdditions" inside of the component as you expected.

For example, this should work:

...

"role": "body",
"text": "Article text goes here and here",
"additions": [{
  "type": "link",
  "URL": "http://www.apple.com",
  "rangeStart": 0,
  "rangeLength": 20
}],

...

Note: if the format is markdown it will ignore the additions property.

How do I use a Link Addition (hyperlink) in Apple News Format without using markdown?

1 Answers1