Help Center

Menu

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

This image shows an example of the SquizLink type input field in the editing interface when using the "Matrix asset picker" option. It also includes a title and a description.
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

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"
                            }
                        }
                    }
                }
            }
        }
    }
}