⚙️Common component settings

The visual components in QuickDEV share some general settings and configurations. However, you may encounter components for which certain settings do not apply, and therefore they are not displayed in the Application Editor.

Click on any Component opens the Properties panel to show all Settings & Configurations.

Component name

The component name is crucial, as it serves as the identifier to address a visual component via JavaScript or in any dynamic manner.

It's advisable to generally choose between Snake- and Camel-Case for naming conventions. Kebab case is not recommended, as the "-" between words can potentially be misinterpreted as a minus operation in JavaScript in certain edge cases.

Make sure you give every component a self-speaking name

The component name is a selector for example in ui based Event handlers

Also in Javascript you use the same name to address the Object, its Attributes and Functions.

Label

Many components offer the option to display labels for users, providing clear communication about the purpose of elements such as input fields.

Labels helps the users of Apps to understand interaction.

Labels can have different orientations.

Labels can be oriented left or top of a component. The text itself can additionally be oriented left-side or right side.

Tooltip

Additionally it can be helpful for users to use Tooltips for descriptions and suggestions.

Internationalization

QuickDEV enables on-the-fly translation of text based on the language information of the user's browser.

Get the User-Language from the Browser

Labels and tooltips can use Handlebar JavaScript ({{ }}) expressions to retrieve translations from a JSON registry.

// reading the User Language from Browser 
{{navigator.language || navigator.userLanguage}}

{
    "other_field": [{
        "en-US": "Field"
    }, {
        "de-DE": "Feld"
    }, {
        "fr-FR": "Champ"
    }],
    "other_label": [{
        "en-US": "Label"
    }, {
        "de-DE": "Bezeichnung"
    }, {
        "fr-FR": "Étiquette"
    }]
}

Use a Translation Register as JSON

Layout

In the Layout Settings section, you'll find various settings tailored to the selected Component. Typically, these settings pertain to the positioning of the Component.

• Orientation (left center right justify) (where applicable)

• Vertical space (fixed, automatic) (where applicable)

• Prefix and Suffix Icons (where applicable)

Disable & hide

Handlebar JavaScript ({{ }}) expressions can dynamically hide or disable most Components.

Disable components

Many components can set in "disabled" State to not hide Components - but indicate that User cannot enter Data right now.

Hide components

Almost every Component has the capability to be dynamically hidden and shown. This functionality proves valuable for seamlessly switching between Application elements based on user input or interaction.

Components can get hidden by static or dynamic Setting

Vertical space of hidden Components

When components are buried, they do not take up vertical space. While this feature offers a unique potential, it also poses a minor challenge in the Application Editor. However, one advantage is that different Components can be dynamically switched (shown or hidden), allowing for dynamic reactions to user inputs and interactions.

Hidden Components does not consume vertical space, but can get selected.

When a Component is hidden, a 'small closed eye icon' appears in the App Editor to indicate its hidden state. However, the component remains draggable and selectable. When selected, it displays its true height until deselected.

As soon as selected or dragged, a Component shows it height.

Placing other components in the same vertical position as the hidden Component is now possible. However, this may pose a slight challenge in the App Editor when dragging and placing Components that overlap. To address this, it's recommended to utilize a static true/false setting for the 'Hidden' attribute. This ensures that the desired Component is displayed with its height when needed.

Components that are hidden can pe placed vertically at the same position.

Event handlers

Event handlers are one of the powerful concepts of QuickDEV. Nearly every Component can generate events based on user interactions, allowing you to respond with various actions.

For each components a set of possible User interaction Events is accessible

User interaction event types

• Change

• Focus

• Blu

• Submit

• Click

• Open / Close

• Switch Tab

When a Component supports user interaction events, you can define one or multiple actions for a single event type or for different event types.

Each Component which supports Events can have multiple Handlers (Actions) for Event Types.

Actions for events

Each event handler offers a selection of actions from a list of possible options, with each action having its own individual settings.

• Run Query

• Control Component

• Run Javascript

• Define Dynamic variable

• Go to App

• Show Notification

• Go to URL

• Copy to Clipboard

• Export Data

Further details on Event Handlers can be found here.

Order of event actions

In a future release of QuickDEV, we aim to enable the ability to rearrange the order of Event Handlers. Currently, this functionality is not available, requiring careful planning of the Event Actions' order if your application requires multiple Event Handlers for a single Component.

Style

Components offer a range of styling options, including color schemes, borders, and background customization.

Different Components have different support for styleable Attributes.