🌱 The next big step: Kirby 4 Alpha Learn more
Skip to content

Panel JavaScript API

Take the methods, getters and setters here with a grain of salt. We are still working on a stable API.

panel

Getters

// returns the current editing context (view, dialog, drawer)
panel.context;

// shortcut for panel.config.debug
panel.debug;

// shortcut for panel.translation.direction
panel.direction;

// array with all installed languages
panel.languages;

// true if a license exists, false if unregistered
panel.license;

// array with all menu items
panel.menu;

// true if multiple languages can be installed
panel.multilang;

// object with all available searches
panel.searches;

// the combined title for the document
panel.title;

Setters

// sets a new document title by combining
// the value with panel.system.title
panel.title = "My title";

Methods

// sends a Panel GET request
panel.get(url, options = {});

// sends a GET request and sets the state
panel.open(url, options = {});

// sends a POST request
panel.post(url, options = {});

// full redirect to a different URL
panel.redirect(url);

// low-level request handler
panel.request(url, options = {});

// sends a search request
panel.search(type, query);

// overwrites the Panel state
panel.set(state);

// returns the full Panel state including all modules
panel.state();

// URL builder for Panel URLs
panel.url(url = "", query = {}, origin);

panel.api

Provides global access to API requests.

Methods

panel.api.delete(path, data, options, silent = false);
panel.api.get(path, query, options, silent = false);
panel.api.patch(path, data, options, silent = false);
panel.api.post(path, data, options, silent = false);

panel.config

Getters

panel.config.debug;
panel.config.kirbytext;
panel.config.search.limit;
panel.config.search.type;
panel.config.translation;

panel.dialog

Getters

panel.dialog.component;
panel.dialog.island;
panel.dialog.isLoading;
panel.dialog.isOpen;
panel.dialog.on;
panel.dialog.path;
panel.dialog.props;
panel.dialog.query;
panel.dialog.ref;
panel.dialog.referrer;
panel.dialog.timestamp;
panel.dialog.value;

Methods

panel.dialog.cancel();
panel.dialog.close();
panel.dialog.defaults();
panel.dialog.input(value);
panel.dialog.key();
panel.dialog.load(url, options = {});
panel.dialog.open(url, options = {});
panel.dialog.post(url, options = {});
panel.dialog.refresh(options = {});
panel.dialog.reload(options = {});
panel.dialog.reset();
panel.dialog.set(state);
panel.dialog.state();
panel.dialog.submit(value, options = {});
panel.dialog.success(success);
panel.dialog.url();
panel.dialog.validateState(state);

panel.drag

Getters

panel.drag.data;
panel.drag.isDragging;
panel.drag.type;

Methods

panel.drag.defaults();
panel.drag.key();
panel.drag.reset();
panel.drag.set(state);
panel.drag.start(type, data);
panel.drag.state();
panel.drag.stop();
panel.drag.validateState(state);

panel.drawer

Getters

panel.drawer.breadcrumb;
panel.drawer.component;
panel.drawer.icon;
panel.drawer.island;
panel.drawer.isLoading;
panel.drawer.isOpen;
panel.drawer.on;
panel.drawer.parent;
panel.drawer.path;
panel.drawer.props;
panel.drawer.query;
panel.drawer.ref;
panel.drawer.referrer;
panel.drawer.tab;
panel.drawer.tabId;
panel.drawer.tabs;
panel.drawer.timestamp;
panel.drawer.title;
panel.drawer.value;

Methods

panel.drawer.cancel();
panel.drawer.close();
panel.drawer.defaults();
panel.drawer.goTo(id);
panel.drawer.input(value);
panel.drawer.key();
panel.drawer.load(url, options = {});
panel.drawer.open(url, options = {});
panel.drawer.openTab(tabId);
panel.drawer.post(url, options = {});
panel.drawer.refresh(options = {});
panel.drawer.reload(options = {});
panel.drawer.reset();
panel.drawer.set(state = {});
panel.drawer.state();
panel.drawer.submit(value, options = {});
panel.drawer.success(success);
panel.drawer.url();
panel.drawer.validateState(state);

panel.dropdown

Getters

panel.dropdown.component;
panel.dropdown.isLoading;
panel.dropdown.on;
panel.dropdown.path;
panel.dropdown.props;
panel.dropdown.query;
panel.dropdown.referrer;
panel.dropdown.timestamp;

