7. Section management

In AJUI_BreadCrumb, a section is an object containing a set of properties affecting only that one. All these section objects are grouped together in a collection at the instance level.

Description and use of a section

A section is created and manipulated using an identifier (id) that allows the component to recognize it when the mouse interacts with it. A position attribute is associated with it in order to define the order in which it will be positioned and displayed in the breadcrumb.

Each section is also associated with a type (standard, first, previous, next, current). The type will define which state properties (e. g. AJUI_bc_standard_hover) the component should apply for this section.

Each section has a textual content (label) and/or a specific image, a callback and an object containing the parameters to be passed to the callback. A callback can be assigned to a section on "On Clicked" and/or "On DoubleClicked" events.

Finally, a section has a (disable) property to change it from active to inactive.

In the next two sub-chapters, we will present the member functions available to manage the sections and also the properties associated with each section.

Member functions

The management of the sections is done via CRUD member functions as well as some utility methods to simplify their management. Here is this list:

• AddSection ( id { ; param })

  • Allows you to add a section. It waits in first parameter for the id of the target section and you can optionally pass in second parameter an object containing some or all of the properties of a section with the values you want. Unspecified properties will receive their default values.

• UpdateSection ( id { ; param }) -> { param }

  • Allows you to update a section. It waits in the first parameter for the ID of the target section and in the second optional parameter for an object containing the properties to be modified with their new values (Setter). If you do not pass the second parameter, the function returns the section definition to you in an object (Getter).

• RemoveSection (id)

  • Allows you to delete a section. It waits for the ID of the target section as a parameter.

• SetCurrentSection (id)

  • Utility function to assign the "current" type to a section. It will also apply the "previous" type to previous sections and the "next" type to subsequent sections. This processing will not apply to "first" sections. This function waits for the id of the target section in parameter.

• GetNextPosition ( ) -> nextPosition

  • Returns the next position value (largest value plus one) in length.

• RemoveAllSections ( )

  • Removes all sections from the collection.

List of section properties

As you have seen in the member functions, all the properties below can be modified by passing them into an object in the CRUD member functions. If this is not the case, the default values will be applied (except for the id which is mandatory when creating a section)

Name	Type	Default value	Description
id	string	-	Section id. It does not have a default value, as it must be filled in when using the CRUD functions.
position	longint	Largest position value +1	Position of the section in the Breadcrumb. By default, the component searches for the highest value of the positions and will add one.
type	string	standard	The section is related to one of the following types: * standard * first * current * previous * next.
label	string	section + position value	Text content of the section.
disable	boolean	False	If True, the section is considered in the disable state.
picturePath	string	empty chain	Folder path from the "resources" folder of the host database. You can also use "#" plus the name of your picture file as a path. This will only work with an imported AJUI Button template and the picture must be located in the same folder as the template.
picturePosition	string	left	Position of the image in relation to the text. Possible value: * left * right.
pictureMargin	longint	10	Margin between text and image.
pictureHeight	string	40%	Size of the image in height, the number must be followed by "px" if you want to define a size in pixels otherwise pass a value in % if you want a percentage in relation to the available height of the section. The width is automatically resized according to the height calculated based on the font size.
colorToReplace	string	empty chain	Current color of an SVG. Here is the value of the "fill" tag. Can only be used with an image whose extension is SVG (see section types in properties and formulas).
onClickCB	string	empty chain	Name of the callback method on the event "On Clicked".
onClickCBParams	object	null	Object containing the callback parameters on the "On Clicked" event
onDoubleClick	string	empty chain	Name of the callback method on the event "On Double Clicked".
onDoubleClickCBParams	object	null	Object containing the callback parameters on the "On Double Clicked" event