Skip to main content
Skip table of contents

TextBlock

<TextBlock> controls are used to format text blocks within Web Apps.

TextBlock controls are defined using 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 include the following elements:

  • Free text
  • <Binding>
  • <Break>
  • <Span>
  • <Translation>
  • <Link>

A Paragraph can be defined using the following attributes:


AttributeDescription
background

Defines a color for the background of the control.

  • This setting overwrites 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 in front of the color value or a shortened notation!
  • Color code from the color palette of the Web App (see Theming), e.g. A200

fontFamily

Defines the font family.

  • This attribute overrides the default font of the Web App for this control.

  • If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the fontFamily attribute explicitly set.

  • This attribute does not work with the Image, Maps, and HtmlDocument controls.

Possible values:

  • MainFont: Stored main font

  • Font code from the font palette, e.g. Font04

fontSize

Defines the font size.

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

  • This attribute does not work with the Image, Maps, and HtmlDocument controls.

Possible values:

  • Any integer or decimal number with a dot as 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 or 120

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

fontStretch

Sets the width of the single characters.

This attribute overrides the default width of the characters of the Web App for this control.

Possible values:

  • Condensed

  • Expanded

  • ExtraCondensed

  • ExtraExpanded

  • Medium

  • Normal (default)

  • SemiCondensed

  • SemiExpanded

  • UltraCondensed

  • UltraExpanded

This attribute does not work with the Image, Maps, and HtmlDocument controls.

fontStyle

Defines the font style.

This attribute overrides the default style of the characters of the Web App for this control.

Possible values:

  • italic: italic characters

  • normal: normal characters (default)

  • oblique: italic characters (calculated)

This attribute does not work with the Image, Maps, and HtmlDocument controls.

fontWeight

Defines the font weight.

This attribute overrides the default font weight of the Web App for this control.

Possible values:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (default)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight

This attribute does not work with the Image, Maps, and HtmlDocument controls.

foreground

Defines the font color.

This setting overwrites the default color of the color scheme!

Possible values:

  • Hexadecimal color value, e.g. ff5a00

Do not use a hash in front of the color value!

Do not use a shortened notation of the color value!

justifyText

Defines the text alignment within the text block.

Possible values:

  • justify (default): full justification
  • center: centered
  • left: left-justified
  • right: right-justified
textOverflow

Defines what happens if the control has reached its space limit.

Possible values:

  • ellipsis(default):  Show with ... that the text is not finished
  • hidden: Break off text, paying attention to whole words
  • wordBreak: Break off within the word
  • allow: Break off text between words


Example <Paragraph>

XML 
<Paragraph justifyText="justify" textOverflow="allow">
    Paragraph
    <Binding value="#test" />
</Paragraph>

Span

The <Span> element is used to format text segments or single text elements and can contain the following elements:

  • Free text
  • <Binding>
  • <Break>
  • <Span>
  • <Translation>
  • <Link>

The Span element can be defined using the following attributes:


AttributeDescription
background

Defines a color for the background of the control.

  • This setting overwrites 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 in front of the color value or a shortened notation!
  • Color code from the color palette of the Web App (see Theming), e.g. A200
fontFamily

Defines the font family.

  • This attribute overrides the default font of the Web App for this control.
  • If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the fontFamily attribute explicitly set.
  • This attribute doesn't work with the Image, Maps and HtmlDocument controls.

Possible values:

  • MainFont: Stored main font
  • Font code from the font palette, e.g. Font04
fontSize

Defines the font size.

  • This attribute overrides the default font size of the Web App for this control.
  • This attribute doesn't work with the Image, Maps and HtmlDocument controls.

Possible values:

  • Any integer or decimal number with a dot as 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 or 120
  • Key words: xx-Small, x-small, small, medium, large, x-large, xx-large, smaller, larger
fontStretch

Sets the width of the single characters.

This attribute overrides the default width of the characters of the Web App for this control.

Possible values:

  • Condensed
  • Expanded
  • ExtraCondensed
  • ExtraExpanded
  • Medium
  • Normal (default)
  • SemiCondensed
  • SemiExpanded
  • UltraCondensed
  • UltraExpanded


This attribute doesn't work with the Image, Maps, Charts and HtmlDocument controls.

fontStyle

Defines the font style.

This attribute overrides the default style of the characters of the Web App for this control.

Possible values:

  • italic: italic characters
  • normal: normal characters (default)
  • oblique: italic characters (calculated)


  • This attribute doesn't work with the Image, Maps and HtmlDocument controls.
fontWeight

Defines the font weight.

This attribute overrides the default font weight of the Web App for this control.

Possible values:

  • Black
  • Bold
  • DemiBold
  • ExtraBlack
  • ExtraBold
  • ExtraLight
  • Heavy
  • Light
  • Medium
  • Normal (default)
  • Regular
  • SemiBold
  • Thin
  • UltraBlack
  • UltraBold
  • UltraLight


This attribute doesn't work with the Image, Maps and HtmlDocument controls.

foreground

Defines the font color.

This setting overwrites the default color of the color scheme!


Possible values:

  • Hexadecimal color value, e.g. ff5a00

    Do not use a hash in front of the color value!
    do not use a shortened notation of the color value!
  • Color code from the color palette of the Web App (see Theming), e.g. A200


Example <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 <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:

AttributeDescription
value

Binds a valid data binding string.

Note that constants are not allowed.

Example <Binding>

XML 
<Span>
    Span with binding
    <Break />
    value = '<Binding value="#test" />'
</Span>

Translation

The  <Translation> element is used to specify a translation key for multilingual Web apps.

The Translation element is defined using the following attribute:

AttributeDescription
value

Specifies the translation key.

Example <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>
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close