GRID Light Module for Magnolia CMS

The GRID Light Module for Magnolia CMS provides a way to manage viewports configuration and integrate a Grid JavaScript field.

Requirements

Ensure the following modules are installed in your Magnolia CMS bundle:

Pages Viewports Extension
JavaScript UI module

Features

Viewports Configuration - decoration of the pages-viewports-extension, allows for setting the custom viewports in a page template.
Grid JS Field Include - JS field that can be used in the dialog definition.
Grid JS Field Webresources - contains resources for Grid settings based on the custom viewports.
Config for actions in dialog

Usage

Installation

Download the grid-light-module package.
Place it into your light modules directory.

Viewports Configuration

Define the custom viewports in the page template definition:

$type: viewportsExtensionSiteSpa
templateViewportList:
- id: desktop
  displayName: Desktop
  defaultViewport: true
- id: tablet
  displayName: tablet
  width: 768
  height: 667

Or define the custom viewports in the pages-viewports-extension decoration:

templateViewportsConfigurationImpl:
class: info.magnolia.pages.viewports.config.DefaultTemplateViewportsConfiguration
templateViewportList:
    id: desktop
    displayName: Desktop
    defaultViewport: true
  - id: tablet
    displayName: tablet
    width: 768
    height: 667

Settings of the default viewport will be applied for viewports using Automatic Settings.

Add default values for the components

Update the page template definition to add default values for specific viewports:

areas:
main:
  title: Main Area
  availableComponents:
    Headline:
      id: spa-lm:components/headline
    Text:
      id: spa-lm:components/text
  defaultValues:
    Headline:
      templateId: spa-lm:components/headline
      viewportDefaultValues:
        - id: desktop
          columns: 8
        - id: tablet
          columns: 12
    Text:
      templateId: spa-lm:components/text
      viewportDefaultValues:
        - id: desktop
          offset: 1
          newLine: true
          hide: true

Use Grid JS field include

Example component's dialog definition:

form:
  $type: tabbedForm
  implementationClass: info.magnolia.ui.javascript.form.FormViewWithChangeListener
  tabs:
    layout: !include:/grid/includes/grid.yaml

actions: !include:/grid/includes/dialogActions.yaml

Package detail

@magnolia/grid-light-module

readme