Common Component Settings

The visual Components of Lowcoder share some general Settings and Configurations. You may find nevertheless Components, for which these or that Setting may not apply - and so it's not shown in the Application Editor.

Component Name

The component Name is important as it is the same time the identifier to address a visual Component via Javascript or in any dynamic way.

Label

Many Components have the possibility to show Labels for the user, so it is clealy communicated what for example an input field is meant for.

Orientation

Internationalization

Based on the language information of the browser, one can translate text in Lowcoder on the fly.

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

// a Translation Register as JSON
{
	"product_price": [{
		"en-US": "Price"
	}, {
		"de-DE": "Preis"
	}, {
		"fr-FR": "Prix"
	}],
	"product_name": [{
		"en-US": "Product Name"
	}, {
		"de-DE": "Produktname"
	}, {
		"fr-FR": "Nom de produit"
	}]
}

// dynamically reading from the Translation Register JSON for the label
{{translations.value.product_price.find(item => item.hasOwnProperty(userLanguage.value))[userLanguage.value]}}

Layout

The Layout Settings section can display different settings, based on the selected Component. I most of the cases here you find Settings for the placement of a Component.

Orientation (left center right justify) (where applicable)

Vertical space (fixed, automatic) (where applicable)

Prefix and Suffix Icons (where applicable)

Disable & hide

Disable Components

Hide Components

Nearly every Component can get "hidden and shown" dynamically. This is useful to switch dynamically between Application elements upon user input or interaction.

Vertical space of hidden Components

When Components are hidden, they do not consume vertical space. This is a special ability, which comes with a small challenge in the Application Editor. The advantage is, that multiple Components could get dynamically switched (shown or hidden), so you can dynamically react to user inputs or interactions.

As soon as a Component is hidden, a "small closed eye icon" indicates this state in the App Editor. The component can still get dragged and selected. As soon as selected, it will show as long as selected its true height.

You can now place other components in the same vertical place as the hidden Component. This can lead to a small challenge in the App Editor to drag and place Components that overlap. It is suggested to work then with static true/false setting for the attribute "Hidden", so you can find the desired Component displayed with its height when you need it.

In Lowcoder v2.0.0 the fields "Hidden" and "Disabled" are unfortunately at different places in the Properties Panel across the components. We will fix and order this in a future version.

Event handlers

One of the powerful concepts of Lowcoder are the Event handlers. Based on User interaction almost every Component can release Events, on which you can react with different actions.

User Interaction Event Types

Change (when user input data changes)
Focus (when the user points to the component
Blur (when the user left the Component)
Submit (when the user submits a Form, where the Component belongs to)
Click (when a button like Component is clicked)
Open / Close (for collapsible Components)
Switch Tab (for Tabbed containers)

When a Component supports User interaction Events, you can have one or multiple actions based on a single Event type or different Event types.

Actions for Events

Each Event handler has an Action out of a list of possible Actions. Each action has individual Settings.

Run Query
Control Component
Run Javascript
Set temporary State
Go to App
Show Notification
Go to URL
Copy to Clipboard
Export Data

Order of Event Actions

In a future version of Lowcoder, we will make sure it is possible to change the order of the Event Handlers. As for now, it is not possible and you would need to plan the order of Event Actions if your App needs multiple Event Handlers for a single Component.