6. Properties and formulas

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

Formula	Description
Name -> string Default value : empty string Parameter : * Name of the form object (string)	Name of the Breadcrumb and therefore of the image form object.
Model -> string Default value : arrow Parameter : * Model Name (string)	Model to use: * simple * arrow * groupedButtons
RTL -> boolean Default value : False Parameter : * Section layout (boolean)	The sections are generated from right to left
MaxSectionToDraw -> longint Default value : -1 Parameter : * 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

Formula	Description
BgColor -> string Default value : #F0EEF1 Parameter : * Background color (string)	Background color. It is possible to define an opacity rate (%) (Ex: black:80 - black with an opacity of 80%).
IsCentered -> boolean Default value : False Parameter : * 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.
IsDynamicSize -> boolean Default value : True Parameter : * Automatic sizing (boolean)	Sizes the width of the Breadcrumb automatically according to the size of the sections.
BoxHeight -> longint Default value : -1 Parameter : * Container height (longint)	Height of the Breadcrumb. If -1, it takes the value defined in the form editor as the height.
BoxWidth -> longint Default value : -1 Parameter : * 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

Formula	Description
CornerRadiusLeft -> longint Default value : 5 Parameter : * Value of the radius on the left side of the container (longint)	Value of the radius applied to the corners on the left side.
CornerRadiusRight -> longint Default value : 5 Parameter : * 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

Formula	Description
BorderColor -> string Default value : black Parameter : * 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%).
BorderSize -> longint Default value : 2 Parameter : * 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

Formula	Description
PaddingH -> longint Default value : 0 Parameter : * Horizontal padding (longint)	Horizontal padding.
PaddingV -> longint Default value : 0 Parameter : * Vertical Padding (longint)	Vertical padding.

Divider

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

Formula	Description
DividerMargin -> longint Default value : 0 Parameter : * Divider margin (longint)	Divider margin.
Divider -> string Default value : > Parameter : * 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

Formula	Description
DividerFontColor -> string Default value : blue Parameter : * Font color (string)	Color of the separator. It is possible to define an opacity rate (%) (Ex: black:80 - black with an opacity of 80%).
DividerFontName -> string Default value : Arial Parameter : * 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.
DividerFontSize -> longint Default value : 24 Parameter : * Font size (longint)	Size of the separator.
DividerFontStyle -> string Default value : none Parameter : * 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

Formula	Description
ArrowBorderSize -> longint Default value : 4 Parameter : * Arrow thickness (longint)	Arrow thickness.
ArrowColor -> string Default value : #0048AA Parameter : * Arrow color (string)	Arrow color. It is possible to define an opacity rate (%) (Ex: black:80 - black with an opacity of 80%).
IsFirstSectionWithArrow -> boolean Default value : True Parameter : * Arrow to the first section (boolean)	If false, the width of the arrow is zero for the first section.
IsLastSectionWithArrow -> boolean Default value : False Parameter : * Arrow to the last section (boolean)	If false, the width of the arrow is zero for the last section.
ArrowPaddingH -> longint Default value : 16 Parameter : * section padding (longint)	Padding apply horizontally to the content of the section in an arrow template.
ArrowWidth -> string Default value : 50% Parameter : * Arrow width (string)	Arrow width. You can use pixel or percent value (example : 50% or 20px)

Section types

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

Formula	Description
SectionBgColor -> string Default value : #D4E3FE Parameters : * 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%).
SectionBorderColor -> string Default value : black Parameters : * Type and state (constant) * Border color (string)	Color of the border.
SectionBorderSize -> longint Default value : 0 Parameters : * Type and state (constant) * Border size (longint)	Border size.
SectionFontColor -> string Default value : #0148AA Parameters : * 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%).
SectionFontName -> string Default value : Arial Parameters : * Type and state (constant) * Font name (string)	Name of the font.
SectionFontSize -> longint Default value : 12 Parameters : * Type and state (constant) * Font size (longint)	Font size.
SectionFontStyle -> string Default value : none Parameters : * 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 Default value : 100 Parameters : * Type and state (constant) * Opacity percentage (longint)	Percentage of opacity of the images.
ReplacingColor -> string Default value : empty string Parameters : * Type and state (constant) * Replacement color (string)	Color to replace the current color in an SVG image.