Banners are differentiated into two formats or types called "cornerRibbon" banner or "window" banner.

A banner is necessarily associated with a picture form variable (see chapter Getting Started). This one will receive the banner. The positioning of the picture variable will also be managed by the component according to the type selected.

The display of the picture variable is the responsibility of the developer.

Type « cornerRibbon »

The corner Ribbon banner that can be placed at one of the four corners of a form.

The corner ribbon shows a banner that will be arranged on a diagonal depending on its position. Its main purpose is to provide clear and distinct information to the user.

:warning: Since it is a picture, if you put the picture object that will hold it in the foreground and you have fields or variables below you will not be able to access them, even they are visible. Take care to size it properly in terms of its properties (size and choice of side) and to give it a location that does not hide the use of the form. Even if visually it represents a diagonally shaped banner, the image is square in shape.

How to use it

The use of the corner ribbon banner is useful when you want to give important information to the user about a dataset. For example, if the record loaded in the form is currently locked, you can inform via the banner of the status of the form.

On the same principle, one can imagine to indicate when loading an invoice, the fact that it is paid or that a customer is considered as a bad payer or that a priority level is displayed. Generally speaking, the idea is that the banner will attract the user's attention to mention important information.

CornerRibbon – specific positioning

Since version 1.6 of AJUI Banner, it is possible to associate the ribbon banner directly to a form object or a specific area. For this purpose, two new formulas are available :

• RibbonTargetName
• RibbonTargetCoordinates

The first formula expects the name of a form object. The component will retrieve the coordinates of it, in order to position the ribbon at one of its four angles (top-left, top-right, bottom-left and bottom-right). Warning, the form object must be part of the main form.

The second formula allows you to pass the coordinates directly (left, top, right, bottom) in order to create an area that will receive the ribbon at one of its four corners. This method allows you to bypass the limit of the first method by specifying, for example, coordinates that correspond to the position of a subform object (see the 4D CONVERT COORDINATES method for converting coordinates between subform and form).

Type « window »

The "window" banner is a picture covering the entire associated form, so it must be placed in the foreground of the form page. It can contain either text or an picture.

In the case of text, AJUI_Banner draws a first rectangular shape, used to cover the entire form, with which is associated a background color with an opacity rate. Then, it centers a second shape, the banner (central rectangle) and its textual content.

When using a picture, AJUI_Banner also applies a first global overlapping rectangle and then centers the associated picture.

The purpose of the window banner is mainly to report an ongoing processing to the user, or to display a visual help picture by overlapping the form.

How to use it

The use of the "window" window banner is particularly of interest for two situations. If a processing operation is started and it may take some time, it is recommended to inform the user and to prevent any possible actions on his part on the current form.

The second possible usage is to display an image. We can thus imagine displaying an overlay image (semi-transparent black background) allowing the user to get the necessary information on the use of fields, buttons, etc. in a complex form to be understood (figure on the left). Or display a picture of a face or an object, etc. (right figure).

Note: The "window" type will mainly block events related to mouse interactions such as click, focus, etc. since it affects the image in the foreground. However, interactions with the keyboard such as tabulation cannot be stopped by the banner. So be careful to manage the behaviors that the banner cannot prevent.

Types « spinner » and « windowSpinner »

Spinners are extensions of the “window” banner. The « spinner » is an image representing a kind of wheel that is animated to suggest a loading time to the user. We use a Worker to achieve the animation effect.

The first type allows you to display the spinner alone in the center of the screen and by adding a background as for the window type.

The second type "windowSpinner" will do as the previous one except that a text box is included and the spinner will be located to the right or left of the text.

Limitations

Since the SVG language does not provide the possibility of vertical alignment within the text boxes (TextArea) and for our own sake of consistency, we have decided to vertically center the text by setting a constraint :

• The text must fit on a single line !

Subform Compatibility

The differents types of banners cannot be displayed inside a subform. However, you can define and call the drawBanner within a subform and it will be displayed in the main form. Don't forget to put the picture variable at the main form level. (see Getting Started Chapter)