Visual previews of fields in the documentation

Field examples in the light-modules folder

It contains working field definitions to use out of the box. Follow the instructions below to use them in your local Magnolia installation.

  1. Copy the dialog-fields-examples folder into your light-modules folder.

  2. Go to the Pages app and add a test page using the Field examples template.

  3. Edit the new page and add a new component. This opens a dialog showing all the component types available.

    Add component dialog
  4. After selecting a component type and clicking Next, the respective dialog fields are shown (for example, see the switchable, slider, and picker fields below). You can change the values, save them, and then edit them again later.

    Switchable, slider, and picker fields

Station app example in the light-modules folder

You can find examples of jsonMultiField and jsonCompositeField in an announcement board app called Stations. You can’t copy either field example from the documentation pages and use them as-is directly into a field dialog definition. The itemProvider needed for each field has specific requirements outlined in Provider types. For example, jsonMultiField is only suitable for sub-forms because it relies on a parent.

The Stations app should be installed on your local installation if you copy across the dialog-fields-examples folder because it contains a decoration for the admincentral module. The app uses jsonMultiField and jsonCompositeField to retrieve items from a REST JSON datasource (transportation.yaml) and then display three properties (name, to, and operator) for each item.

View station page

JavaScript-generated HTML previews

Go to the field pages in the navigation on the left and use the Show dialog preview buttons to generate the field previews inline. The script is currently in a passthrough block partial and included in copies of the product-docs field pages.

JS preview script mockup for field dialogs
.parent-button {
  width: 100%;

.child-button {
  float: left;
  width: 50%;

dialog {
  border: none !important;

<div class='parent-button'>
<div><button class='child-button' onclick="whichField()">Show dialog preview</button></div>
<div><button class='child-button' onclick="clearField()">Clear dialog preview</button></div>

    <div id="dialog_insert"></div>

var dialog_checkbox = [
    '<dialog open>',
      '<form method="dialog">',
      '<label style="font-family: Arial">',
        'Show title:',
        '<input type="checkbox" id="dialog_checkbox">',
        '<label for="dialog_checkbox" style="font-family: Arial"> Select to display title</label>',

var dialog_code = [
    '<dialog open>',
      '<form method="dialog">',
      '<p><label for="dialog_code" style="font-family: Arial">',
        'Code editor: </label></p>',
        '<textarea id="dialog_code" rows="4" cols="50" >',

var codeblock = document.evaluate("//div[@class='sect1']/h2[contains(.,'Example definition')]/ancestor::div[@class='sect1']//following-sibling::div[@class='sectionbody']//*[@data-lang = 'yml']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

function whichField() {
  if (codeblock.outerHTML.includes('checkBoxField')) {
    genDialog('checkBoxField'); }
  else if (codeblock.outerHTML.includes('codeField')) {
    genDialog('codeField'); }

function genDialog(field) {
  if (codeblock.outerHTML.includes('checkBoxField')) {
    document.getElementById("dialog_insert").innerHTML = dialog_checkbox; }
  else if (codeblock.outerHTML.includes('codeField')) {
    document.getElementById("dialog_insert").innerHTML = dialog_code; }
  else {
    document.getElementById("dialog_insert").innerHTML = "No matching field example found"; }

function clearField() {
  document.getElementById("dialog_insert").innerHTML = "";


DX Core



This widget lets you know where you are on the docs site.

You are currently perusing through the Visual previews of fields in the documentation docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules