X4 Help Center
X4 Help Center
Breadcrumbs

TextBlock

<TextBlock> controls can be used to format text blocks within a Web App.

The <TextBlock> control is defined via the general attributes for controls.

The <TextBlock> element can include the following elements:

  • Free text

  • <Paragraph>

  • <Binding>

  • <Break>

  • <Span>

  • <Translation>

  • <Link>

Paragraph

The <Paragraph> element is used to divide texts into different paragraphs and can contain the following elements:

  • Free text

  • <Binding>

  • <Break>

  • <Span>

  • <Translation>

  • <Link>

A Paragraph can be defined using the following attributes:

Attribute

Description

background

Defines a color for the background of the control.

  • This setting overrides the default color of the color scheme.

  • This attribute does not work for the Maps control.

Possible values:

  • Hexadecimal color value, e.g. ff5a00

    Do not use a hash before the color value, and do not use a shortened notation for the color value.

  • Color code from the color palette of the Web App (cf. Theming), e.g. A200


fontFamily

Specifies the font family.

  • This attribute overwrites the default Web App font for this layout.

  • If the attribute is defined on an element, the font family is inherited by any child elements unless the fontFamily attribute is explicitly defined for the child elements.

  • This attribute does not work for the Image, Map , and HtmlDocument elements.

Possible values:

  • MainFont: stored main font

  • Fontcode from the font palette, e.g. Font04

fontSize

Sets the font size.

  • This attribute overrides the default Web App font size for this layout.

  • This attribute does not work for the Image, Map , and HtmlDocument elements.

Possible values:

  • Any integer or decimal number with a period as a decimal separator, e.g. 20 ; 20.8 ; .9

  • Font size in pixels, e.g. 20px

  • Font size in points, e.g. 18pt

  • Font size compared to the font size of the parent element, e.g. .8em oder 120%

  • Keywords: xx-Small , x-small , small , medium , large , x-large , xx-large , smaller , larger

fontStretch

Defines the width of each character.

This attribute overrides the default character width for this layout.

Possible values:

  • Condensed

  • Expanded

  • ExtraCondensed

  • ExtraExpanded

  • Medium

  • Normal (default)

  • SemiCondensed

  • SemiExpanded

  • UltraCondensed

  • UltraExpanded

This attribute does not work for the Image, Map, Chart, and HtmlDocument elements.

fontStyle

Defines the tilt of the font.

This attribute overrides the default font tilt for this layout.

Possible values:

  • italic: Italic font

  • normal: Normal font (default)

  • oblique: Slanted font style (calculated)

  • This attribute does not work for the Image, Map , and HtmlDocument elements.

fontWeight

Defines the font weight.

This attribute overrides the default font weight for this layout.

Possible values:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (default)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight

This attribute does not work for the Image, Map , and HtmlDocument elements.

foreground

Defines the font color.

This setting overrides the default color of the color scheme.


Possible values:

  • Hexadecimal color value, e.g. ff5a00

    Do not use a hash before the color value!
    Do not use a shortened notation of the color value!

  • Color code from the color palette of the Web App (cf. Theming), e.g. A200

justifyText

Defines the text alignment within the text block.

Possible values:

  • justify (default): full justification

  • center: centered

  • left: left-aligned

  • right: right-aligned

textOverflow

Specifies what should happen when the control is full.

Possible values:

  • ellipsis (default): Use ... to show that the text is not finished

  • hidden : Break off text, watch for whole words

  • wordBreak : Break off text within word

  • allow: break off text between words
Example for <Paragraph>
XML
<Paragraph justifyText="justify" textOverflow="allow">
    Paragraph
    <Binding value="#test" />
</Paragraph>

Span

The <Span> element is used to divide texts into different paragraphs and can contain the following elements:

  • Free text

  • <Binding>

  • <Break>

  • <Span>

  • <Translation>

  • <Link>

The Span element can be defined using the following attributes:

Attribute

Description

background

Defines a color for the background of the control.


  • This setting overrides the default color of the color scheme.

  • This attribute does not work for the Maps control.

Possible values:

  • Hexadecimal color value, e.g. ff5a00

    Do not use a hash before the color value, and do not use a shortened notation for the color value.

  • Color code from the color palette of the Web App (cf. Theming), e.g. A200


fontFamily

Specifies the font family.

  • This attribute overwrites the default Web App font for this layout.

  • If the attribute is defined on an element, the font family is inherited by any child elements unless the fontFamily attribute is explicitly defined for the child elements.

  • This attribute does not work for the Image, Map , and HtmlDocument elements.

Possible values:

  • MainFont: stored main font

  • Fontcode from the font palette, e.g. Font04

fontSize

Sets the font size.

  • This attribute overrides the default Web App font size for this layout.

  • This attribute does not work for the Image, Map , and HtmlDocument elements.

Possible values:

  • Any integer or decimal number with a period as a decimal separator, e.g. 20 ; 20.8 ; .9

  • Font size in pixels, e.g. 20px

  • Font size in points, e.g. 18pt

  • Font size compared to the font size of the parent element, e.g. .8em oder 120%

  • Keywords: xx-Small , x-small , small , medium , large , x-large , xx-large , smaller , larger

fontStretch

Defines the width of each character.

This attribute overrides the default character width for this layout.

Possible values:

  • Condensed

  • Expanded

  • ExtraCondensed

  • ExtraExpanded

  • Medium

  • Normal (default)

  • SemiCondensed

  • SemiExpanded

  • UltraCondensed

  • UltraExpanded

This attribute does not work for the Image, Map, Chart, and HtmlDocument elements.

fontStyle

Defines the tilt of the font.

This attribute overrides the default font tilt for this layout.

Possible values:

  • italic: Italic font

  • normal: Normal font (default)

  • oblique: Slanted font style (calculated)

  • This attribute does not work for the Image, Map , and HtmlDocument elements.

fontWeight

Defines the font weight.

This attribute overrides the default font weight for this layout.

Possible values:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (default)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight

This attribute does not work for the Image, Map , and HtmlDocument elements.

foreground

Defines the font color.

This setting overrides the default color of the color scheme.


Possible values:

  • Hexadecimal color value, e.g. ff5a00

    Do not use a hash before the color value!
    Do not use a shortened notation of the color value!

  • Color code from the color palette of the Web App (cf. Theming), e.g. A200


Example for <Span>
XML
<Span fontWeight="ExtraBold" foreground="GaugeAxisMiddle">
    Span
    <Binding value="#test" />
</Span>

Break

The <Break> element is used to insert line breaks within a text section.

Example for <Break>
XML
<Paragraph>
   	SoftProject GmbH
  	<Break/>
   	Am Erlengraben 3
   	<Break/>
  	D-76275 Ettlingen
   	<Break />
   	E-Mail: info@softproject.de
</Paragraph>

Binding

The <Binding> element is used for Data Binding.

The Binding element is defined using the following attribute:

Attribute

Description

value

Binds a valid data binding string.

Note that no constants are allowed.
Example for <Binding>
XML
<Span>
    Span with binding
    <Break />
    value = '<Binding value="#test" />'
</Span>

Translation

The <Translation> element is used to store a translation key for multilingual interfaces.

The Translation element is defined using the following attribute:

Attribute

Description

value

Specifies the translation key.
Example for <Translation>
XML
<Span>
    Span with translation
    <Break />
    value = '<Translation value="$TranslationKey" />'
</Span>

The <Link> element is used to create a link. To generate the link, an action must be defined.

The following actions are supported:

  • Upload Action

  • Download Action

  • Select Action

  • CustomAction

Example

XML
<?xml version="1.0" encoding="UTF-8"?>
<DetailComponent xmlns="http://softproject.de/webapp/1.0">
	<FlowLayout>
		<Header value="Welcome to my new Web App!" />
		<TextBlock>
			<Link>
				<SelectAction
					process="myProcess.wrf"
					displayName="Click here"></SelectAction>
			</Link>
		</TextBlock>
	</FlowLayout>
</DetailComponent>