Floating Label: Learn how to use it in Scriptcase

Master, continuing with our mission to bring you useful news and resources, it’s time to talk about Floating Label.

Floating Label is a feature that allows you to transform the placeholder as a floating label on form inputs.

Through a function and parameters it is possible to inform an array that will receive all the fields in which the resource will be applied.

Something extremely simple, but unfortunately it doesn’t come natively in Scriptcase.

That’s why we’ve incorporated into Sprout (our base project that serves basically any business rule) features like this.

To give our systems a fresher look and improve user usability.

Follow the steps below to learn how to use it in your projects.

PREREQUISITES

• The use of this function requires that the field used contain a placeholder (Watermark).
• The function is strict to the onLoad and onLoadRecord events of form, control, and calendar applications.
• Discard the use of the Display output Ajax, option found in the application settings.

Supported Field Types

╔══════════════╦════════════════════════╗
║ Applications ║     Field Types        ║
╠══════════════╬════════════════════════╣
║ Form         ║ Text                   ║
║ Control      ║ Integer                ║
║ Calendar     ║ Decimal                ║
║              ║ Currency               ║
║              ║ Credit Card Number     ║
║              ║ E-Mail                 ║
║              ║ URL                    ║
║              ║ HTML Color             ║
║              ║ Date                   ║
║              ║ Time                   ║
╚══════════════╩════════════════════════╝

STEP 01

Create an internal library called floatLabel and then insert the code below:

EXPLAINING MACRO PARAMETERS

array_fields

This parameter will receive an array of fields.

sc_seq_vert

This parameter stores the current line number of the log being executed by the event. Mandatory only for horizontal form guidelines.

STEP 02

Insert a watermark in the fields where you want to use the feature.

STEP 03

The next and last step is to call our macro on the events.

Here we have two scenarios:

1 — To use the macro in Forms (Single Record), Control and Calendar, you must use the application’s onLoad event.

Below is an example of how to make the call:

Note: when pasting the code, remove the tags that open and close PHP on lines 1 and 7

This would be a single record form using the macro:

2 — For Multiple Record Forms, Editable Grid and Editable Grid View, use the onLoadRecord event. Eg.:

Note: when pasting the code, remove the tags that open and close PHP on lines 1 and 7

Note that in line #5, we need to pass the $sc_seq_vert variable as parameter in the function. This is an internal Scriptcase variable, which holds the current line number of the record being executed by the event.

This is the result in an application using editable grid orientation, for example:

If you found this article useful, go to the 👏 button and click how many times you enjoyed reading this post. This will certainly go a long way. Feel free to leave a comment/suggestion. You can also find us on Facebook, Instagram and Youtube. Together for a better Scriptcase!