Controls And Inputs

QUIQQER uses PHP controls for server-rendered UI elements and JavaScript controls for browser behavior. Forms, package settings, site settings, user panels, brick settings, and templates can initialize JavaScript controls through data-qui.

PHP Controls

PHP controls extend QUI\Control and render markup for frontend or administration views.

namespace Vendor\Package\Controls;

use QUI;

class Example extends QUI\Control
{
    public function __construct(array $attributes = [])
    {
        parent::__construct($attributes);

        $this->setJavaScriptControl('package/vendor/package/bin/Controls/Example');
        $this->setAttribute('data-qui-options-example', 'value');
    }
}

Use PHP controls when the server needs to prepare attributes, templates, permissions, locale values, or package data before the browser control starts. setJavaScriptControl() stores the control name as qui-class; when the control is rendered, QUIQQER outputs it as a data-qui attribute.

JavaScript Controls

JavaScript controls are AMD modules loaded through RequireJS paths.

define('package/vendor/package/bin/Controls/Example', [
    'qui/QUI',
    'qui/classes/DOM'
], function (QUI, QDOM) {
    'use strict';

    return new Class({
        Extends: QDOM,
        Type: 'package/vendor/package/bin/Controls/Example',

        initialize: function (options) {
            this.parent(options);
        }
    });
});

The control name must match the value used in data-qui or setJavaScriptControl().

data-qui Initialization

Use data-qui when markup should be parsed into a JavaScript control:

<input
    type="text"
    name="site"
    data-qui="controls/projects/project/site/Input"
    data-qui-options-name="example"
>

QUIQQER parses the element, loads the control, stores its instance ID in data-quiid, and makes it available through QUI.Controls.getById().

Common core controls include:

Control	Use
controls/editors/Input	WYSIWYG/editor input.
controls/projects/project/site/Input	Select one project site.
controls/projects/project/site/Select	Select project sites.
controls/projects/project/media/Input	Select a media item.
controls/groups/Select	Select groups.
controls/lang/InputMultiLang	Multilingual text input.
controls/lang/ContentMultiLang	Multilingual content input.

Packages can use these controls in XML-driven forms such as settings.xml, site.xml, user.xml, and package-specific configuration files.

Core Input Shortcuts

QUIQQER also parses several established HTML shortcuts through QUI/utils/Controls. These shortcuts are useful in backend templates and XML-driven forms where the platform parser initializes controls automatically.

Prefer explicit data-qui controls for new custom UI. Use the shortcuts when you need the standard QUIQQER form behavior.

Markup	Result
<div class="btn-button" data-text="Save" data-image="fa fa-save"></div>	Renders a QUIQQER button. data-click can name the click handler.
<input type="date">	Uses the browser date input when available; otherwise QUIQQER creates a date picker.
<input type="datetime">	Uses the browser datetime input when available; otherwise QUIQQER creates a date/time picker.
<input class="groups"> or <input class="group">	Creates a group selector.
<input class="user">	Creates a single-user selector.
<input class="users_and_groups">	Creates a combined user/group selector.
<input class="media-image">	Creates a media selector for image/file entries.
<input class="media-folder">	Creates a media folder selector.
<input class="project">	Creates a project selector.
<input class="project-types">	Creates a project type selector.
<input class="project-site">	Creates a project site selector.

Media Inputs

Use media-image when an input should store a selected media item:

<input
    class="media-image"
    name="image"
    data-qui-options-selectable_mimetypes="image/png,image/jpeg"
>

Supported parser options for media-image are:

Option	Use
data-qui-options-selectable_types	Restricts selectable media types. Use comma-separated values such as image,file or folder.
data-qui-options-selectable_mimetypes	Restricts selectable MIME types. Use comma-separated values.
data-qui-options-cssclasses	Enables CSS class / icon class selection support.
data-qui-options-mediabutton	Controls whether the media button is shown. Use 0 to disable it.

Use media-folder when only folders should be selected:

<input class="media-folder" name="targetFolder">

Project Site Inputs

Use project-site for site URL selection:

<input class="project-site" name="targetSite">

By default the input opens the site picker on focus. If external URLs should be allowed, add data-external or use the explicit control option:

<input
    data-qui="controls/projects/project/site/Input"
    data-qui-options-external="1"
    name="targetSite"
>

Language And Editor Inputs

Use explicit data-qui controls for multilingual fields and editors:

<input
    data-qui="controls/lang/InputMultiLang"
    name="title"
>

<textarea
    data-qui="controls/lang/ContentMultiLang"
    name="content"
></textarea>

<select
    data-qui="controls/lang/Select"
    name="language"
></select>

<textarea
    data-qui="controls/editors/Input"
    name="body"
></textarea>

User And Group Inputs

For current UI work, prefer the select controls:

<input
    data-qui="controls/users/Select"
    name="userId"
>

<input
    data-qui="controls/usersAndGroups/Select"
    name="permissions"
>

Existing forms may still use the older input controls:

<input
    data-qui="controls/users/Input"
    data-qui-options-max="1"
    name="userId"
>

<input
    data-qui="controls/usersAndGroups/Input"
    name="permissions"
>

Upload Handling

For media selection in forms, prefer the existing media input controls. For custom drag-and-drop upload behavior, use the core upload request class:

require(['classes/request/Upload'], function (Upload) {
    new Upload([dropTarget], {
        onDrop: function (event, files) {
            // Validate and send files through the package-specific endpoint.
        }
    });
});

The upload request class emits drag-and-drop events and normalizes file lists. Server-side upload processing should validate permissions, target folders, file names, and MIME types before storing files.

Practical Rules

• Keep reusable browser controls under package bin/.
• Use data-qui-options-* for simple control options.
• Use locale values for visible labels.
• Read control instances through QUI.Controls.getById() after parsing.
• Validate all data again on the server, even when the browser control restricts the input.