6. Properties and formulas

List of properties

A BreadCrumb has a set of properties that will define its representation and interactions with the host form. In this chapter, we will review the different existing properties that can be accessed by a formula that acts as a Setter or Getter .

to use a formula in Getter mode, you must call it without parameters, except when the first parameter is a constant of the component (required parameter)

All formulas can be called up at the first level of the object.

For color properties, you can give them a color code as a CSS string ( Example: "blue" or "#0000FF" or "rgb(0,0,255)")

$color:="blue:80"
$color:="#0000FF:80" 
$color:="rgb(0,0,255):80" 

By default the opacity factor applied to the colors is 100%. To change this value to 80%, simply add this value to the string defining the color by separating it with the colon character". (Example: "blue:80)

It is recommended not to manually change properties whose values are not defined by formulas, as they are managed internally by the component. Properties related to sections will be dealt with in the section management chapter.

Global

Global properties at the second level of the object: MyBC.breadCrumb.global

Name	Type	Default value	Formula	Parameters	Description
name	string	empty string	Name	- Name of the form object (string)	Name of the Breadcrumb and therefore of the image form object.
model	string	arrow	Model	- Model Name (string)	Model to use: * simple * arrow * groupedButtons
rtl	boolean	False	RTL	- Section layout (boolean)	The sections are generated from right to left
maxSectionToDraw	longint	-1	MaxSectionToDraw	- Maximum number of sections to display (longint)	Maximum number of sections to be displayed. No limit corresponds to -1 which is the default value. It is possible to display fewer sections than those created.

Boxes

Properties related to the container on the second level of the object: MyBC.breadCrumb.box

Name	Type	Default value	Formula	Parameters	Description
bgColor	string	#F0EEF1	BgColor	- Background color (string)	Background color. It is possible to define an opacity rate (%) (Ex: black:80 - black with an opacity of 80%).
centered	boolean	False	IsCentered	- Automatic centeric (boolean)	Allows you to center the Breadcrumb in relation to the position and size of the image object defined in the form editor. Applies only if dynamicSize is enabled.
dynamicSize	boolean	True	IsDynamicSize	- Automatic sizing (boolean)	Sizes the width of the Breadcrumb automatically according to the size of the sections.
height	longint	-1	BoxHeight	- Container height (longint)	Height of the Breadcrumb. If -1, it takes the value defined in the form editor as the height.
width	longint	-1	BoxWidth	- Container width (longint)	Width of the Breadcrumb. If -1, it takes the width defined in the form editor as the width.

Box corner radius

Properties related to the corners of the container on the third level of the object: MyBC. breadCrumb.box.cornerRadius

Name	Type	Default value	Formula	Parameters	Description
left	longint	5	CornerRadiusLeft	- Value of the radius on the left side of the container (longint)	Value of the radius applied to the corners on the left side.
right	longint	5	CornerRadiusRight	- Value of the radius on the right side of the container (longint)	Value of the radius applied to the corners on the right side.

Box border

Properties related to the container border on the third level of the object: MyBC. breadCrumb.box.border

Name	Type	Default value	Formula	Parameters	Description
color	string	black	BorderColor	- Border color (string)	Color of the container border. It is possible to define an opacity rate (%) (Ex: black:80 - black with an opacity of 80%).
size	longint	2	BorderSize	- Border size (longint)	Size of the container border.

Box padding

Properties related to the paddings of the container on the third level of the object: MyBC. breadCrumb.box.padding

Name	Type	Default value	Formula	Parameters	Description
horizontal	longint	0	PaddingH	- Horizontal padding (longint)	Horizontal padding.
vertical	longint	0	PaddingV	- Vertical Padding (longint)	Vertical padding.

Divider

Properties of the separator on the second level of the object: MyBC.breadCrumb.divider

Name	Type	Default value	Formula	Parameters	Description
margin	longint	0	DividerMargin	- Divider margin (longint)	Divider margin.
text	string	>	Divider	- Separator (string)	Character(s) to be used as separator for the simple model.

Divider font

Separator properties for the simple model on the third level of the object: MyBC. breadCrumb. divider.font

Name	Type	Default value	Formula	Parameters	Description
color	string	blue	DividerFontColor	- Font color (string)	Color of the separator. It is possible to define an opacity rate (%) (Ex: black:80 - black with an opacity of 80%).
name	string	Arial	DividerFontName	- Font name (string)	Name of the font to use. Several fonts can be defined by separating them with a comma without spaces. The component will search for the first available font on your current OS. Be careful, some fonts lower some characters and therefore these cannot be vertically centered at the Breadcrumb level.
size	longint	24	DividerFontSize	- Font size (longint)	Size of the separator.
style	string	none	DividerFontStyle	- Font style (string)	Style to be applied to the separator. Available: * bold * italic * underline * strikethrough It is possible to use several styles separated by a comma without spaces.

Divider arrow

Properties for the arrow model located at the third level of the object: MyBC. breadCrumb. divider.arrow

Name	Type	Default value	Formula	Parameters	Description
borderSize	longint	4	ArrowBorderSize	- Arrow thickness (longint)	Arrow thickness.
color	string	#0048AA	ArrowColor	- Arrow color (string)	Arrow color. It is possible to define an opacity rate (%) (Ex: black:80 - black with an opacity of 80%).
firstSectionWithArrow	boolean	True	IsFirstSectionWithArrow	- Arrow to the first section (boolean)	If false, the width of the arrow is zero for the first section.
lastSectionWithArrow	boolean	False	IsLastSectionWithArrow	- Arrow to the last section (boolean)	If false, the width of the arrow is zero for the last section.
paddingH	longint	16	ArrowPaddingH	- section padding (longint)	Padding apply horizontally to the content of the section in an arrow template.
width	string	50%	ArrowWidth	- Arrow width (longint)	Arrow width.

Section types

Properties related to states and section types at the fifth level of the object: MyBC. breadCrumb. sectionTypes[Type][State]

Name	Type	Default value	Formula	Parameters	Description
bgColor	string	D4E3FE	SectionBgColor	-Type and state (constant) - Background color (string)	Background color. It is possible to define an opacity rate (%) (Ex: black:80 - black with an opacity of 80%).
borderColor	string	black	SectionBorderColor	-Type and state (constant) - Border color (string)	Color of the border.
borderSize	longint	0	SectionBorderSize	-Type and state (constant) - Border size (longint)	Border size.
fontColor	string	#0148AA	SectionFontColor	-Type and state (constant) - Font color (string)	Font color. It is possible to define an opacity rate (%) (Ex: black:80 - black with an opacity of 80%).
fontName	string	Arial	SectionFontName	-Type and state (constant) - Font name (string)	Name of the font.
fontSize	longint	12	SectionFontSize	-Type and state (constant) - Font size (longint)	Font size.
fontStyle	string	none	SectionFontStyle	-Type and state (constant) - Font style (string)	Police style. Available: * bold * italic * underline * strikethrough It is possible to use several styles separated by a comma without spaces.
pictureOpacity	longint	100	PictureOpacity	-Type and state (constant) - Opacity percentage (longint)	Percentage of opacity of the images.
replacingColor	string	empty chain	ReplacingColor	-Type and state (constant) - Replacement color (string)	Color to replace the current color in an SVG image.