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