Help Center

Menu

Updating a component for Visual Page Builder

This practical activity takes you through modifying an existing component to take advantage of some Visual Page Builder features.

The exercise will provide the necessary configuration files. These files will be modified to support quick options and inline editing.

The Quote component contains three fields:

  • Quote

  • Author

  • Color

By default, all three fields must be edited in the page outline column.

Component checklist

By the end of the activity, your component will meet the following acceptance criteria:

  • The color field is available in the Quick options menu in the preview column.

  • The Quote field is inline editable in the preview column.

  • The Author field is inline editable in the preview column.

Prerequisites

  1. A local folder with a unique and descriptive name. Ensure you create your component files for this activity within this folder.

  2. Familiarity with the CLI commands you will be using:

Practical activity

To complete this activity, choose one of the two options below:

  1. Basic component files provided

  2. Complete component files provided

Basic component files provided

In this option, we provide the component files for main.js, preview-wrapper.html, and manifest.json. None of these are currently configured to utilize the Page Builder features.

Using the provided source files, we recommend you start by previewing/deploying the component as is.

Then, referring to the documentation in Building components for the Visual Page Builder, modify the files to support quick options and inline editing.

Source files

main.js 
// MAIN FUNCTION

export default {
    async main({ quote, author, color }) {
        return `<div>
    <blockquote>
    <p style="color:${color}">
    ${quote}
    </p>
    <p>
    <em>-- ${author}</em>
    </p>
    </blockquote>
    </div>`;
    },
};
manifest.json 
{
    "$schema": "http://localhost:3000/schemas/v1.json#",
    "version": "0.0.1",
    "type": "edge",
    "name": "quote-ab",
    "displayName": "Quote (AB)",
    "description": "Provide a Quote",
    "namespace": "ab-components",
    "mainFunction": "main",
    "functions": [
        {
            "name": "main",
            "entry": "main.mjs",
            "input": {
                "type": "object",
                "properties": {

                },
                "required": [

                ]
            },
            "output": {
                "responseType": "html"
            }
        }
    ],
    "previews": {
        "default": {
            "functionData": {
                "main": {
                    "inputData": {
                        "type": "inline",
                        "value": {

                        }
                    },
                    "wrapper": {
                        "path": "preview-wrapper.html"
                    }
                }
            }
        }
    }
}
preview-wrapper.html 
<html>
    <head></head>
    <body>
       [component://output]
    </body>
</html>

Complete component files provided

In this option, we provide the completed component files for main.js, preview-wrapper.html, and manifest.json. The files will require minimal modification to complete the activity.

Then, referring to the documentation in Building components for the Visual Page Builder, modify the files to support quick options and inline editing.

Source files

main.js 
// MAIN FUNCTION

export default {
    async main({ quote, author, color }) {
        return `<div>
    <blockquote>
    <p data-sq-field="quote" style="color:${color}">
    ${quote}
    </p>
    <p>
    <em>-- <span data-sq-field="author">${author}</span></em>
    </p>
    </blockquote>
    </div>`;
    },
};
manifest.json 
{
    "$schema": "http://localhost:3000/schemas/v1.json#",
    "version": "0.0.2",
    "type": "edge",
    "name": "quote",
    "displayName": "Quote",
    "description": "Provide a Quote",
    "namespace": "c4e-set",
    "icon": {
        "id": "format_quote",
        "color": {
            "type": "hex",
            "value": "#095c78"
        }
    },
    "mainFunction": "main",
    "functions": [
        {
            "name": "main",
            "entry": "main.js",
            "input": {
                "type": "object",
                "properties": {
                    "quote": {
                        "type": "string",
                        "title": "Quote",
                        "ui:metadata": {
                            "inlineEditable": true
                        }
                    },
                    "author": {
                        "type": "string",
                        "title": "Author",
                        "ui:metadata": {
                            "inlineEditable": true
                        }
                    },
                    "color": {
                        "type": "string",
                        "title": "Color",
                        "enum": [ "Black", "White", "Red", "Green", "Blue"],
                        "default": "Black",
                        "ui:metadata": {
                            "quickOption": true
                        }
                    }
                },
                "required": [
                    "quote", "author", "color"
                ]
            },
            "output": {
                "responseType": "html"
            }
        }
    ],
    "previews": {
        "default": {
            "functionData": {
                "main": {
                    "inputData": {
                        "type": "inline",
                        "value": {
                            "quote": "Tell me and I forget. Teach me and I remember. Involve me and I learn.",
                            "author": "Benjamin Franklin",
                            "color": "Black"
                        }
                    },
                    "wrapper": {
                        "path": "preview-wrapper.html"
                    }
                }
            }
        }
    }
}
preview-wrapper.html 
<html>
    <head></head>
    <body>
       [component://output]
    </body>
</html>

Where to next?

Check out the DXP Component Library, a code repository filled with various example components ready for further experimentation.

Apply what you have learned in this tutorial to adapt these components to fully utilize the features of the Visual Page Builder.