# Customization
# Buttons
Sprout has a custom rule for virtual buttons. Where, the user can apply sizes, colors, styles and icons with Font Awesome when creating a button. Thus, it is possible, by default, to adapt it to the layout of your system.
The rule is easily defined by applying the reference as a prefix to the button name. For example, to create a bigger button, just prefix ms_le to the name of the button: ms_le_btn_copy
More than one reference can be applied to the same button, being limited only by the number of characters that the Scriptcase interface allows for the name of a button.
For example, to create a button with an icon and class, simply apply the ms_del and ms_ldr prefixes to the button name: ms_del_ms_ldr_del_user
Check out the list below with all the button references, available on Sprout:
*This style has hover difference.
# Sizes
Reference | Description | Example |
---|---|---|
ms_sl | Class small | Example |
ms_le | Class large | Example |
# Colors
Reference | Description | Example |
---|---|---|
ms_py | Class primary. Hex.: #3699ff ■ | Example |
ms_sy | Class secondary. Hex.: #e5eaee ■ | Example |
ms_ss | Class success. Hex.: #1bc5bd ■ | Example |
ms_dr | Class dander. Hex.: #f64e60 ■ | Example |
ms_wg | Class warning. Hex.: #ffa800 ■ | Example |
ms_io | Class info. Hex.: #8950fc ■ | Example |
ms_lt | Class light. Hex.: #f3f6f9 ■ | Example |
ms_dk | Class dark. Hex.: #212121 ■ | Example |
# Light Style
Reference | Description | Example |
---|---|---|
ms_lss | Class light success | Example |
ms_lpy | Class light primary | Example |
ms_ldr | Class light danger | Example |
ms_lwg | Class light warning | Example |
ms_ldk | Class light dark | Example |
# Light hover styles*
*This style has hover difference.
Reference | Description | Example |
---|---|---|
ms_lhss | Class light hover success | Example |
ms_lhpy | Class light hover primary | Example |
ms_lhdr | Class light hover danger | Example |
ms_lhwg | Class light hover warning | Example |
ms_lhdk | Class light hover dark | Example |
# Light background styles*
*This style has hover difference.
Reference | Description | Example |
---|---|---|
ms_lbss | Class light background success | Example |
ms_lbpy | Class light background primary | Example |
ms_lbdr | Class light background danger | Example |
ms_lbwg | Class light background warning | Example |
ms_lbdk | Class light background dark | Example |
# Font Awesome
Reference | icon | Example | Reference | icon | Example |
---|---|---|---|---|---|
ms_close | Example | ms_rght | Example | ||
ms_ok | Example | ms_tab | Example | ||
ms_clear | Example | ms_srch | Example | ||
ms_undo | Example | ms_chrt | Example | ||
ms_save | Example | ms_list | Example | ||
ms_cancel | Example | ms_sort | Example | ||
ms_copy | Example | ms_tbl | Example | ||
ms_check | Example | ms_magic | Example | ||
ms_add | Example | ms_cog | Example | ||
ms_del | Example | ms_bar | Example | ||
ms_edit | Example | ms_line | Example | ||
ms_first | Example | ms_pie | Example | ||
ms_back | Example | ms_stck | Example | ||
ms_next | Example | ms_tach | Example | ||
ms_last | Example | ms_pdf | Example | ||
ms_remove | Example | ms_wrd | Example | ||
ms_up | Example | ms_prnt | Example | ||
ms_down | Example | ms_xls | Example | ||
ms_hide | Example | ms_xml | Example | ||
ms_view | Example | ms_csv | Example | ||
ms_max | Example | ms_img | Example | ||
ms_upl | Example | ms_mail | Example | ||
ms_clock | Example | ms_more | Example | ||
ms_gear | Example | ms_dwnl | Example | ||
ms_data | Example | ms_warn | Example | ||
ms_pw | Example | ms_fb | Example | ||
ms_exit | Example | ms_gogl | Example | ||
ms_event | Example | ms_papl | Example | ||
ms_alert | Example | ms_twtt | Example | ||
ms_ask | Example | ms_sad | Example | ||
ms_bell | Example | ms_home | Example | ||
ms_lft | Example |
# Macros
In addition to customizing the buttons, Sprout also has exclusive macros, designed to provide more dynamism to the system.
Macro | Description |
---|---|
sc_field_group() | This macro allows you to group multiple values in a single field of the grid. |
sc_input_group() | This macro allows you to create groupings of texts and icons in form inputs. |
sc_float_label() | This macro allows you to transform the placeholder as a floating label on form inputs. |
sc_back_to_top() | This macro creates a button, in the bottom margin while scrolling the page, redirecting to the top. |
sc_add_notification() | This macro allows the sending of alert messages or system events. |
# sc_field_group
sc_field_group(text, array_config)
This macro allows you to group multiple values in a single field of the grid. Through the parameters it is possible to inform the values that will be displayed and also a series of display configurations through an array.
The use of this macro is restricted to the grid's onRecord event.
This macro requires the use of the internal fieldGroup.php library, which is enabled by default.
# Parameters
Parameter | Description | Type | |
---|---|---|---|
text | This parameter will receive the values that will be displayed. It can be a string or an array with multiple values. | string ou array | Required |
array_config* | This parameter will receive an array with two configuration indexes: ms_initial e ms_list. See below all available parameters and their descriptions. | array | Optional |
*This parameter is not mandatory for the macro to work.
# ms_initial
Index | Description | Type | |
---|---|---|---|
["ms_initial"]["img"]["field"] | Receives value from Image field (File Name) | string | Optional |
["ms_initial"]["img"]["path"] | Applies the default path for Scriptcase images. (Y/N) | string | Optional |
["ms_initial"]["img"]["viewer"] | Applies the image viewer on the click of the image. (Y/N) | string | Optional |
["ms_initial"]["icon"] | Receives Font Awesome's icon value. | string | Optional |
["ms_initial"]["text"] | Receives value that will be used to apply the initial. | string | Optional |
# ms_list
Index | Description | Type | |
---|---|---|---|
["ms_list"]["title"] | Title | string | Optional |
["ms_list"]["note"]["theme"] | Small text that will receive color from the selected theme. | string | Optional |
["ms_list"]["note"]["primary"] | small text that will receive the primary class. Hex.: #3699ff ■ | string | Optional |
["ms_list"]["note"]["danger"] | small text that will receive the danger class. Hex.: #f64e60 ■ | string | Optional |
["ms_list"]["note"]["warning"] | small text that will receive the warning class. Hex.: #ffa800 ■ | string | Optional |
["ms_list"]["note"]["success"] | small text that will receive the success class. Hex.: #1bc5bd ■ | string | Optional |
["ms_list"]["note"]["info"] | small text that will receive the info class. Hex.: #8950fc ■ | string | Optional |
# Example
Grids - onRecord
$admin = (isset({set_admin}) && {set_admin} == "Y") ? {lang_sec_user_fld_set_admin} : ""; $set = array(); $set["ms_initial"]["img"]["field"] = {photo}; $set["ms_initial"]["img"]["viewer"] = "Y"; $set["ms_initial"]["text"] = {first_name}; $set["ms_list"]["title"] = {first_name} . " " . {last_name}; $set["ms_list"]["note"]["primary"] = $admin; {user} = sc_field_group({email}, $set);
Copied!
# sc_input_group
sc_input_group(array_fields, sc_seq_vert)
This macro allows you to create text and icon groups on form inputs. Through the parameters it is possible to inform a multidimensional array that will receive the fields, contents and types that can be texts or Font Awesome (opens new window) icons.
The use of this macro is restricted to the onLoad and onLoadRecord events of form, control, and calendar applications.
This macro requires the use of the inputGroup.php internal library, which is enabled by default.
Disable the Display Ajax output option in the application settings.
# Parameters
Parameter | Description | Type | |
---|---|---|---|
array_fields | This parameter will receive a multidimensional array with fields, contents and Types that can be texts or icons Font Awesome. | array | Required |
sc_seq_vert* | This parameter stores the current line number of the log being executed by the event. Being mandatory only for horizontal form guidelines. ($sc_seq_vert) | variable | Required |
*This parameter must receive the variable $sc_seq_vert and is mandatory only for multiple records, editable grid and editable grid(view) orientations.
# Multidimensional Array
Positions | Description | Type | |
---|---|---|---|
Field* | Receives the field name. | string | Required |
Type | Receives the Type of group. (text/icon) | string | Required |
Content** | Receives the displayed text or icon. | string | Required |
Orientation | Receives the position in which the group will be used. (left/right) | string | Required |
*View supported field types.
**For icons it is necessary to inform the Font Awesome (opens new window) class attribute. Example: fas fa-user.
# Supported Field Types
Field Types |
---|
Text |
Number |
Decimal |
Currency |
Type Card |
Zip code |
URL |
HMTL Color |
Date |
Hour |
# Examples
Single record forms, controls and calendars - onLoad
$arr_fields = [ ['smtp_server', 'icon', 'fas fa-server', 'left'], ['smtp_email', 'icon', 'fas fa-at', 'left'], ['smtp_user', 'icon', 'fas fa-user', 'left'], ['smtp_pswd', 'icon', 'fas fa-key', 'left'] ]; sc_input_group($arr_fields);
Copied!
Multiple records forms, editable grid and editable grid (view) - onLoadRecord
$arr_fields = [ ['mod', 'icon', 'fas fa-bars', 'left'] ]; sc_input_group($arr_fields, $sc_seq_vert);
Copied!
# sc_float_label
sc_float_label(array_fields, sc_seq_vert)
This macro allows you to transform the placeholder as a floating label on form inputs. Through the parameters it is possible to inform an array that will receive all the fields in which the resource will be applied.
The use of this macro requires that the field used contains a placeholder(Watermark).
Use of this macro is restricted to the onLoad and onLoadRecord events of form, control, and calendar applications.
This macro requires the use of the floatLabel.php internal library, which is enabled by default.
Disable the Display Ajax output option in the application settings.
# Parameters
Parameter | Description | Type | |
---|---|---|---|
array_fields | This parameter will receive an array with the fields. | array | Required |
sc_seq_vert* | This parameter stores the current line number of the log being executed by the event. Being Required for horizontal form guidelines only. | variable | Required |
*This parameter must receive the variable $sc_seq_vert and is Required only for orientations of multiple records, editable grid and editable grid(view).
# Array
Positions | Description | Type | |
---|---|---|---|
Field* | Receives the field name. | string | Required |
# Supported Field Types
Field Types |
---|
Text |
Number |
Decimal |
Currency |
Type Card |
Zip code |
URL |
HMTL Color |
Date |
Hour |
# Examples
Single record forms, controls and calendars - onLoad
$arr_fields = ['smtp_server', 'smtp_email', 'smtp_user', 'smtp_pswd']; sc_float_label($arr_fields);
Copied!
Multiple records forms, editable grid and editable grid (view) - onLoadRecord
$arr_fields = ['mod', 'icon']; sc_float_label($arr_fields, $sc_seq_vert);
Copied!
# sc_back_to_top
sc_back_to_top(position)
This macro creates a button, in the bottom margin while scrolling the page, redirecting to the top. Through the parameter, it is possible to define the position of the button as left or right.
The use of this macro is applicable to page load events such as onExecute, onLoad and onScriptInit.
This macro requires the use of the built-in library backTop.php, which is enabled by default.
Disable the Display Ajax output option in the application settings.
# Parameters
Parameter | Description | Type | |
---|---|---|---|
position | This parameter will receive the position value. (left/right) In the absence of the parameter, the default value is right. | string | Optional |
# Examples
Grid - onScriptInit
sc_back_to_top();
Copied!
Form - onLoad
sc_back_to_top("left");
Copied!
# sc_add_notification
sc_add_notification(type, rec_type, receiver, text, link, sender)
This macro allows the sending of alert messages or system events. Through the parameters it is possible to determine for which users and departments the message will be displayed.
This macro requires the use of the built-in notification.php library, which is enabled by default.
# Parameters
Parameter | Description | Type | |
---|---|---|---|
type | This parameter defines the Type of the sent message. Where, it can be sent as an alert message(alert) or a system event(event). System events can be defined as common situations where the user will be notified. Like, by Example it would be a registration of a new user or completion of an order. To do this, use the "event" value. Alert messages can be defined as situations that require the intervention of an administrator to notify a user or a group of users. To do this, use the "alert" value. | string | Required |
rec_type | This parameter defines who the message will be sent to. It can be all_users for all users, group for one or more user groups and user for one or more users. For group and user it is necessary that the receiver parameter is from department(s) or user(s). If the parameter used is all_users, the parameter receiver can be ignored. | string | Required |
receiver | This parameter only takes effect when applied together with the rec_type parameter passing the group or user values. Otherwise, it can be ignored by passing the parameter as NULL. | integer or string | Required |
text | This parameter defines the content of the message that will be sent. | string | Required |
link | This parameter receives an application as a parameter and allows the message to be displayed with a link pointing to the defined application. It is essential for a good user experience that the user has access privileges for the application that has been defined. | string | Required |
sender | This parameter defines which user sent the message, the sender. | integer or string | Required |
# Example
switch ({receiver_type}) { case "all_users": $receiver = null; break; case "group": $receiver = {receiver_group}; break; case "user": break; default: $receiver = null; break; } $sender = null; if (isset([usr_login])) { $sender = [usr_login]; } sc_add_notification({type}, {receiver_type}, $receiver, {text}, {link_app}, $sender);
Copied!