Mini Widgets

Text

1.0.0

Order widget

Text

Application Code

arcCustomText({
		uniqueId: "" + Nr,
		embedded: true,
		width: "",
		height: "",
		alignY: "",
		alignX: "",
		fontSize: "",
		fontWeight: "",
		fontColor: "",
		lineHeight: "",
		textWrap: "",
		textScroll: "",
		textAlign: "",
		textDirection: "horizontal",
		textDecoration: {
			type: "",
			style: "",
			color: "",
			thickness: ""
		},
		value: ""
	})

uniqueId

You assign the uniqueId individually; it must be unique. The purpose behind this is: If you show multiple customText with different settings on your interface, the styles do not override each other.

uniqueId: Nr, // Ninox-Feld 
uniqueId: "Aufgabe Beschreibung", // Text in ""

embedded

You use the parameter embedded when the text does not lie within another widget. By default, this is set to true.

embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets)
embedded: true, // wenn Text eingebettet in anderes Widget 
embedded: "", // default: true

width

With width, you define how wide the container of your customText should be.

width: "100%", // Prozent-Werte oder "80px" Pixel-Werte
width: "auto", // witdh passt sich an Inhalt an
width: "", // default: 100%

height

With height, you define how high the container of your customText should be.

height: "100%", // Prozent Werte
height: "100px", // Pixel Werte
height: "", // default: auto

alignY

You use the parameter alignY to determine whether the container of the customText should be arranged at the top, bottom, or center on the Y-axis.

alignY: "bottom", // top, bottom, center
alignY: "", // default: top

alignX

You use the parameter alignX to determine whether the container of the customText should be arranged on the left, right, or center on the X-axis.

alignX: "right", // left, right, center
alignX: "", // default: left

fontWeight

With fontWeight, you can define the thickness of your font.

fontWeight: "normal", // CSS-Values (bold, lighter etc.)
fontWeight: "800", // Zahl 100-800 in 100er Schritten (400=normal, 800=bold)
fontWeight: "", // default: normal/400

fontColor

With fontColor, you define the font color of your customText.

fontColor: "#000000", // HEX Werte
fontColor: "rgb(77,166,255)", // RGB Werte
fontColor: "", // default: #000

lineHeight

With lineHeight, you determine the spacing between the lines of text.

lineHeight: "5px", // fixe line-height in px, pt, cm etc.
lineHeight: "1.5", // punkt-getrennte Zahl, multipliziert mit font-size
lineHeight: "150%", // line-height in Prozent von font-size
lineHeight: "", // default: normal

textWrap

With textWrap, you determine how your text should be wrapped. You can use common CSS values for white-space.

textWrap: "normal", // automatischer Zeilenumbruch, wenn verfügbaren Platz überschritten
textWrap: "nowrap", // Text bleibt in einer Zeile, auch wenn verfügbarer Platz überschritten
textWrap: "pre", // Text wird genau so angezeigt wie im HTML-Code, mit Leerzeichen und Zeilenumbrüchen
textWrap: "pre-wrap", // Text wird umgebrochen, wenn verfügbarer Platz überschritten, behält Leerzeichen und Zeilenumbrüche bei
textWrap: "pre-line", // Text wird wie "pre-wrap" behandelt, aber behält normale Zeilenumbrüche bei und entfernt zusätzliche Leerzeichen
textWrap: "", // default: normal

textScroll

With textScroll, you can set to true or false whether the text should be scrollable or cut off when it requires more space than the container provides (defined with width and height).

textScroll: true, // Der Text wird scrollbar, wenn er den Container überschreitet.
textScroll: false, // Der Text wird abgeschnitten, wenn er den Container überschreitet.
textScroll: "", // default: true

textAlign

With textAlign, you determine how the text should be aligned: left-aligned, right-aligned, centered or distributed across the line.

textAlign: "right", // left, right, center
textAlign: "justify", // streckt den Text so, dass jede Linie dieselbe Breite hat (wie zB in Zeitungen)
textAlign: "", // left

textDirection

With the parameter textDirection, you can determine whether the text should be aligned horizontally or vertically.

textDirection: "vertical", // vertical, horizontal
textDirection: "", // horizontal

textDecoration

With textDecorationSettings, you can use the parameter type to underline and strike through your text or create a line over and both above and below the text. You can also style this line individually using style, color, and thickness.

textDecoration: {
            type: "",
            style: "",
            color: "",
            thickness: ""
        }

The parameter type determines the type of line or position.

type: "none", // keine Linie 
type: "overline", // Linie oberhalb des Textes
type: "line-throug", // Text wird durchgestrichen
type: "underline", // Text wird unterstrichen
type: "overline underline", // Erzeugt eine Linie ober- und unterhalb des Textes
type: "", // default: keine Linie

The parameter style determines the style of the line.

style: "solid", // gerade Linie
style: "double", // doppelte Linie
style: "dotted", // gepunktete Linie
style: "dashed", // gestrichelte Linie
style: "wavy", // gewellte Linie
style: "", // default: solid

The parameter color determines the color of the line.

color: "#fff", // hex-code Farben
color: "rgb(249, 201, 36)", // rgb() Farben
color: "", // default: #000

The parameter thickness determines the thickness of the line.

thickness: "7px", //
thickness: "", // default: 1px

value

With value, you set the value that is to be output as customText. This can either be written text in "" or a Ninox field. If it is not a Ninox text field, remember to embed the value in text().

value: "Dies ist mein customText.", // manuell eingefügter Text
value: Beschreibung, // Ninox Wert
value: "", // gibst du keinen value ein, wird nichts ausgegeben

Tip for narrow columns:

With the customTable, you can now use the customText to present the column titles vertically, saving space in cells that, for example, contain only a checkbox, and subsequently providing more room for elements that require more space 💡