Block editing, drag&drop

Goal of this step: Support on the frontend:

  • moving files via drag&drop (pages, texts),

  • creating new files via drag&drop,

  • accessing the contextmenu on files,

  • copy-pasting files,

  • selecting multiple files.

Block mode

You can access Block mode on the top-left of the Boomla Toolbar.

It allows you to select and manipulate files, like move them around via drag&drop, copy-paste them, delete them, open the contextmenu on them, etc.

To fully support his mode, we will need to define some accept rules for our page app.

Typesafe file operations

To allow drag & drop operations on the frontend, we have to configure what kinds of files are accepted in each bucket of app instances. Our website has 2 apps: pages and text elements. Text elements do not accept anything, there is nothing to do.

Let's look at pages. We have to do two things:

  • Configure the page app to accept pages in bucket 1 and contents in bucket 2.

  • Define a drop-zone on the main area of the page. Dropping files on that area should route dropped files to bucket 2 on the filesystem.

Accept rules

We must create an .Accept file within the page app to hold our accept rules. It shall have type accept-2. This is a special type that Boomla uses for accept rules.

A file is a content file if it implements the .Inline method.

A file is a page file if it implements the .Page method. This is a dummy interface, the .Page file does not even need a type, it is simply used for tagging apps to be considered page apps.

To enforce that, set the following attributes of the .Accept file:

    "link": "",
    "type": "accept-2",
    "title": "",
    "statusCode": 0,
    "attr": {
        "bucket-1 string": ".Page",
        "bucket-2 string": ".Inline"

This is the format you will find in the IDE. It is not actually stored like that, this is just a serialized form to allow editing it.

If you visit the .Accept file in your browser, it will verify if the accept file is valid or not.

To finish this up and tag page instances to be actual pages, create the file /apps/page/.Page.

Note that you can still circumvent the accept rules in many ways, for example by using the IDE. It only guides drag & drop operations on the frontend.

Define a placeholder

A placeholder is a drop zone on the user interface. It routes dropped files to a bucket on the filesystem.

We have to change the /apps/page/.Request file to mark the div around the main content area to be a placeholder (class="o1-placeholder") that routes any dropped files in bucket 2 (data-o1-placeholder="2").

    var css = response.addCssModule('../style.css'));
<!DOCTYPE html>
    <title><?= f.title() ?></title>
    <div class="<?= css.wrapper ?>">
        <div class="<?= ?>">
            <?=='/apps/menu').inline(false) ?>
        <div class="<?= css.main ?> o1-placeholder" data-o1-placeholder="2">
            <?== f.query(':2').inline() ?>

The placeholder is only needed so long the bucket is empty as you will be able to drop new files relative to existing contents once they exist.

For that reason, we don't need a placeholder for our pages, as the menu will always display at least the root page.

Add files to the New tab

As a last step, let's add a page and a text instance to the New tab of the Boomla Toolchain.

First, create the file /sys/new. Then either drag a page and a text element onto the Local area of the New tab or create the files manually:

PATH                               [TYPE]
//         [/apps/page]
//         [/apps/text]

Make sure to give both files a title. Also, if you created the files manually, make sure to add some dummy HTML code to the body of the text file.

Dragging files to and from the New tab will create deep copies.

Test drive

You now have a powerful editor at your disposal. Please watch the end-user tutorial to get a full understanding of its capabilities - it's simply too much to cover here.

See how to do it (silent video)

Subscribe to our newsletter!