The SquizLink input type

The Squiz Component Service introduces the SquizLink type for JSON schema which provides a consistent link data object structure for the component output function, handy for creating links to other resources. Within the editing interface, the SquizLink type is presented as either a resource browser which allows users to select assets from Squiz DXP sources, or fields to directly enter link information.

Schema definition

To define a property as a SquizLink in JSON Schema, you use the "type" keyword with the value "SquizLink".

"input": {
    "type": "object",
    "properties": {
        "SquizLinkField": {
          "title": "Example image",
          "type": "SquizLink",
          "description": "The image to show"
        }
      },
    "required": []
},

This example also demonstrates how to provide a description and title to the SquizLink field for use within the editing interface.

Editing interface

Figure 1. The SquizLink input types editing interface field when using the "Matrix asset picker" option

This image shows an example of the SquizLink type input field in the editing interface when using the "User specified" option. It also includes a title and a description.

Figure 2. The SquizLink input types editing interface field when using the "User specified" option

The Target values

A SquizLink can be given one of four Target values. These values set how the link behaves when it is activated (clicked or pressed).

Open new window

When this option is selected, the Link is set to open and display its contents in a new browser window when clicked.

Setting a Target to this value is equivalent to setting an anchor tag with the target=_blank attribute value.

By default, most browsers open new browser windows as new browser tabs.

Open the link in the parent frame

When this option is selected, the Link is set to open and display its contents in the iframe or browser window which is the immediate ancestor of (that is, directly contains the) Link.

Setting a Target to this value is equivalent to setting an anchor tag with the target=_parent attribute value.

If there is no parent browsing context, the Link will behave as if the selected option is Open the link in the same frame as it was clicked.

This is further equivalence to the target=_parent anchor tag attribute. If there is no parent context, this attribute behaves as if the anchor tag was set with a target=_self attribute value.

Open the link in the same frame as it was clicked (this is default): When this option is selected, the Link is set to open and display its contents in the same browsing context as the Link itself presented in.

Setting a Target to this value makes the link open and display in the default fashion of web browsers and is equivalent to setting an anchor tag with the target=_self attribute value.
Open the linked document in the full body of the window: When this option is selected, the Link is set to open and display its contents in the topmost browsing context which is an ancestor of the context containing the Link.

Setting a Target to this value is equivalent to setting an anchor tag with the target=_top attribute value.

If there is no ancestor browsing context, the Link will behave as if the selected option is Open the link in the same frame as it was clicked.

This is further equivalence to the target=_top anchor tag attribute. If there is no ancestor context, this attribute behaves as if the anchor tag was set with a target=_self attribute value.

Input object structure

The SquizLink input type is available to consume in the main function through the input object. The SquizLink field is an object of link related data.

const input = {
  SquizLinkField: {
        text: "My Link",
        url: "https://some.link/foo",
        target: "_blank"
    }
};

module.exports = async function (input) {
  return `
      <div class="mySquizLinkWrapper">
        <a href="${SquizLinkField.url}" target="${SquizLinkField.target}">${SquizLinkField.text}</a>
      </div>`;
};

Full manifest definition

Expand to see the manifest.json file with a string input field

{
  "$schema": "http://localhost:3000/schemas/v1.json",
  "name": "mySquizLink",
  "version": "1.0.0",
  "mainFunction": "main",
  "displayName": "SquizLink example",
  "namespace": "squiz-link-component",
  "icon": {
  "id": "list_alt",
  "color": {
    "type": "hex",
    "value": "#2D2D2D"
    }
  },
  "description": "This component is set up as a demonstration component for documentation purposes.",
  "functions": [
    {
      "name": "main",
      "entry": "main.cjs",
      "input": {
        "type": "object",
        "properties": {
          "SquizLinkExample": {
            "type": "SquizLink",
            "title": "My Link",
          }
        },
        "required": []
      },
      "output": { "responseType": "html" }
    }
  ],
  "previews": {
        "firstPreview": {
            "functionData": {
                "main": {
                    "inputData": {
                        "type": "inline",
                        "value": {
                            "SquizLinkExample": {
                                "text": "My Link",
                                "url": "https://some.link/foo"
                            }
                        }
                    }
                }
            }
        }
    }
}

Help Center

Menu