ColumnSet

ColumnSet divides a region into Columns, allowing elements to sit side-by-side.

Interface

interface IColumnSet extends IElement {
  columns: IColumn[];
  horizontalAlignment?: HorizontalAlignment;
}

Example

ColumnSet
{
  "type": "ColumnSet",
  "style": {
    "marginTop": "10px"
  },
  "columns": [
    {
      "type": "Column",
      "horizontalAlignment": "center",
      "style": {
        "width": "30px"
      },
      "items": [
        {
          "type": "Image",
          "url": "{base.author.picture}",
          "person": true,
          "size": 2,
          "style": {
            "width": "40px",
            "marginLeft": "15px"
          },
          "livePersonaCard": {
            "displayName": "{base.author.name}",
            "email": "{base.author.email}",
            "loginName": "{base.author.loginName}"
          }
        }
      ]
    },
    {
      "type": "Column",
      "items": [
        {
          "type": "TextBlock",
          "size": "small",
          "text": "{base.author.name}",
          "onClick": {
            "type": "OpenUrl",
            "url": "@eval({base.author.pageDetailUrl}+'&'+{base.author.name})"
          },
          "style": {
            "color": "#999999"
          }
        },
        {
          "type": "Date",
          "date": "@eval({base.publishingDate} || {base.modifiedDate})",
          "size": "small",
          "fromNow": true,
          "style": {
            "marginTop": "-5px",
            "color": "#999999"
          }
        }
      ]
    }
  ]
}

Properties

type

Must be “ColumnSet”

  • Type: "ColumnSet"

  • Required: Yes

columns

The array of columns to divide the region into.

horizontalAlignment

Represents the horizontal alignment for the container