text tag

<text>

The <text> tag defines a text area, that can hold multiline characters. The contents entered here, can be customized using the text attributes.

Parent tag : <pc>

Child tag : <prefix>, <suffix>

Note: You'll have to encode the following characters to make the <text> tag display them in your ZML snippets:

Encode & (ampersand) as & or &
Encode < (less than) as < or <
Encode > (greater than) as > or >
Encode ' (single quotes) as ' or '

You can use the built-in

replaceAll()

Deluge function to replace each of these characters with their encoded value. For example, the following code snippet encodes the ampersand (&) character present in the

Product Description

field so that it's displayed as-is in the ZML snippet:

<%
var_content = Products[ID=3888833000000119021].Product_Description;
var_encoded_content = replaceAll(var_content, "&", "&");
%>
<text type='Text' renderAsHtml='true' value='<%=var_encoded_content%>' size='5' color='#333333'></text>

Attributes

1. type

The type attribute specifies the kind of text to be displayed.

Possible Values

Text
Form Data

Default Value

Text

2. value

The value attribute defines the specific value to be displayed in the text area.

Possible Values

type	value	Example
Text	Specify a static string	<text type='Text' value='Hello World'/>
Form Data	Fetches a value from a Zoho Creator application's form, based on the said aggregate.	<text type='Form Data' value='appLinkName.componentLinkname.fieldLinkName.aggregate'/>#

Note:

#An aggregate must be specifies for the Form Data attribute.
The aggregate values that can be computed are: sum, minimum, maximum, median, average, count, distinctCount

Aggregate	Description	Syntax
sum	Computes the sum of all the values in a specified form field.	<text type='Form Data' value=' appLinkName.formlinkname.fieldlinkname. sum '/>
minimum	Computes the minimum of all values in a specified form field.	<text type='Form Data' value='appLinkName.formlinkname.fieldlinkname. minimum '/>
maximum	Computes the maximum of all values in a specified form field.	<text type='Form Data' value='appLinkName.formlinkname.fieldlinkname. maximum '/>
median	Computes the median of all values in a specified form field.	<text type='Form Data' value='appLinkName.formlinkname.fieldlinkname. median '/>
average	Computes the average of all values in a specified form field.	<text type='Form Data' value='appLinkName.formlinkname.fieldlinkname. average '/>
count	Computes the count of all the records in a specified form.	<text type='Form Data' value='appLinkName.formlinkname. ID.count '/>
distinctCount	Computes the distinct number of occurances of a value in a specified form field.	<text type='Form Data' value='appLinkName.formlinkname.fieldlinkname .dictinctCount '/>

value acts as a source attribute. i.e: Attributes including size, bold, italic, fontFamily, color and bgColor are styling attributes for the text content and applicable only when a value is specified.

3. criteria

The criteria attribute specifies a fetching criteria for filtering the text to be displayed.

Syntax

Note:

criteria attribute is optional.
criteria attribute can be used to add an additional filter to display a specified aggregate.

4. numberScale

The numberScale attribute adds a pseudo-metric symbol to the numeric value in the text.

Possible Values

K (Thousand)
M (Million)
B (Billion)

Example

Syntax	<text value='thisapp.Products.Unit_Price.sum' numberScale='K'/>
Output

Note:

numberScale attribute is optional.

5. decimalPlaces

The decimalPlaces attribute specifies the number of digits to be displayed after a decimal point.

Possible Values

A number from 0-3.

Example

Syntax	<text value='thisapp.Products.Unit_Price.sum' decimalPlaces='2'/>
Output

Note:

decimalPlaces attribute is optional.

6. thousandsSeparator

The thousandsSeparator attribute specifies the symbol to be used to separate each group of thousands.

Possible Values

, (Comma symbol)
. (Period symbol )

Example

Syntax	<text value='thisapp.Products.Unit_Price.sum' thousandSeparator=','/>
Output

Note:

thousandseparator attribute is optional.

7. decimalSeparator

The decialSeparator attribute specifies a symbol to be used to separate the integer part of a number from the fractinal part.

Possible Values

, ( Comma symbol)
. ( Period symbol)

Example

Syntax	<text value='thisapp.Products.Unit_Price.sum' decimalSeparator='.'/>
Output

Note:

decimalseparator attribute is optional.

8. fontFamily

The fontFamily attribute specifies a font style for the text.

Possible Values

Arial
Georgia
Lato
Proxima nova
Roboto
Roboto slab

Example

Syntax	<text type='Text' value='Hello World' fontFamily='Georgia'/>
Output

Note:

fontFamily attribute is optional. Applicable only when a value is specified.
If no fontFamily is specified for a value , the text acquires the fontFamily of the application theme. Each application theme uses a different fontFamily.

9. size

The size attribute defines a font size for the text.

Possible Values

A number from 1 - 9 that defines the size of the text.

Default Value

Example

Syntax	<text type='Text' value='Hello World' size='8'/>
Output

Syntax

Output

Note:

size attribute is optional.

10. bold

The bold attribute adds a bold font style to the text.

Possible Values

true
false

Default Value

false

Example

Syntax	<text type='Text' value='Hello World' bold='true'/>
Output

Note:

bold attribute is optional.

11. italic

The italic attribute italicizes the font.

Possible Values

true
false

Default Value

false

Example

Syntax	<text type='Text' value='Hello World' italic='true'/>
Output

Note:

italic attribute is optional.

12. color

The color attribute specifies a font color for the text.

Possible Values

A hexadecimal color value. You can refer this page for hexadecimal color codes.

Example

Syntax	<text type='Text' value='Hello World' color='#FF00FF'/>
Output

Note:

color attribute is optional.

13. bgColor

The bgColor attribute specifies a background color for the <text> element.

Possible Values

A hexadecimal color value. Refer this page for hexadecimal color codes.

Example

Syntax	<text value='Hello World' bgColor='#047B33'/>
Output

Note:

bgColor attribute is optional. Applicable only when a value is specified.

14. padding

The padding attribute generates a specified amount of space between all sides of the text content and it's container.

Possible Values

A numeric value in pixels

Syntax	<text value='Hello World' padding='20px'/>
Output

Note:

padding attribute is optional.

15. paddingTop

The paddingTop attribute generates a specified amount of space between the top of the text content and it's container.

Possible Values

A numeric value in pixels

Syntax	<text value='Hello World' paddingTop='50px'/>
Output

Note:

paddingTop attribute is optional.

16. paddingRight

The paddingRight attribute generates a specified amount of space between the right of the text content and it's container.

Possible Values

A numeric value in pixels

Syntax	<text value='Hello World' paddingRight='20px'/>
Output

Note:

paddingRight attribute is optional.

17. paddingBottom

The paddingBottom attribute generates a specified amount of space between the bottom of the text content and it's container.

Possible Values

A numeric value in pixels

Syntax	<text value='Hello World' margin='50px'/>
Output

Note:

paddingBottom attribute is optional

18. paddingLeft

The paddingLeft attribute generates a specified amount of space between the left of teh text content and it's container.

Possible Values

A numeric value in pixels

Syntax	<text value='Hello World' margin='20px'/>
Output

Note:

paddingLeft attribute is optional

19. margin

The margin attribute generates a specified amount of space between all sides of the text container and it's parent.

Possible Values

A numeric value in pixels

Example

Syntax	<text value='Hello World' margin='50px'/>
Output

Note:

margin attribute is optional

20. marginTop

text Tag attributes and behavior in ZML | Zoho Creator Help

text tag