Common Component Settings

The visual Components of OpenFlower 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.

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

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.

It makes sense to decide in general between Snake- and Camel-Case. Kebab case is not suggested, as the "-" between words can be interpreted in Javascript as minus-operation in 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 have the possibility to show Labels for the user, so it is clealy communicated what for example an input field is meant for.

Labels helps the users of Apps to understand interaction.

Orientation

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

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

get the User-Language from the Browser

For Labels and Tooltips, a Handlebar Javascript expression can get used to reading from a translation register (JSON).

// 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"
	}]
}

Use a Translation Register as JSON

// 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

Most of the Components can be hidden and/or disabled dynamically by a Handlebar Javascript expression.

Disable Components

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

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.

Components can get hidden by static or dynamic Setting

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.

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

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.

As soon as selected or dragged, a Component shows it 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.

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

In OpenFlower 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 OpenFlower are the Event handlers. Based on User interaction almost every Component can release Events, on which you can react with different actions.

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

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)

You can find a list of Event Handlers here: [TODO list of event handlers)

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

Each Component which supports Events can have multiple Handlers (Actions) for 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

More about the Event Handlers you can find here.

Order of Event Actions

In a future version of OpenFlower, 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.

Style

Components support a variety of Styling settings like colors, borders, and backgrounds.

Different Components have different support for styleable Attributes