Methods

panel.dropdown.close();
panel.dropdown.defaults();
panel.dropdown.key();
panel.dropdown.load(url, options);
panel.dropdown.open(url, options);
panel.dropdown.options();
panel.dropdown.reload(options);
panel.dropdown.refresh(options);
panel.dropdown.reset();
panel.dropdown.set(state);
panel.dropdown.state();
panel.dropdown.url();
panel.dropdown.validateState();

panel.events

panel.events.emit(event, ...args);
panel.events.off(event, callback);
panel.events.on(event, callback);

panel.language

Getters

panel.language.code;
panel.language.default;
panel.language.direction;
panel.language.isDefault;
panel.language.name;
panel.language.rules;

Methods

panel.language.defaults();
panel.language.key();
panel.language.reset();
panel.language.set(state);
panel.language.state();
panel.language.validateState();

panel.notification

Getters

panel.notification.context;
panel.notification.details;
panel.notification.icon;
panel.notification.isFatal;
panel.notification.isOpen;
panel.notification.message;
panel.notification.theme;
panel.notification.timeout;
panel.notification.timer;
panel.notification.type;

Methods

panel.notification.close();
panel.notification.defaults();
panel.notification.deprecated(message);
panel.notification.error(error);
panel.notification.fatal(error);
panel.notification.key();
panel.notification.reset();
panel.notification.open(notification);
panel.notification.set(state);
panel.notification.state();
panel.notification.success(success);
panel.notification.validateState(state);

panel.plugins

Getters

panel.plugins.components;
panel.plugins.created;
panel.plugins.icons;
panel.plugins.login;
panel.plugins.textareaButtons;
panel.plugins.thirdParty;
panel.plugins.use;
panel.plugins.views;
panel.plugins.writerMarks;
panel.plugins.writerNodes;

panel.system

panel.system.ascii;
panel.system.csrf;
panel.system.isLocal;
panel.system.locales;
panel.system.slugs;
panel.system.title;

panel.translation

Getters

panel.translation.code;
panel.translation.data;
panel.translation.direction;
panel.translation.name;

Methods

panel.translation.defaults();
panel.translation.key();
panel.translation.reset();
panel.translation.set(state);
panel.translation.state();
panel.translation.translate(key, data, fallback = null);
panel.translation.validateState(state);

panel.upload

The new panel.upload JS module adds simple commands to pick files from the system file picker, open the new file dialog and handle uploads to the server.

Getters

panel.upload.accept;
panel.upload.attributes;
panel.upload.files;
panel.upload.max;
panel.upload.multiple;
panel.upload.name;
panel.upload.replacing;
panel.upload.url;

Methods

// closes the upload dialog and clears the queue
panel.upload.close();

// returns all defaults for the upload
panel.upload.defaults();

// returns the key for this feature (upload)
panel.upload.key();

// opens the upload dialog
panel.upload.open(options)

// opens the system file picker
panel.upload.pick(options);

// removes a file from the upload queue
panel.upload.remove(fileId);

// resets the queue
panel.upload.reset();

// selects additional files (needs a FileList)
panel.upload.select(files)

// overwrites the upload state
panel.upload.set(state);

// starts the upload of all files in the queue
panel.upload.start();

// returns the current state
panel.upload.state();

// validates a new state object for the upload
panel.upload.validateState(state);

panel.urls

Getters

panel.urls.api;
panel.urls.site;

panel.user

Getters

panel.user.email;
panel.user.id;
panel.user.language;
panel.user.role;
panel.user.username;

Methods

panel.user.defaults();
panel.user.key();
panel.user.reset();
panel.user.set(state);
panel.user.state();
panel.user.validateState();

panel.view

Getters

panel.view.component;
panel.view.breadcrumb;
panel.view.breadcrumbLabel;
panel.view.icon;
panel.view.id;
panel.view.isLoading;
panel.view.link;
panel.view.on;
panel.view.path;
panel.view.props;
panel.view.query;
panel.view.referrer;
panel.view.search;
panel.view.timestamp;
panel.view.title;

Methods

panel.view.defaults();
panel.view.key();
panel.view.load(url, options = {});
panel.view.open(url, options = {});
panel.view.post(url, options = {});
panel.view.refresh(options = {});
panel.view.reload(options = {});
panel.view.reset();
panel.view.set(state);
panel.view.url();
panel.view.validateState(state);