Creating or Updating a Quilt Override Manually

A detailed explanation of the different fields in a quilt override for manual updates and creation.

To manually create a Quilt override, you need to add a xx.quilt.json (replace xx with the name of your quilt) file for the specific Quilt you want to override. You may also want to add a directory with the same name as the part of your .quilt.json file name before the .quilt.json if you want to add background images for your Quilt override.

The Quilt override JSON file completely overrides the default Quilt and does not inherit anything from it.

The main quilt fields set the identity of the quilt, and list out which Quilt Items are contained in the Quilt.

The Quilt JSON file stores the following top-level properties:

Field Name: id

Description: The ID of the Quilt. This should match the part of the file name before the .quilt.xml.

"id": "CommunityPage"

Field Name: container

Description: The main container for the Quilt.

"container": {...}

Quilt Container

The main container for the Quilt. The container has the following fields:

Field Name: id

Description: The id of the container.

"id": "Common"

Field Name: headerProps

Description: The container header props, which is a Container Section Props type.

"headerProps": {
  "backgroundImageProps": null,
  "backgroundColor": "transparent",
  "addComponents": null,
  "removeComponents": [ "community.widget.breadcrumbWidget" ],
  "componentOrder": null
}

Field Name: headerComponentProps

Description: A JSON Scalar that specifies all the component props for each of the components that are in the container header.

"headerComponentProps": {
  "community.widget.bannerWidget": {
    "nodeHeaderVariantProps": {
      "type": "lg",
      "alignment": "center",
      "contentWidth": "medium",
      "useSearch": true,
      "isSearchGlobal": true
    },
    "backgroundColor": "var(--lia-bs-primary)",
    "backgroundImageProps": {
      "assetName": "community-widget-bannerWidget.jpg",
      "lastModified": "1694717972000",
      "backgroundSize": "COVER",
      "backgroundPosition": "CENTER_CENTER",
      "backgroundRepeat": "NO_REPEAT"
    },
    "backgroundOpacity": 100,
    "fontColor": "var(--lia-bs-body-color)",
    "showNodeHeaderTitleAndDescription": "both",
    "useNodeHeaderCountStats": false,
    "visualEffects": {
      "showBottomBorder": true
    },
    "nodeHeaderPadding": {
      "paddingTop": 50,
      "paddingBottom": 50
    }
  }
}

Field Name: footerProps

Description: The Container Footer props, which is a Container Section Props type.

"footerProps": {
  "removeComponents": ["community.widget.footerWidget"]
}

Field Name: footerComponentProps

Description: A JSON Scalar that specifies all the component props for each of the components that are in the container footer.

"footerComponentProps": {
  "community.widget.footerWidget": {
    "useHomeAndTopLink": true
  }
}

Field Name: items

Description: An array of the main Quilt Sections that will render in between the header and footer for the container.

"items": {...}

Container Section Props

These are properties that apply to either the header or footer sections of the container.

Field Name: backgroundImageProps

Description: Background image properties for the Quilt container sections.

"backgroundImageProps": {
  "backgroundSize": "COVER",
  "backgroundPosition": "CENTER_CENTER",
  "backgroundRepeat": "NO_REPEAT"
}

Field Name: backgroundColor

Description: Background color for the quilt container sections.

"backgroundColor": "transparent"

Field Name: addComponents

Description: The additional components to add to the section. This will be added in order after the default ones in the wrapper. Properties of components added using this should be specified in headerComponentProps for the header and footerComponentProps for the footer to maintain a single source of truth.

"addComponents": [
  "community.widget.breadcrumbWidget",
  "community.widget.bannerWidget"
]

Field Name: removeComponents

Description: Collection of IDs of the component to remove from the quilt container. This should be limited to the ones that are included in the quilt wrapper by default.

"removeComponents": [
  "community.widget.breadcrumbWidget",
  "community.widget.bannerWidget"
]

Field Name: componentOrder

Description: The order in which the components in the section should be rendered. Ideally, this should have all the component IDs in the section including the one from the addComponents if specified. If all components are not specified, then the specified components will be ordered after the other components render in their natural order.

"componentOrder": [
  "community.widget.breadcrumbWidget",
  "community.widget.bannerWidget"
]

Quilt Sections

Each item in the Quilt items Array is a Quilt Section.

Every section type will share the following set of fields:

Common Quilt Section Fields

Field Name: id

Description: The ID of the section.

"id": "node-navigation"

Field Name: layout

Description: The layout type, which corresponds to the type of Quilt Section.

Possible values are: MAIN_SIDE, SIDE_MAIN, ONE_COLUMN, TWO_COLUMN, THREE_COLUMN

"layout": "ONE_COLUMN"

Field Name: bgColor

Description: The background color for the section.

"bgColor": "var(--lia-bs-white)"

Field Name: showTitle

Description: Whether to show the section title.

"showTitle": true

Field Name: showDescription

Description: Whether to show the section description.

"showDescription": true

Field Name: textPosition

Description: The text position to use. Possible values are LEFT, CENTER, or RIGHT.

"props": {}

Field Name: textColor

Description: The text color value.

"textColor": "var(--lia-bs-body-color)"

Field Name: sectionEditLevel

Description: Allowed Edit action for the section. Possible values are:

FULL: Allows the user to reposition, configure, and delete a section
CONFIGURE: Removes the ability to delete a section, but allows for section configuration and reposition.
LOCKED: Only allows reposition of the section.

"sectionEditLevel": "FULL"

Field Name: bgImage

Description: A Background image to use. Fields are as follows:

Field Name	Description
`assetName`	The asset name of the image.
`backgroundPosition`	The background position value of the image. Possible values are: `CENTER_CENTER`, `CENTER_TOP`, `CENTER_BOTTOM`, `LEFT_CENTER`, `LEFT_TOP`, `LEFT_BOTTOM`, `RIGHT_CENTER`, `RIGHT_TOP`, `RIGHT_BOTTOM`
`backgroundRepeat`	The background repeat value of the image. Possible values are: `NO_REPEAT`, `REPEAT`, `REPEAT_X`, `REPEAT_Y`
`backgroundSize`	The background size of the image. Possible values are: `AUTO`, `COVER`, `CONTAIN`
`lastModified`	The last update time for the background image.

{
  "assetName": "section-1679557004413.png",
  "backgroundSize": "CONTAIN",
  "backgroundPosition": "CENTER_TOP",
  "lastModified": "1679557036000",
  "backgroundRepeat": "NO_REPEAT"
}

Field Name: disableSpacing

Description: Disable spacing property. Possible values are: TOP, BOTTOM, BOTH.

"disableSpacing": "BOTH"

Field Name: edgeToEdgeDisplay

Description: Whether or not to show the edge to edge display section.

"edgeToEdgeDisplay": true

Field Name: fullHeight

Description: Whether to use the full height.

"fullHeight": true

Field Name: showBorder

Description: If the border should be shown, this will be set to the board location, which has these possible values: TOP, BOTTOM, BOTH.

"showBorder": "BOTH"

Choose files or drag and drop files

Tags:

Was this article helpful?

Yes

ATLAS
Posted
Updated

Comments

Please sign in to comment

Creating or Updating a Quilt Override Manually

Quilt Container

Container Section Props

Quilt Sections

Common Quilt Section Fields

ATLAS

Comments